Rozszerzenie do Chrome - Jak wstawić nowe elementy na stronę podczas jej ładowania? [duplikować]

Question

Piszę rozszerzenie Chrome, które wstrzykuje plik javascript na stronę, aby dodać przycisk. Kiedy wchodzę na stronę, którą chcę zmodyfikować, przycisk zawsze ładuje się o ułamek sekundy dłużej po załadowaniu strony. Czy istnieje sposób, żebym mógł załadować przycisk w tym samym czasie, co inne elementy na stronie? Próbowałem użyć MutationObserver, ale nie mogę tego rozgryźć.

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

Skrypt do wstrzyknięcia:

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

Próbowałem tego tylko po to, aby zobaczyć, czy mogę zabrać się MutationObserverdo pracy:

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

Ale pojawia się ten błąd (zakładam, że to dlatego, że ten element jeszcze się nie załadował):

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

Nagłówek

Answer 1

Jak wspomniano w dokumentacji dotyczącej"run_at": "document_start" , DOM nie jest ładowany podczas działania skryptu, więc nie może znaleźć navelementu.

Zastąp go "run_at": "document_end", a skrypt zostanie wykonany zaraz po załadowaniu DOM.

A jeśli chodzi o twój MutationObserverbłąd, jak stwierdza, navBarnie jest, Nodeponieważ .getElementByIdnie zwraca węzła.