How to wait for scripts to be loaded

Question

I am building a Chrome extension and in my contentScript, I have a function which loops all the <link> elements and check whether it has rel="preconnect" attribute. If true, the icon of the extension will change.

The contentScript runs at document start and the function. The function runs onDomLoaded. When the prerender is directly in HTML code, the extension works perfectly. However when prerender is generated by JS, the icon wont change. Probably because the script is not fully loaded when onDomLoaded happens.

However when I use window.onload instead, it is really slow and the icon changes with a delay because it wait for the scripts to be fully loaded. How to deal with that situation and wait only if needed?

Manifest

content_scripts":
    [{
     "matches": ["https://*/*"],
     "run_at": "document_start",
     "js": ["js/contentScript.js"]
   }]

ContentScript

document.addEventListener("DOMContentLoaded", function(event) {
       //here I loop the page and if preconnect found, change the icon

    )};

Possible duplicate of [Call javascript function after script is loaded](https://stackoverflow.com/questions/14644558/call-javascript-function-after-script-is-loaded) — marekful, Feb 21 '19 at 16:52
Strange question. You want to wait for scripts only if needed, but how would you know if it's really needed _**before**_ they loaded? — hindmost, Feb 21 '19 at 16:54
Could you use both DOMContentLoaded and window.onload? In case DOMContentLoaded found scripts it can set a flag to window.onload not search again? — Moti Korets, Feb 21 '19 at 16:59

score 1 · Accepted Answer · answered Feb 21 '19 at 17:06

The proper tool for this task is MutationObserver that monitors DOM modifications.

Since MutationObserver at document_start can slow down the page (even if just by a little), we'll only observe the <head> element, which is super-fast due to the small amount of elements there.

// there's no HEAD yet at document-start, let's wait until we have it
new MutationObserver((mutations, observer) => {
  if (document.head) {
    observer.disconnect();
    monitorLinks();
  }
}).observe(document.documentElement, {childList: true});

function monitorLinks() {
  const onMutation = mutations => {
    for (const {addedNodes} of mutations) {
      for (const n of addedNodes) {
        if (n.nodeName === 'LINK' && n.rel === 'preconnect') {
          processLink(n);
        }
      }
    }
  };
  // the HEAD may have some children already
  onMutation([{
    addedNodes: document.getElementsByTagName('link'),
  }]);
  // watch for the newly added children of HEAD
  new MutationObserver(onMutation).observe(document.head, {childList: true});
}

function processLink(link) {
  console.log(link);
}

How to wait for scripts to be loaded

1 Answers1

Linked