Exécution de javascript dans l'extension Google Chrome après le chargement d'une page

Le site Web que je vise est à peu près une application Javascript. J'ai donc besoin d'ajouter du HTML après que tout soit terminé. J'ai essayé d'utiliser MutationObserver, mais il essaie toujours d'exécuter javascript trop tôt et je reçois le code d'erreur suivant `Uncaught TypeError: Impossible de lire la propriété 'appendChild' undefinedExécution de javascript dans l'extension Google Chrome après le chargement d'une page

Mon code

manifest.json

{ 
    "manifest_version": 2, 

    "name": "Test", 
    "version": "1.0", 
    "description": "Test Description", 

    "content_scripts": [{ 
    "js": ["content.js"], 
    "run_at" : "document_idle", 
    "matches": ["https://pastvu.com/p/*"] 
    }] 

}

content.js

new MutationObserver(function(mutations, observer) { 
    addHtml(); 
    observer.disconnect(); 
}).observe(document.querySelector('body'), {childList: true}); 


function addHtml(){ 

    var newDiv = document.createElement("div"); 
    newDiv.setAttribute("class","tltp-wrap"); 

    var newLink = document.createElement('a'); 
    newLink.setAttribute('href','http://www.google.com'); 

    var linkButton = document.createElement('span'); 
    linkButton.setAttribute('class','glyphicon glyphicon-map-marker'); 

    newLink.appendChild(linkButton); 
    newDiv.appendChild(newLink); 

    document.getElementsByClassName("toolsBtm")[0].appendChild(newDiv); 
}

Here is the page Je suis en train de cibler. Comme vous pouvez le voir les <body> ressemble à ceci

<body> 
    <script type="text/javascript" src="/js/module/appMain.js?__=wfDkO"></script> 
</body>

Mon but est d'attendre jusqu'à ce que les charges html du corps ou au moins Unitil .toolsBtm div est présent.

J'ai changé content.js à cela et toujours pas de chance

new MutationObserver(function(mutations, observer) { 
    var bodyLoaded = document.getElementsByClassName('toolsBtm'); 
    if (bodyLoaded.length > 0) { 
     alert('a'); 
     addHtml(); 
    } 
}).observe(document.querySelector('body'), {childList: true}); 


function addHtml(){ 

    var newDiv = document.createElement("div"); 
    newDiv.setAttribute("class","tltp-wrap"); 

    var newLink = document.createElement('a'); 
    newLink.setAttribute('href','http://www.google.com'); 

    var linkButton = document.createElement('span'); 
    linkButton.setAttribute('class','glyphicon glyphicon-map-marker'); 

    newLink.appendChild(linkButton); 
    newDiv.appendChild(newLink); 

    document.getElementsByClassName("toolsBtm")[0].appendChild(newDiv); 
}

Source

2017-10-16 John Baker

Avez-vous essayé d'utiliser '" run_at ":" document_end "'? –

@FiriceNguyen 'document_end' est au plus tard' document_idle'. – Xan

@FiriceNguyen oui, je l'ai fait –

Dans notre plug-in, nous avons quelque chose comme

export function invokeAfterDomIsReady(context = document, selector, time = 400, func) { 
    const domEl = context.querySelector(selector); 
    if (domEl != null) { 
     func(domEl); 
    } else { 
     setTimeout(function() { 
      invokeAfterDomIsReady(context, selector, time, func); 
     }, time); 
    } 
}

Il est quelque chose qui habituellement utilisé au cours des essais ui avec Sélénium.

Source

2017-10-19 15:49:53 davojta

Exécution de javascript dans l'extension Google Chrome après le chargement d'une page

Répondre

Questions connexes