☰

Chrome拡張機能のコンテンツスクリプトにES6モジュールをインポートする方法 質問する

tag-icon • tag-icon javascript google-chrome google-chrome-extension ecmascript-6
Chrome拡張機能のコンテンツスクリプトにES6モジュールをインポートする方法 質問する

でクローム61、JavaScript のモジュールのサポートが追加されました。現在、Chrome 63 を実行しています。

モジュールを使用するために、Chrome 拡張機能コンテンツ スクリプトでimport/構文を使用しようとしています。export

でmanifest.json:

"content_scripts": [
    {
        "js": [
            "content.js"
        ],
    }
]

でmy-script.js（同じディレクトリcontent.js):

'use strict';

const injectFunction = () => window.alert('hello world');

export default injectFunction;

でcontent.js:

'use strict';

import injectFunction from './my-script.js';
injectFunction();

次のエラーが表示されます:Uncaught SyntaxError: Unexpected identifier

インポート構文を次のように変更すると、import {injectFunction} from './my-script.js';次のエラーが発生します。Uncaught SyntaxError: Unexpected token {

この構文を使用すると何か問題がありますか？content.jsChrome 拡張機能では (HTML では構文を使用する必要があるため<script type="module" src="script.js">)、何か間違っているのでしょうか? Google が拡張機能のサポートを無視するのは奇妙に思えます。

ベストアンサー1

非同期動的import()ESモジュールの機能

要素を使用した安全でない回避策とは異なり<script>、これは同じ安全な JS 環境 ( ではなくデフォルトのワールドを使用していると仮定) で実行され、インポートされたモジュールは、などの組み込み APIMAINを含む初期コンテンツ スクリプトのグローバル変数と関数に引き続きアクセスできます。chromechrome.runtime.sendMessage

ではcontent_script.js、次のようになります

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

また、インポートしたスクリプトをマニフェストで宣言する必要があります。ウェブアクセス可能なリソース:

// マニフェストV3

  "web_accessible_resources": [{
     "matches": ["<all_urls>"],
     "resources": ["your/content_main.js"]
   }],

// マニフェストV2

  "web_accessible_resources": [
     "your/content_main.js"
  ]

詳細については：

通常の非モジュール スクリプトの同期「インポート」回避策

通常の非モジュールスクリプトを使用し、"js"メインコンテンツスクリプトの前の「content_scripts」にその名前を追加し、グローバル変数/関数を直接使用します（例）。

おすすめ記事