Question

我正在编写一个Chrome扩展程序，它将一些JS注入页面。我的JS存储在script.js中。我使用contentscript.js来实际进行注入（如this SO answer中所推荐的那样）。一切正常。

我的script.js使用jQuery，因此需要注入jquery.js和一堆插件。所以我的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”和“对象没有”之类的错误...方法“（对于插件）。

仅供参考，我知道这不是一个巨大的阻塞问题，因为当它们都被缓存并以正确的顺序加载时，我的扩展程序完美无缺。这就是让我相信这是问题的负载的原因。

如何执行我需要的关于如何评估脚本的订单？

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

Answer 2

通过在前一个插件的onload处理程序中加载下一个插件来链接每个插件的加载。

Answer 3

在您注入的脚本上设置async=false。

这是符合规范的方式，可以按任何顺序加载脚本，但按照添加的顺序执行。

来自Deep dive into the murky waters of script loading：

[
  '1.js',
  '2.js'
].forEach(function(src) {
  var script = document.createElement('script');
  script.src = src;
  script.async = false;
  document.head.appendChild(script);
});
规范：一起下载，全部下载后立即执行。

Firefox＆lt; 3.6，Opera说：我不知道这个“异步”的东西是什么，但事实上我执行的脚本是通过JS添加的顺序   他们被添加了。

Safari 5.0说：我理解“异步”，但不明白用JS将其设置为“false”。我会尽快执行你的脚本   他们以任何顺序降落。

IE＆lt; 10说：不知道“异步”，但是there is a workaround   使用“onreadystatechange”。

其他browsers in red说：我不明白这个“异步”的事情，我会尽快执行你的脚本   当他们以任何顺序着陆时。

其他一切都说：我是你的朋友，我们将在本书中做到这一点。

注入脚本的评估顺序

3 个答案: