Escuchar para crear un elemento y desencadenar un evento cuando aparece en la página en la extensión de Chrome

Question

¿Es posible que una extensión de Chrome escuche la apariencia de un elemento aún por crear?

Supongamos que el usuario hace clic en un botón y el evento click crea un elemento <div id='myDiv'>My Div</div> y lo agrega a la página/DOM. ¿Es posible configurar un oyente que activará automáticamente un evento cuando aparezca ese elemento?

¿O tengo que recurrir a sondear la página y verificar este elemento cada X cantidad de milisegundos?

jQuery y otras bibliotecas no son una opción para mí por cierto.

Answer 1

El nuevo DOM4 MutationObserver puede hacerlo. No creo que sea ampliamente compatible todavía, pero afortunadamente para ti, es compatible con Chrome, como WebKitMutationObserver.

Modificado de la página de ayuda ligada, esta escucha de mutaciones en todas partes en la página:

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

Si usted puede reducir su escucha en observer.observe a un elemento más específico que document, que daría una ganancia de rendimiento .

Answer 2

Puede usar arrive.js, envuelve el Mutation Observers api. Uso:

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