Extension Chrome - Comment injecter de nouveaux éléments sur la page pendant son chargement? [dupliquer]

Dec 23 2020

J'écris une extension Chrome qui injecte un fichier javascript dans une page pour ajouter un bouton. Lorsque je vais sur le site Web que je souhaite modifier, le bouton prend toujours une fraction de seconde de plus à se charger après le chargement de la page. Existe-t-il un moyen de charger le bouton en même temps que les autres éléments de la page? J'ai essayé de l'utiliser MutationObserver, mais je n'arrive pas à le comprendre.

fichier 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 à injecter:

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

J'ai essayé ceci juste pour voir si je peux me rendre MutationObserverau travail:

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

Mais j'obtiens cette erreur (je suppose que c'est parce que cet élément n'est pas encore chargé):

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

Titre

Réponses

PredatorIWD Dec 23 2020 at 10:11

Comme indiqué dans la documentation concernant"run_at": "document_start" , le DOM n'est pas chargé lorsque votre script s'exécute, il ne peut donc pas trouver l' navélément.

Remplacez-le par "run_at": "document_end", et le script sera exécuté juste après le chargement du DOM.

Et en ce qui concerne votre MutationObservererreur, comme il le dit, navBarn'est pas un Nodecar .getElementByIdne renvoie pas de nœud.