Estensione Google Chrome: evidenzia il div al passaggio del mouse su

Question

Sono nuovo per le estensioni di google chrome e sto provando a scrivere un'estensione che evidenzia un div nel caso in cui il mouse sia sopra di esso (Hover). Nel caso in cui ci sia un div all'interno di un altro div, vorrei evidenziare solo il div interno.

ho avuto alcuni dei campioni di lavoro, ma non sono sicuro come catturare l'evento hover, Grazie in anticipo per qualsiasi aiuto,

essere felici e godersi la vita.

Answer 1

In HTML, ogni evento del mouse ha accesso all'elemento sottostante. Puoi farlo facilmente con JavaScript, e c'è una bella funzionalità in HTML5 chiamata classList (grazie a Erik di Chromium) che ti permette di aggiungere e rimuovere facilmente classi da DOM.

Prima di tutto, è possibile ottenere questo con Google Chrome Content Scripts. L'algoritmo è piuttosto semplice, si mantiene un puntatore all'ultimo DOM visitato e si aggiunge/rimuove solo la classe quando si visita un altro elemento DIV.

All'interno di manifest.json Definiremo le iniezioni CSS e JS in ogni pagina visualizzata.

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

Vediamo ora nei nostri Core.js, ho incluso alcuni commenti per spiegare cosa sta succedendo:

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

Ora, consente di guardare al semplice core.css per gli stili:

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

Ecco fatto, si noterà che tutti i div avrà un "aleggiava" stato, simile a quello che HAP penne quando visiti l'ispettore del tuo browser durante l'ispezione degli elementi.

Answer 2

@pdknsk Cosa si può fare per impostare questo per ogni elemento è, per l'evento onload del corpo, eseguire questo codice:

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

e modificare on e off come questo:

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

La cosa da notare è che, ciò funzionerà solo se lo stile è impostato utilizzando l'oggetto element.style e, per renderlo più robusto, sarà necessario ottenere il element.style.cssText e elaborare (usando espressioni regolari) e modificarlo.

Tutto sommato, la risposta di Mohamed Mansour è il modo migliore per raggiungere questo obiettivo.