Ascolta la creazione di un elemento e attiva un evento quando viene visualizzato nella pagina in Chrome Extension

Question

È possibile ascoltare un'estensione di Chrome in attesa dell'aspetto di un elemento ancora da creare?

Dire che l'utente fa clic su un pulsante e l'evento click crea un elemento <div id='myDiv'>My Div</div> e lo aggiunge alla pagina/DOM. È possibile impostare un listener che attiva automaticamente un evento quando viene visualizzato quell'elemento?

Oppure devo ricorrere al polling della pagina e controllare questo elemento ogni X quantità di millisecondi?

jQuery e altre librerie non sono un'opzione per me btw.

Answer 1

Il nuovo DOM4 MutationObserver può farlo. Non penso che sia ampiamente supportato ancora, ma per tua fortuna, è supportato in Chrome, come WebKitMutationObserver.

Modificata dalla pagina esercitazione collegata, questo ascolta per le mutazioni ovunque sulla pagina:

var observer = new WebKitMutationObserver(function(mutations) { 
    mutations.forEach(function(mutation) { 
     for (var i = 0; i < mutation.addedNodes.length; i++) { 
      if(mutation.addedNodes[i].id == "myDiv") { 
       // target node added, respond now... 
      } 
     } 
    }); 
}); 
observer.observe(document, { subtree: true }); 

Se è possibile restringere l'ascolto in observer.observe ad un elemento più specifico di document, che darebbe un po 'di guadagno di prestazioni .

Answer 2

È possibile utilizzare arrive.js, esso avvolge l'API Mutation Observers. Utilizzo:

document.arrive(".test-elem", function() { 
    // 'this' refers to the newly created element 
    var newElem = this; 
});