Chrome扩展程序自定义光标

Question

我构建了一个 Google Chrome 扩展程序，在网站中放置一些 IMG 标签。 :hover 上的此 img 标记必须显示自定义光标。该扩展使用 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文件只有cursor:url(icons/cursor.cur)，因为我不知道如何在css文件中获取真实的url。这根本不起作用。我认为它一定是这样工作的，但我在 code.google 上没有找到这方面的参考。

Answer 1

事实证明，要使其正常工作，CSS 规则应编写为： {cursor:url(...),default;}

对于您的第三种方法，请在 css 中尝试此操作

#myImgId {
 cursor:url('chrome-extension://__MSG_@@extension_id__/icons/cursor.cur');
}

（由于错误而不起作用）

Answer 2

为此，您不需要 Chrome 扩展程序； CSS 的一项标准功能是能够在元素上移动时更改光标，包括将其更改为自定义图像的能力。

您应该能够将这样的内容添加到 CSS 中：

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

根本不需要编写任何脚本。

然而，此功能在各种浏览器中都存在错误、怪癖和实现差异。

要了解的最大的怪癖是 Internet Explorer 期望光标文件是 .cur 文件，而所有其他浏览器期望常规图像文件（例如 .gif）。如果您希望它能够跨浏览器工作，则需要提供两个版本的图标，并在 CSS 中使用特定于浏览器的测试或 hack 来使其选择正确的版本。

可以在这里找到 CSS cursor 功能及其怪癖和各种浏览器支持的非常好的总结：http://www.quirksmode.org/css/cursor.html

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

Answer 3

要添加：

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