Chrome extension custom cursor
- by the_nakos
Hi,
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.
