ES6 モジュールを Chrome 拡張機能のコンテンツ スクリプトにインポートするにはどうすればよいですか?

Chrome 拡張機能のコンテンツ スクリプトでの ES6 モジュールのインポート

問題:

Chrome で ES6 モジュールをインポートしようとしたとき標準のインポート/エクスポート構文を使用した拡張コンテンツ スクリプトの場合、エラー メッセージは次のとおりです。

コンテキスト:

Chrome 61 では JavaScript モジュールのサポートが導入されましたが、インポート構文は Chrome 拡張機能のコンテンツ スクリプトでは認識されません。

解決策: 非同期動的 import()関数

Chrome 拡張機能コンテンツ スクリプトで ES6 モジュールをインポートするには、非同期動的 import() 関数を使用します:

(async () => {
  const src = chrome.runtime.getURL("your/content_main.js");
  const contentMain = await import(src);
  contentMain.main();
})();

追加の考慮事項:

• 拡張機能のマニフェストでインポートされたスクリプトを Web アクセス可能として宣言します
• このアプローチは非同期関数に依存しているため、Web サイトの Service Worker によってブロックされる可能性があります。

同期「インポート」の回避策

代わりに、通常の非モジュールスクリプトを使用し、その名前を「js」配列に追加します。メインコンテンツスクリプトの前に「content_scripts」を付けます。スクリプトからグローバル変数と関数に直接アクセスできます。

以上がES6 モジュールを Chrome 拡張機能のコンテンツ スクリプトにインポートするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。