
Chrome 拡張コンテンツ スクリプトで ES6 モジュールをインポートする
問題: Chrome 63 で、コンテンツ内のインポート/エクスポート構文を使用して ES6 モジュールをインポートするスクリプトの結果の構文エラー。
解決策:
Chrome 拡張機能は、非同期動的 import() 関数を通じて ES6 モジュールをサポートします:
(async () => {
const src = chrome.runtime.getURL("your/content_main.js");
const contentMain = await import(src);
contentMain.main();
})();
ログイン後にコピー
ただし、この方法には制限事項:
- Web サイトのサービスによってブロックされる可能性があります
- マニフェストの Web アクセシブル リソースでインポートされたスクリプトを宣言する必要があります。
非モジュール スクリプトの場合は、次の点を考慮してください。
- 通常の非モジュールの使用-module script.
- 「content_scripts」の「js」に名前を追加メイン コンテンツ スクリプトの前に。
- グローバル変数/関数を直接使用します。
追加情報:
- [方法Chrome で ES6 の「インポート」を使用する拡張機能](https://stackoverflow.com/a/50132415)
- [Chrome での ES6 インポートの作業例]拡張機能](https://github.com/browsers-toolbox/es-import-in-extension)
- [chrome.runtime.getURL](https://developer.chrome.com/extensions/runtime #method-getURL)
以上がES6 モジュールを Chrome 拡張機能のコンテンツ スクリプトに正常にインポートするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。