CODEWITHSUNDEEP
javascripthtmlfirefox-addon-webextensions
Mojimi
Mojimi

Reputation: 3161

Listen to scripts added to document

Is there a DOM event that fires everytime a script is added/loaded?

I'm building a extension that must wait until a certain global window object is available and I need to wait for it to exists.

Upvotes: 1

Views: 1010

Answers (2)

cjriii
cjriii

Reputation: 344

Here's an example of detecting when a script tag has been 1: added to your page, and 2: loaded. (My loop on the NodeList may need some work.)

Detect Script tag

//Wait for the initial DOM...
document.addEventListener('DOMContentLoaded', function() {
    console.log("First page load...");

    //Create the observer
    let myObserver = new MutationObserver(function(mutationList, observer) {
        mutationList.forEach((mutation) => {
            switch(mutation.type) {
                case 'childList' :
                    if(mutation.addedNodes && mutation.addedNodes.length) {
                        let nodes = mutation.addedNodes;
                        for(var i=0; i < nodes.length; i++) {
                            if(nodes[i].nodeName.toLowerCase() === 'script') {
                                console.log("Script tag added");
                            }
                        }
                    }
                    break;
            }
        });
    });

    //Observe the body and head as that's where scripts might be placed
    let body = document.querySelector("body");
    let head = document.querySelector("head");

    //options to look for per-element
    //childList and subtree must be set to true
    let options = {
        childList:true,
        subtree:true
    };
    myObserver.observe(body, options);
    myObserver.observe(head, options);
});

Example

setTimeout(function() {
    let script = document.createElement("script");
    script.setAttribute("integrity", "sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=");
    script.setAttribute("crossorigin", "anonymous");
    script.setAttribute("src", "http://code.jquery.com/jquery-3.3.1.min.js");
    script.onload = function() {
        console.log("Script loaded!");
    };
    document.querySelector("head").appendChild(script);
}, 1000);

Upvotes: 2

Daniel Pointon
Daniel Pointon

Reputation: 21

var targetNode = document;
var observerOptions = {
  childList: true,
  attributes: true,
  subtree: true //Omit or set to false to observe only changes to the parent node.
}

function callback(mutationList, observer) {
  mutationList.forEach((mutation) => {
    if(mutation.type=='childList'){
      var addedNodes=mutation.addedNodes
      for(x=0;x<addedNodes.length;x++){
        if(addedNodes[x].tagName == 'script'){
          //Do what you will
        }
      }
    }
  });
}

var observer = new MutationObserver(callback);
observer.observe(targetNode, observerOptions);

Something like this? (untested) Modified from: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/MutationObserver

Upvotes: 2

Related Questions