Question

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

1

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

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

2

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

这一点都没有。

第3

在manifest.json中我注入了css。

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

css文件只有光标：url（icons / cursor.cur）因为我不知道，如何在css文件中获取真正的URL。这根本不起作用。我认为它必须像这样工作，但我没有在code.google上找到这方面的参考。

Answer 1

您不需要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，所以如果有错误，那么现在可能已经修复了。

Answer 2

添加：

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",
  ...

Chrome扩展程序自定义光标

3 个答案: