Cursore personalizzato estensione Chrome

Question

Ho creato un'estensione Google Chrome che inserisce alcuni tag IMG nei siti. Questo tag img su: hover deve mostrare un cursore personalizzato. L'estensione usa jQuery come suo script principale iniettato. Ho provato i seguenti metodi:

1.

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

questo è il migliore di lavoro. Sui siti più piccoli mostra il cursore. Sui siti di caricamento più lenti non è così. Ma su piccoli siti a volte fallisce.

---

2.

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

Questo non ha fatto niente per niente.

---

3.

In manifest.json ho iniettato il css.

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

il file CSS appena avuto il cursore: url (icone/cursor.cur) come non ho idea, come ottenere reali URL in un file css. Questo non funziona affatto. Penso che debba funzionare così, però non ho trovato il riferimento per questo su code.google.

Answer 1

come si è scoperto per farlo funzionare regola CSS dovrebbe essere scritto come: {cursor:url(...),default;}

Per il 3 ° metodo di provare questo in CSS

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

(non funziona a causa di un bug)

Answer 2

Non è necessario disporre di un'estensione di Chrome per questo; è una caratteristica standard dei CSS per poter cambiare il cursore quando si spostano gli elementi, inclusa la possibilità di cambiarli in un'immagine personalizzata.

Dovreste essere in grado di aggiungere solo qualcosa di simile alla tua CSS:

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

, senza dover fare alcuna scripting a tutti.

Tuttavia ci sono bug, stranezze e differenze di implementazione in questa funzione in una varietà di browser.

Il più grande capriccio di sapere è che Internet Explorer si aspetta che il file del cursore sia un file .cur, mentre tutti gli altri browser si aspettano un file di immagine normale (ad esempio un file .gif). Se vuoi che funzioni cross-browser, dovrai fornire due versioni della tua icona e utilizzare un test specifico del browser o un trucco nel tuo CSS per farlo scegliere quello giusto.

Una buona sintesi della funzione CSS cursor con le sue peculiarità e il supporto in vari browser può essere trovato qui: http://www.quirksmode.org/css/cursor.html

Questa pagina afferma anche che "l'immagine è distorta in Chrome". Questa potrebbe essere una brutta notizia per te, ma il test non è stato aggiornato per un po 'di tempo in modo che le informazioni si applichino a Chrome 5, quindi se ci fosse un bug lì potrebbe essere stato già risolto.

Answer 3

Per aggiungere:

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

di ri Move:

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

Non dimenticare di aggiungere il file cur al manifesto:

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