क्रोम एक्सटेंशन कस्टम कर्सर

Question

मैं एक Google क्रोम एक्सटेंशन बना रहा हूं जो साइटों में कुछ आईएमजी टैग रखता है। इस आईएमजी टैग पर: होवर एक कस्टम कर्सर दिखाना चाहिए। एक्सटेंशन jQuery को इंजेक्शन कोर स्क्रिप्ट के रूप में उपयोग करता है। मैंने कोशिश की निम्न विधियों:

1.

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

यह सबसे अच्छा काम कर रहे है। छोटी साइटों पर यह कर्सर दिखाता है। धीमी लोडिंग साइटों पर यह नहीं करता है। लेकिन छोटी साइटों पर यह कभी-कभी विफल रहता है।

---

2.

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

यह सब कुछ नहीं किया।

---

3.

manifest.json में मैं सीएसएस इंजेक्शन। यूआरएल (प्रतीक/cursor.cur) के रूप में मैं विचार की जरूरत नहीं है, कैसे एक सीएसएस फ़ाइल में वास्तविक यूआरएल पाने के लिए:

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

सीएसएस फ़ाइल बस कर्सर था। यह बिल्कुल काम नहीं कर रहा है। मुझे लगता है कि इसे इस तरह काम करना चाहिए, हालांकि कोड कोड पर मुझे इसका संदर्भ नहीं मिला।

Answer 1

जैसा सामने आया यह सीएसएस नियम काम करने के लिए के रूप में लिखा जाना चाहिए)

Answer 2

आपको इसके लिए क्रोम एक्सटेंशन की आवश्यकता नहीं है; यह कस्टम छवि में बदलने की क्षमता सहित तत्वों पर आगे बढ़ते समय कर्सर को बदलने में सक्षम होने के लिए सीएसएस की एक मानक विशेषता है।

तुम सिर्फ अपने सीएसएस करने के लिए कुछ इस तरह जोड़ने के लिए सक्षम होना चाहिए:

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

किसी भी पटकथा करने के लिए बिना।

हालांकि विभिन्न प्रकार के ब्राउज़रों में इस सुविधा में बग, क्विर्क और कार्यान्वयन अंतर हैं।

इस बारे में जानने के लिए सबसे बड़ा क्विर्क यह है कि इंटरनेट एक्सप्लोरर कर्सर फ़ाइल को .cur फ़ाइल होने की अपेक्षा करता है, जबकि अन्य सभी ब्राउज़र नियमित छवि फ़ाइल (उदाहरण के लिए एक .gif) की अपेक्षा करते हैं। यदि आप इसे क्रॉस-ब्राउज़र पर काम करना चाहते हैं, तो आपको अपने आइकन के दो संस्करण प्रदान करने और ब्राउज़र-विशिष्ट परीक्षण या अपने सीएसएस में हैक को सही चुनने के लिए उपयोग करना होगा।

एक अपनी quirks और विभिन्न ब्राउज़रों में समर्थन के साथ सीएसएस cursor सुविधा का बहुत अच्छा सारांश यहां पाया जा सकता: http://www.quirksmode.org/css/cursor.html

यह पृष्ठ भी कहा गया है कि "छवि क्रोम में ठीक से प्रदर्शित किया जाता है"। यह आपके लिए बुरी खबर हो सकती है, लेकिन परीक्षण थोड़ी देर के लिए अपडेट नहीं किया गया है ताकि जानकारी क्रोम 5 पर लागू हो, इसलिए यदि वहां बग था तो यह अब तक तय हो सकता है।बग के कारण सीएसएस में यह कोशिश

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

(काम नहीं करता है {cursor:url(...),default;}

अपने 3 विधि के लिए:

Answer 3

जोड़ने के लिए:

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", 
    ...