web-dev-qa-db-ja.com

Chrome Extension内の複数のJSファイル-それらをロードする方法？

私はChrome Extension。私のbackground.jsファイルが非常に大きいので、それを分割して、必要に応じて指定されたメソッドをロードしたいと思います（ある種の遅延ロード））と書きました。

私はこれをFirefoxで行いました：

// ( call for load specified lib )
var libPath = redExt.basePath + 'content/redExt/lib/' + redExt.browser + '/' + libName + '.js';
var service = Components.classes["@mozilla.org/moz/jssubscript-loader;1"].getService(Components.interfaces.mozIJSSubScriptLoader);
service.loadSubScript("chrome://" + libPath);
// ( executing loaded file )

Webkitベースのブラウザーで同様の方法を使用する可能性はありますか？複数のJSファイルを（manifest.jsonを使用して）一致するページに挿入する方法の解決策を見つけましたが、拡張のためだけにJSファイルを含める方法が見つかりません。

javascriptgoogle-chromegoogle-chrome-extensionbrowser-extension
24
Tomasz Banasiak

可能な解決策が見つかりました。 JavaScriptコールバックトレースを使用してメイン拡張ファイルをロードするイベントを検索し、バインドが拡張コンテキストでそれを実行する、RequireJSメインメソッドrequireの簡単な実装があります。 https://github.com/salsita/browser-require/blob/master/require.js

それは動作するようですが、このソリューションにはいくつかの短所があります：

  • このソリューションはコードを直接func.callに挿入するため、バグレポートは「行1、列1」で報告されます-デバッグは非常に困難です
  • 読み込まれたJSファイルがコンソール/ chromebugに表示されない
  • 現在のタブでHTTPSを使用している場合Chromeは、特にローカルコンテキスト（file:///）からの評価スクリプトを許可しないため、期待どおりに機能しない場合があります
1
Tomasz Banasiak

ここで説明されている非常に簡単な方法でこれを行うこともできます。 https://developer.chrome.com/extensions/background_pages#manifest

{
  "name": "My extension",
  ...
  "background": {
    "scripts": [
      "lib/fileone.js",
      "lib/filetwo.js",
      "background.js"
    ]
  },
  ...
}

遅延読み込みを行うことはありませんが、コードを複数のファイルに分割し、それらがバックグラウンドページに読み込まれる順序を指定できます。

32
Omn

バックグラウンドページのコンテキストでJavaScriptファイルをロードし、evalの使用を避けたい場合は、バックグラウンドページのDOMにscriptタグを追加するだけです。たとえば、ファイルが拡張機能のlibフォルダーにある場合、これは機能します。

function loadScript(scriptName, callback) {
    var scriptEl = document.createElement('script');
    scriptEl.src = chrome.extension.getURL('lib/' + scriptName + '.js');
    scriptEl.addEventListener('load', callback, false);
    document.head.appendChild(scriptEl);
}
16
rsanchez

おそらく、Webワーカーを使用しようとする可能性があります。 background.jsに以下を含めます。

var worker = new Worker('new-script.js');

Webワーカーは、新しいワーカーを生成でき、importScript（ "new-script.js"）メソッドを使用することもできます。

ただし、Webワーカーは非常に制限される傾向があります。 Webワーカーに関する優れた記事については、 こちら を確認してください。

しかし、彼らがうまくいくかどうかはわかりません。もう1つのオプションは、XMLHTTPRequest（AJAX）を使用して動的にスクリプトを取得し、それを評価することです。ただし、HTTPS以外の接続では、中間者攻撃によりブロックされている可能性があります。または、これをmanifest.jsonに追加することで、Chromeに非暗号化接続からスクリプトを強制的に評価させることができます（ただし、実行しないでください）。

"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
"permissions": ["http://badpractic.es/insecure.js"]

Chromeメソッドの詳細については、 リモートページをバックグラウンドページで読み込む：AJAX拡張機能 をご覧ください。

したがって、オプションは限られているようです。

もちろんこれは一度にそれらをすべてロードします：

{
  "name": "My extension",
  ...
  "background": {
    "scripts": ["background.js","background2.js","background3.js"] //and so on
  },
  ...
}
3
mdenton8

私がやったことは遅延読み込みではありませんが、chrome拡張機能アイコンをクリックすると、他のファイルより先にいくつかのファイルが読み込まれます。私の場合、自分のutilファイルが他のファイルより先にそれを利用したかったのです。 ：

chrome.browserAction.onClicked.addListener(function() {
  chrome.tabs.executeScript(null, {file: "src/utils/utilFunction1.js"});
  chrome.tabs.executeScript(null, {file: "src/utils/utilFunction2.js"});
  chrome.tabs.executeScript(null, {file: "src/main.js"});
  chrome.tabs.executeScript(null, {file: "src/otherFeature.js"});
});
0
Ryan Walker