Niestandardowy kursor rozszerzenia przeglądarki Chrome

Question

Buduję rozszerzenie Google Chrome, które umieszcza znacznik IMG w witrynach. Ten znacznik img na: hover musi wyświetlać niestandardowy kursor. Rozszerzenie używa jQuery jako wstrzykniętego rdzenia skryptu. Próbowałem następujące metody:

1.

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

Jest to najlepszy roboczego. W mniejszych witrynach pokazuje kursor. Na wolniejszych stronach ładujących nie. Ale na małych stronach czasami się nie udaje.

---

2.

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

To nie zrobił nic w ogóle.

---

3.

manifest.json Wstrzyknąłem CSS.

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

Plik css właśnie miał kursora: url (ikony/cursor.cur) jak nie mam pojęcia, jak dostać się prawdziwy adres URL w pliku CSS. To w ogóle nie działa. Myślę, że to musi działać w ten sposób, ale nie znalazłem dla tego odniesienia na code.google.

Answer 1

Jak się okazało, aby to działało regułę CSS powinien być zapisany jako: {cursor:url(...),default;}

Dla 3rd metody spróbować tego w css

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

(nie działa z powodu błędu)

Answer 2

Nie powinieneś potrzebować rozszerzenia do Chrome; standardową funkcją CSS jest możliwość zmiany kursora podczas przesuwania po elementach, w tym możliwość zmiany go na niestandardowy obraz.

Powinieneś być w stanie po prostu dodać coś takiego do swojego CSS:

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

bez konieczności wykonywania jakichkolwiek włączony w ogóle.

Istnieją jednak błędy, dziwactwa i różnice w implementacji tej funkcji w różnych przeglądarkach.

Największym dziwactwem jest to, że Internet Explorer oczekuje, że plik kursora będzie plikiem .cur, podczas gdy wszystkie inne przeglądarki oczekują zwykłego pliku obrazu (np. Gif). Jeśli chcesz, aby działała w różnych przeglądarkach, musisz podać dwie wersje ikony i użyć specyficznego dla przeglądarki testu lub zhackowania w swoim CSS, aby wybrać właściwy.

Bardzo dobre podsumowanie funkcji CSS cursor z jego dziwactw i wsparcie w różnych przeglądarkach można znaleźć tutaj: http://www.quirksmode.org/css/cursor.html

Ta strona stwierdza również, że „obraz jest zniekształcony w Chrome”. To może być dla ciebie zła wiadomość, ale test nie był od jakiegoś czasu aktualizowany, więc informacje dotyczą Chrome 5, więc jeśli był tam błąd, to prawdopodobnie został on już naprawiony.

Answer 3

Aby dodać:

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

Aby ponownie przenieść:

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

Nie zapomnij dodać plik .cur do manifestu:

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