Webpackとプログラムで注入されたコンテンツスクリプト

Question

ReactとWebpackを使用してChrome拡張機能を開発しています。

このプロジェクトでは、異なるモジュールがプログラムでコンテンツスクリプトを挿入します（chrome.tabs.executeScript(null, {file: 'content-script-file.js'})）。

私はすべてを束ねるためにWebpackを使用しているので、これは問題になります。基本的に、バックグラウンドスクリプトはいくつかのモジュールをロードしています。これらのモジュールはすべて、特定の状況下でプログラムでコンテンツスクリプトを注入するように構成されています。

しかし、これらのコンテンツスクリプトがバンドルされたアプリケーションでどのように「検出」されるかはわかりません。彼らは明示的にインポートされておらず、ちょうどexecuteScriptの呼び出しで参照されています。

同時に、コンテンツスクリプトはReactを使用するため、Webpackのbabel-loaderを通過する必要があります。

アイデア？

Answer 1

あなたのコンテンツのスクリプトは、効果的にWebPACKの-用語で "エントリーポイント" です。

各トップレベルコンテンツスクリプトは、Webpackエントリとして定義する必要があります。 webpackを使用してこれらのコンテンツスクリプトを構築します。各エントリは、すべての依存関係（Reactなど）を1つの大きなブロブにします。

次に、拡張機能をビルドする2番目のwebpackビルドを作成します。この拡張は、生ローダとimportあなたのWebPACKコンパイルコンテンツのスクリプトを使用しますし、それは文字列のローカル変数としてそれらすべてを持っています：

import scriptA from 'content/build/a'; 
import scriptB from 'content/build/b'; 

を、必要に応じて今、あなたはあなたのタブにスクリプトを注入することができます

chrome.tabs.executeScript(null, scriptA); 

Answer 2

これはうまくいくはずです。クロムのドキュメントでは、文字列コードまたは文字列ファイル以外のスクリプトを実行しています。

import ContentScript from './content-script-file'; 
 

 
chrome.tabs.executeScript(null, ContentScript);