1

ページに JS を挿入する Chrome 拡張機能を作成しています。私のJSはに保存されていscript.jsます。私はcontentscript.js実際に注入を行うために a を使用します（この 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」や「Object does not have ... method」（プラグインの場合）などのエラーにつながることです。

参考までに、すべてがキャッシュされ、正しい順序で読み込まれると、拡張機能が完全に機能するため、大きなブロッキングの問題ではないことはわかっています。それが、問題は負荷であると私に信じさせるものです。

スクリプトの評価方法に必要な順序を適用するにはどうすればよいですか?

4

3 に答える 3

2

同じコードを実際に5回書き、5レベルの深さでネストすることによって、文字通り負荷を連鎖させていないことを願っています。これは、キューと単一の関数を使用して、非常に簡単な方法で解決できます。

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"]);
于 2013-01-29T04:03:51.380 に答える
1

onload前のプラグインのハンドラーで次のプラグインをロードすることにより、各プラグインのロードを連鎖させます。

于 2013-01-28T22:54:26.680 に答える