Extensão do Chrome - como injetar novos elementos na página durante o carregamento? [duplicado]

Dec 23 2020

Estou escrevendo uma extensão do Chrome que injeta um arquivo javascript em uma página para adicionar um botão. Quando vou para o site que desejo modificar, o botão sempre leva uma fração de segundo a mais para carregar depois que a página é carregada. Existe uma maneira de carregar o botão ao mesmo tempo que os outros elementos da página? Eu tentei usar MutationObserver, mas não consigo descobrir.

arquivo 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
}

Script a ser injetado:

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

Eu tentei isso só para ver se consigo MutationObservertrabalhar:

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

Mas recebo este erro (presumo que seja porque esse elemento ainda não foi carregado):

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

Cabeçalho

Respostas

PredatorIWD Dec 23 2020 at 10:11

Como dito na documentação a respeito"run_at": "document_start" , o DOM não é carregado quando seu script é executado, por isso não pode encontrar o navelemento.

Substitua-o por "run_at": "document_end"e o script será executado logo após o carregamento do DOM.

E quanto ao seu MutationObservererro, como afirma, navBarnão é um Nodeporque .getElementByIdnão retorna um nó.