Chrome扩展程序自定义光标

我构建了一个可在站点中放置一些IMG标记的Google Chrome扩展程序。这个img标签：hover必须显示一个自定义光标。该扩展使用jQuery作为其注入的核心脚本。我尝试以下方法：Chrome扩展程序自定义光标

var cursor = 'url('+chrome.extension.getURL('icons/cursor.cur')+')'; 
$('#myImgId').css({ 
    'position': 'absolute', 
    'top':'5px', 
    'left':'5px', 
    'cursor':cursor 
});

这是最好的工作。在较小的网站上显示光标。在较慢的加载网站上它没有。但在小网站上有时会失败。

var cursor = 'url('+chrome.extension.getURL('icons/cursor.cur')+')';  
$('<style>#myImgId{cursor:'+cursor+'}</style>').appendTo('head');

这做什么都没有。

manifest.json中我注入的CSS。

"content_scripts": [ 
{ 
    "matches": ["http://*/*"], 
    "css": ["css/style.css"], 
    "js": ["j/c.js", "j/s.js"] 
}

CSS文件只是有光标：URL（图标/ cursor.cur），因为我没有想法，如何获得真正的URL在CSS文件。这根本不起作用。我认为它必须像这样工作，但我没有在code.google上找到这个参考。

来源

2011-01-06 Ákos Nikházy

事实证明，使工作的CSS规则应该写成：{cursor:url(...),default;}

~~对于您的第三个方法试试这个在CSS~~

~~#myImgId { cursor:url('chrome-extension://[email protected]@extension_id__/icons/cursor.cur'); }~~

（不起作用由于错误）

来源

2011-01-06 16:22:37 serg

你不应该需要Chrome扩展;这是CSS的一个标准功能，可以在元素上移动时更改光标，包括将其更改为自定义图像的功能。

你应该能够只需添加这样的事情你的CSS：

.myimage { cursor: url(icons/cursor.gif);}

无需做任何指令码。

但是，在各种浏览器中，该功能存在缺陷，怪癖和实现差异。

最大的问题是Internet Explorer希望光标文件是一个.cur文件，而所有其他浏览器都需要一个常规图像文件（例如.gif）。如果你希望它能够跨浏览器工作，你需要提供两个版本的图标，并在你的CSS中使用特定于浏览器的测试或黑客入侵，以便选择合适的版本。

一个与它的怪癖和在各种浏览器支持CSS cursor功能很好的总结可以在这里找到：http://www.quirksmode.org/css/cursor.html

此页还指出，“图像在Chrome乱码”。这对您来说可能是个坏消息，但测试并没有更新一段时间，因此信息适用于Chrome 5，所以如果有错误，那么现在可能已经修复了。

来源

2011-01-06 12:15:24 Spudley

那么，对于一个Chrome扩展，IE浏览器的行为是不相关的。 – 2011-01-06 18:07:12

你错过了我的观点。我的扩展在每个网站用户访问中放置图像，并且该图像必须具有包含在扩展中的自定义光标。它的扩展部分，只有扩展生成的图像必须有该光标。（谢谢你的回答，你提供的链接将派上用场，我确定:)） – 2011-01-06 19:29:58

补充：

var css = 
'<Style id="myCursor">\n'+ 
' .myClass { cursor: url('+chrome.extension.getURL("Cursors/myCrossCursor.cur")+'), crosshair; }\n'+ 
'</Style>'; 
if ($("head").length == 0) { 
    $("body").before(css); 
} else { 
    $("head").append(css); 
}

重移动：

$("#myCrossCursor").remove();

不要忘记到的.cur文件添加到清单：

"web_accessible_resources": [ 
    "Cursors/myCrossCursor.cur", 
    ...

来源

2015-06-23 04:30:41 horiatu

Chrome扩展程序自定义光标

回答

相关问题