Extension Chrome - Comment injecter de nouveaux éléments sur la page pendant son chargement? [dupliquer]
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 MutationObserver
au 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
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 MutationObserver
erreur, comme il le dit, navBar
n'est pas un Nodecar .getElementById
ne renvoie pas de nœud.