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)

Answer 2

You shouldn't need a Chrome extension for this; it's a standard feature of CSS to be able to change the cursor when moving over elements, including the ability to change it to a custom image.

You should be able to just add something like this to your CSS:

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

without having to do any scripting at all.

However there are bugs, quirks and implementation differences in this feature in a variety of browsers.

The biggest quirk to know about is that Internet Explorer expects the cursor file to be a .cur file, whereas all other browsers expect a regular image file (eg a .gif). If you want it to work cross-browser, you will need to provide two versions of your icon and use a browser-specific test or hack in your CSS to make it pick the right one.

A very good summary of the CSS cursor feature with its quirks and support in various browsers can be found here: http://www.quirksmode.org/css/cursor.html

This page also states that "the image is garbled in Chrome". This may be bad news for you, but the test hasn't been updated for a while so that info applies to Chrome 5, so if there was bug there it may well have been fixed by now.

Answer 3

To add:

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);
}

To remove:

$("#myCrossCursor").remove();

Do not forget to add the .cur file to the manifest:

"web_accessible_resources": [
  "Cursors/myCrossCursor.cur",
  ...