Chrome-Erweiterung - Wie füge ich beim Laden neue Elemente in die Seite ein? [Duplikat]

Question

Ich schreibe eine Chrome-Erweiterung, die eine Javascript-Datei in eine Seite einfügt, um eine Schaltfläche hinzuzufügen. Wenn ich zu der Website gehe, die ich ändern möchte, dauert das Laden der Schaltfläche nach dem Laden der Seite immer einen Bruchteil einer Sekunde länger. Gibt es eine Möglichkeit, die Schaltfläche gleichzeitig mit den anderen Elementen auf der Seite zu laden? Ich habe es versucht MutationObserver, aber ich kann es nicht herausfinden.

manifest.json Datei:

{
    "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
}

Zu injizierendes Skript:

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

Ich habe das nur versucht, um zu sehen, ob ich MutationObserverzur Arbeit kommen kann:

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

Aber ich bekomme diesen Fehler (ich nehme an, es liegt daran, dass dieses Element noch nicht geladen wurde):

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

Überschrift

Answer 1

Wie in der Dokumentation zu erwähnt"run_at": "document_start" , wird das DOM beim Ausführen Ihres Skripts nicht geladen, sodass das navElement nicht gefunden werden kann .

Ersetzen Sie es durch "run_at": "document_end", und das Skript wird direkt nach dem Laden des DOM ausgeführt.

Und in Bezug auf Ihren MutationObserverFehler, wie es heißt, navBarist kein, Nodeweil .getElementByIdkein Knoten zurückgegeben wird.