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

Chrome 拡張機能のコンテンツ スクリプトに ES6 モジュールをロードする

背景:
Chrome 61 では、次のサポートが導入されました。 JavaScript モジュール。ただし、Chrome 拡張機能のコンテンツ スクリプトでモジュールをロードすることは、コンテンツ スクリプト環境の制限により困難な場合があります。

問題:
インポート/エクスポート構文を使用しようとしています。コンテンツスクリプト内ですが、構文が見つかりませんエラー。

解決策:
コンテンツ スクリプトでモジュールをロードするには 2 つの方法があります:

ES モジュールの非同期動的 import() 関数:

• 拡張機能でロードされるスクリプトを宣言します。
• 実行時にモジュールを動的にインポートするには、コンテンツ スクリプト内で import() 関数を使用します。

例:

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

通常の非モジュールの同期「インポート」回避策scripts:

• モジュールを通常の非モジュール スクリプトとして記述します。
• マニフェストの "content_scripts" セクションの "js" 配列にその名前を追加します。メイン コンテンツ スクリプトの前。
• コンテンツ内でモジュールの変数と関数に直接アクセスします。 script.

注:
非同期動的インポートのアプローチはより安全で柔軟ですが、Web サイトの Service Worker によってブロックされる可能性があります。同期「インポート」の回避策は堅牢性は劣りますが、より信頼性が高い可能性があります。

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