Estoy creando una extensión que colocará un botón debajo de cada video en la página de inicio, pero descubrí rápidamente que esto no sería posible simplemente usando una instrucción selectAll. Lo único que hace una declaración selectAll es recuperar las primeras 3 filas de videos en la página de inicio. Creo que lo que sucede es que se cargan videos después de que se cargó la página, por lo que los elementos no existen en "document_end" (esto es cuando mi extensión de Chrome está inyectando js/css en la página). Estaría buscando algo como un detector de eventos, pero también agradecería una explicación de por qué sucede esto.
Puede resolver esto usando MutationObservers en su secuencia de comandos de contenido.
Ejemplo de documentos web mdn a continuación, debería poder llamar y encontrar nuevos elementos usando document.querySelectorAll() dentro de la función de devolución de llamada.
// Keep track of DOM element changes under <html> and run callback with mutationsList and observer once DOM changes // Select the node that will be observed for mutations const targetNode = document.getElementById('some-id'); // Options for the observer (which mutations to observe) const config = { attributes: true, childList: true, subtree: true }; // Callback function to execute when mutations are observed const callback = function(mutationList, observer) { // Use traditional 'for loops' for IE 11 for(const mutation of mutationList) { if (mutation.type === 'childList') { console.log('A child node has been added or removed.'); } else if (mutation.type === 'attributes') { console.log('The ' + mutation.attributeName + ' attribute was modified.'); } } }; // Create an observer instance linked to the callback function const observer = new MutationObserver(callback); // Start observing the target node for configured mutations observer.observe(targetNode, config); // Later, you can stop observing observer.disconnect();