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

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 サイトの他の関連記事を参照してください。