Chrome extension custom cursor

Question

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.

Answer 1

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)