Geek Answers Handbook

Chrome extension custom cursor

I am creating a Google Chrome extension that places some IMG tag on sites. This img tag on: hover should show a custom cursor. The extension uses jQuery as the built-in kernel 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 job. On small sites, a cursor is displayed. On slower download sites this is not the case. But on small sites, this sometimes happens.

2.

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

It did nothing.

3.

In manifest.json, I introduced css.

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

There was only a pointer in the css file: url (icons / cursor.cur), since I have no idea how to get the real url in the css file. This does not work at all. I think it should work like this, I did not find a link to this on code.google.

+5
3

, , css : {cursor:url(...),default;}

css

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

( - )

+2

Chrome; CSS, , .

- CSS:

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

- .

, .

, , , Internet Explorer , .cur, (,.gif). , -, CSS, .

CSS cursor ​​ : http://www.quirksmode.org/css/cursor.html

, " Chrome". , - , Chrome 5, , , , , .

0

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 delete:

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

Remember to add the .cur file to the manifest:

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

More articles:


All Articles