javascript - 注入(inject)脚本的评估顺序

Question

我正在编写一个 Chrome 扩展程序，它将一些 JS 注入(inject)到页面上。我的 JS 存储在 script.js 中。我使用 contentscript.js 实际进行注入(inject)(如 this SO answer 中所推荐)。这一切都很好。

我的 script.js 使用 jQuery，因此需要 jquery.js 和一堆插件来注入(inject)。所以我的 contentscript.js 看起来像这样:

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);

script.js 中的顺序是它们必须被评估的顺序。

我的问题是，根据它的加载方式，我似乎无法保证 jquery.min.js 在我的 script.js 之前得到评估，从而导致诸如“$ undefined”和“Object does not have ... method”之类的错误(针对插件)。

仅供引用，我知道这不是什么大的阻塞问题，因为当它们全部缓存并以正确的顺序加载时，我的扩展可以完美运行。这就是让我相信问题出在负载上的原因。

如何强制执行我需要的脚本评估顺序？

Answer 1

我希望您不是字面上通过实际编写相同代码五次，嵌套五层来将负载链接在一起。这可以通过队列和单个函数以非常直接的方式解决:

function loadNextPlugin(plugins) {
  // "pop" the next script off the front of the queue
  var nextPlugin = plugins.shift();

  // load it, and recursively invoke loadNextPlugin on the remaining queue
  var tag = document.createElement('script');
  tag.src = chrome.extension.getURL(nextPlugin);
  tag.onload = function() {
    if (plugins.length)
      loadNextPlugin(plugins);
  }
  (document.head||document.documentElement).appendChild(a);
}


loadNextPlugin(["jquery.min.js", "script2.js", "script3.js", "script.js"]);