Chrome扩展程序自定义cursor [英] Chrome extension custom cursor

问题描述

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

1。

  var cursor ='url（'+ chrome.extension.getURL（'icons / cursor.cur'）+'）'; 
 $（'＃myImgId'）。css（{
'position'：'absolute'，
'top'：'5px'，
'left'：'5px' ，
'cursor'：cursor 
}）; 
  

这是最好的工作。在较小的网站上显示光标。在较慢的加载网站，它不。

b

  var cursor ='url（'+ chrome.extension.getURL（'icons / cursor.cur'）+'）'; 
 $（'< style> #myImgId {cursor：'+ cursor +'}< / style>'）。appendTo（'head'）; 
  

这什么都没有。

---

3。

在manifest.json中我注入了css。

 content_scripts：[
 {
matches：[http：// * / *] $ bcss：[css / style.css]，
js：[j / c.js，j / s.js] 
} 
  

css文件只有光标：url（icons / cursor.cur），因为我不知道，在css文件中获取真实的url。这不工作。我认为它必须这样工作，我没有找到这个代码的参考尽管。

解决方案

out，使其工作css规则应写为： {cursor：url（...），default;}

对于你的第三种方法，尝试在css中

  #myImgId {
 cursor：url chrome-extension：//__MSG_@@extension_id__/icons/cursor.cur'）; 
} 
  

p>

I building an Google Chrome extension that place some IMG tag in sites. This img tag on :hover must show a custom cursor. The extension uses jQuery as its injected core script. I tried the following methods:

1.

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

This is the best working. On smaller sites its shows the cursor. On slower loading sites it does not. But on little sites it fails sometimes.

---

2.

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

This did nothing at all.

---

3.

In manifest.json I injected the css.

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

The css file just had the cursor:url(icons/cursor.cur) as I don't have idea, how to get real url in a css file. This isn't working at all. I think it must work like this, I didn't find reference for this on code.google though.

解决方案

As it turned out to make it work css rule should be written as: {cursor:url(...),default;}

For your 3rd method try this in css

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

(doesn't work due to a bug)

这篇关于Chrome扩展程序自定义cursor的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！