Question

I’m writing a Chrome extension which injects some JS onto a page. My JS is stored in script.js. I use a contentscript.js to actually do the injecting (as is recommended in this SO answer). This all works fine.

My script.js uses jQuery, and therefore needs jquery.js and a bunch of plugins to be injected too. So my contentscript.js looks like this:

var a = document.createElement('script');
a.src = chrome.extension.getURL("jquery.min.js");
a.onload = function() {
    this.parentNode.removeChild(this);
};
(document.head||document.documentElement).appendChild(a);

...4 more similiar plugin script injections...

var s = document.createElement('script');
s.src = chrome.extension.getURL("script.js");
s.onload = function() {
    this.parentNode.removeChild(this);
};
(document.head||document.documentElement).appendChild(s);

The sequential order in script.js is the order they must be evaluated in.

My problem is that depending on how it happens to load, I seemingly have no guarantee that jquery.min.js gets evaluated before my script.js, leading to errors like “$ undefined” and “Object does not have … method” (for the plugins).

FYI, I know it’s not some huge blocking issue because when they are all cached and load in the correct order, my extension works perfectly. That’s what leads me to believe it’s the loading that is the problem.

How do I go about enforcing the order I need on how my scripts are evaluated?

Answer 1

Chain the loading of each plugin, by loading the next plugin in the onload handler of the previous one.