Chrome擴展程序自定義光標

我構建了一個可在站點中放置一些IMG標記的Google Chrome擴展程序。這個img標籤：hover必須顯示一個自定義光標。該擴展使用jQuery作爲其注入的核心腳本。我嘗試以下方法：Chrome擴展程序自定義光標

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

這是最好的工作。在較小的網站上顯示光標。在較慢的加載網站上它沒有。但在小網站上有時會失敗。

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

這做什麼都沒有。

manifest.json中我注入的CSS。

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

CSS文件只是有光標：URL（圖標/ cursor.cur），因爲我沒有想法，如何獲得真正的URL在CSS文件。這根本不起作用。我認爲它必須像這樣工作，但我沒有在code.google上找到這個參考。

來源

2011-01-06 Ákos Nikházy

事實證明，使工作的CSS規則應該寫成：{cursor:url(...),default;}

~~對於您的第三個方法試試這個在CSS~~

~~#myImgId { cursor:url('chrome-extension://[email protected]@extension_id__/icons/cursor.cur'); }~~

（不起作用由於錯誤）

來源

2011-01-06 16:22:37 serg

你不應該需要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，所以如果有錯誤，那麼現在可能已經修復了。

來源

2011-01-06 12:15:24 Spudley

那麼，對於一個Chrome擴展，IE瀏覽器的行爲是不相關的。 – 2011-01-06 18:07:12

你錯過了我的觀點。我的擴展在每個網站用戶訪問中放置圖像，並且該圖像必須具有包含在擴展中的自定義光標。它的擴展部分，只有擴展生成的圖像必須有該光標。（謝謝你的回答，你提供的鏈接將派上用場，我確定:)） – 2011-01-06 19:29:58

補充：

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

重移動：

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

不要忘記到的.cur文件添加到清單：

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

來源

2015-06-23 04:30:41 horiatu

Chrome擴展程序自定義光標

回答

相關問題