Google क्रोम एक्सटेंशन: माउस को

Question

पर हो रहा है कि div को हाइलाइट करें, मैं Google क्रोम एक्सटेंशन में नया हूं और एक एक्सटेंशन लिखने की कोशिश कर रहा हूं जो माउस ऊपर है (होवर) के मामले में एक div को हाइलाइट करता है। इस मामले में कि एक और div के अंदर एक div है, मैं केवल आंतरिक div को हाइलाइट करना चाहता हूं।

मैं लेकिन काम कर नमूने में से कुछ मिल गया है यकीन है कि कैसे मंडराना घटना, किसी भी मदद के लिए अग्रिम धन्यवाद,

खुश रहो और जीवन का आनंद लेने को पकड़ने के लिए नहीं कर रहा हूँ।

Answer 1

एचटीएमएल में, प्रत्येक माउस ईवेंट में अंतर्निहित तत्व तक पहुंच होती है। आप आसानी से जावास्क्रिप्ट के साथ ऐसा कर सकते हैं, और एचटीएमएल 5 में classList (क्रोमियम से एरिक के लिए धन्यवाद) नामक एक अच्छी सुविधा है जो आपको आसानी से डीओएम से कक्षाओं को जोड़ने और हटाने की अनुमति देती है।

सबसे पहले, आप इसे Google क्रोम के Content Scripts के साथ प्राप्त कर सकते हैं। एल्गोरिदम काफी सरल है, आप अंतिम बार गए डोम पर एक पॉइंटर रखते हैं, और जब आप किसी अन्य डीआईवी तत्व पर जाते हैं तो आप क्लास को जोड़ते/हटाते हैं।

आपके manifest.json हम प्रत्येक पृष्ठ पर सीएसएस और जेएस इंजेक्शन को परिभाषित करेंगे।

... 
    ... 
    "content_scripts": [ 
    { 
     "matches": ["http://*/*"], 
     "css": ["core.css"], 
     "js": ["core.js"], 
     "run_at": "document_end", 
     "all_frames": true 
    } 
    ] 
    ... 
    ... 

अब हमारे core.js पर गौर करने देता है, मैं समझाने की क्या चल रहा है कुछ टिप्पणियों में शामिल हैं:

// Unique ID for the className. 
var MOUSE_VISITED_CLASSNAME = 'crx_mouse_visited'; 

// Previous dom, that we want to track, so we can remove the previous styling. 
var prevDOM = null; 

// Mouse listener for any move event on the current document. 
document.addEventListener('mousemove', function (e) { 
    var srcElement = e.srcElement; 

    // Lets check if our underlying element is a DIV. 
    if (srcElement.nodeName == 'DIV') { 

    // For NPE checking, we check safely. We need to remove the class name 
    // Since we will be styling the new one after. 
    if (prevDOM != null) { 
     prevDOM.classList.remove(MOUSE_VISITED_CLASSNAME); 
    } 

    // Add a visited class name to the element. So we can style it. 
    srcElement.classList.add(MOUSE_VISITED_CLASSNAME); 

    // The current element is now the previous. So we can remove the class 
    // during the next iteration. 
    prevDOM = srcElement; 
    } 
}, false); 

अब, चलो सरल core.css के लिए देखो शैलियों:

.crx_mouse_visited { 
    background-color: #bcd5eb !important; 
    outline: 1px solid #5166bb !important; 
} 

यह बात करता है, आप देखेंगे कि आपके सभी divs में "आच्छादित" राज्य होगा, जैसा कि हाप जब आप तत्वों का निरीक्षण करते हैं तो आप अपने ब्राउज़र इंस्पेक्टर पर जाते हैं।

Answer 2

@pdknsk आप है, शरीर के onload घटना के लिए, इस कोड को चलाने के प्रत्येक तत्व के लिए यह निर्धारित करने के लिए क्या कर सकते हैं:

bod= document.body; 
walker = document.createTreeWalker(bod,NodeFilter.SHOW_ELEMENT,null,false); 
while (walker.nextNode()){ 
    walker.currentNode.addEventListener("mouseover",on,false); 
    walker.currentNode.addEventListener("mouseout",off,false); 
} 

और पर संशोधित करने और इस तरह बंद:

on=function(elem){ oldBG = this.style.backgroundColor; 
        this.style.backgroundColor='#123456'; 
        this.addEventListener("mouseout",function(){this.style.backgroundColor= oldBG},false); 
} 

ध्यान देने योग्य बात यह है कि, यह केवल तभी काम करेगा जब स्टाइल element.style ऑब्जेक्ट का उपयोग करके सेट किया गया हो, और इसे और अधिक मजबूत बनाने के लिए आपको element.style.cssText और प्रक्रिया (रेगेक्स का उपयोग करके) और इसे संशोधित करने की आवश्यकता होगी।

सब कुछ, मोहम्मद मंसूर का उत्तर यह प्राप्त करने का सबसे अच्छा तरीका है।