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

Chrome 拡張コンテンツ スクリプトで ES6 モジュールをインポートする

問題:

Chrome 63 で、import/ を使用して ES6 モジュールをインポートするコンテンツ スクリプトのエクスポート構文の結果は次のとおりですSyntaxErrors.

原因:

HTML スクリプトとは異なり、コンテンツ スクリプトはモジュールの読み込みをネイティブにサポートしません。

解決策: 非同期動的インポート( ) function

この問題を解決するには、次の回避策:

1. manifest.json で、モジュール スクリプトを Web アクセス可能なリソースとして宣言します。
2. content_script.js では、 import() 関数を使用してモジュールを非同期的にロードします。
3. インポートを待ち、のメイン関数を実行しますmodule.

例:

manifest.json:

{
  "web_accessible_resources": [
    {
      "matches": ["<all_urls>"],
      "resources": ["my-module.js"]
    }
  ],
  ...
}

content_script.js:

(async () => {
  const src = chrome.runtime.getURL("my-module.js");
  const module = await import(src);
  module.main();
})();

同期インポートの回避策

または、非モジュール スクリプトの同期インポートの回避策を使用できます。

1. マニフェストの "js" 配列にスクリプトを追加します。 json.
2. スクリプトのグローバル変数と関数を直接参照します。メインコンテンツのスクリプト。

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