Chrome拡張機能の複数のJSファイル - 読み込む方法

Question

Chrome拡張機能を作成しました。私の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のベースのブラウザで同じようにそれを行うにはどのpossiblityはありますか？私は一致するページに（manifest.jsonを使用して）複数のJSファイルを挿入する方法の解決策を見出しましたが、拡張のためだけにJSファイルを含める方法を見つけることができません。

Answer 1

。主な拡張ファイルをロードするためのイベントを見つけるためにJavaScriptのコールバックトレースを使用し、それを拡張コンテキストで実行するRequireJS main method requireの簡単な実装です。 https://github.com/salsita/browser-require/blob/master/require.js

動作するようだが、この解決策はいくつかの短所があります。このソリューションはfunc.callに直接コードを挿入しているため

• バグレポートは、「行1、列1」で報告されている - デバッグは非常に困難です
• ロードJSファイルは
を予想通り、それは時々ちょうど仕事をいけないので、現在のタブは、特にこのローカルコンテキスト（ file:///）から、スクリプトをevaling禁止しますHTTPS Chromeを使用しています
• 場合は、コンソール/ chromebugに表示されません。

Answer 2

Webワーカーを使用する可能性があります。あなたのbackground.jsでは、次のとおりです。

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

をウェブ労働者は、新たな労働者を生み出す、とさえimportScript（「新-script.js」）メソッドを持つことができます。

しかし、Webワーカーは非常に制限される傾向があります。 hereに、Webワーカーに関する素晴らしい記事をチェックしてください。

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

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

を参照してくださいLoad remote webpage in background page: Chrome Extension AJAX方式のより詳細な議論のために。

あなたのオプションは限られているようです。当然の

これは、一度にすべてをロードします。

可能な解決策を見つけ

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

Answer 3

バックグラウンドページのコンテキストでJavaScriptファイルを読み込み、evalの使用を避けたい場合は、背景ページのDOMにscriptタグを追加することができます。 https://developer.chrome.com/extensions/background_pages#manifest

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

あなたが勝った：また、このここに記述されている非常に簡単な方法行うことができます

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

Answer 4

：あなたのファイルが拡張子のlibフォルダ内に存在している場合例えば、これは動作します遅延読み込みを実行する必要はありませんが、コードを複数のファイルに分割し、それらがバックグラウンドページにロードされる順序を指定することができます。