Extensión de Chrome: ¿cómo inyectar nuevos elementos en la página mientras se carga? [duplicar]

Question

Estoy escribiendo una extensión de Chrome que inyecta un archivo javascript en una página para agregar un botón. Cuando voy al sitio web que quiero modificar, el botón siempre tarda una fracción de segundo más en cargarse después de que se carga la página. ¿Existe alguna forma de que pueda cargar el botón al mismo tiempo que los demás elementos de la página? He intentado usarlo MutationObserver, pero parece que no puedo resolverlo.

archivo manifest.json:

{
    "name": "Some extension",
    "version": "1.0",
    "description": "Some description",

    "content_scripts": [
        {
            "js": ["script.js"],
            "run_at": "document_start",
            "matches": ["https://*.familysearch.org/*"]
        }
    ],
    "manifest_version": 2
}

Guión a inyectar:

// Create a button and append it to an element with a class of 'primaryNav'
let navElement = document.getElementById('primaryNav');
let newElement = document.createElement('button');
newElement.classList.add('primary-nav-text');
newElement.classList.add('nav-menu-trigger');
let textNode = document.createTextNode("FHTL");
newElement.append(textNode);
navElement.append(newElement);

Intenté esto solo para ver si puedo ponerme MutationObservera trabajar:

const observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if (mutation.addedNodes.length) {
            console.log(mutation.addedNodes[0]);
        }
    });
});
const navBar = document.getElementById('primaryNav');
observer.observe(navBar, {
    childList: true
});

Pero recibo este error (supongo que es porque ese elemento aún no se ha cargado):

Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.

Bóveda

Answer 1

Como se dice en la documentación al respecto"run_at": "document_start" , el DOM no se carga cuando se ejecuta su script, por lo que no puede encontrar el navelemento.

Reemplácelo con "run_at": "document_end"y el script se ejecutará inmediatamente después de que se cargue el DOM.

Y con respecto a su MutationObservererror, como dice, navBarno es un Nodeporque .getElementByIdno devuelve un nodo.