Chrome拡張のContentScriptsをES Modulesとして実行する
まとめ
そこで起点になるスクリプトから、Dynamic Import することでその制限を回避する。
解説
以下のようなスクリプトを content_scripts のエントリーポイントとして用意する。
例では、import 時点で実行するようになっているが、default export されている関数がある場合は 戻りを確認して関数を実行する形にすると良い。
(ちなみに実行したいスクリプトを指定している chrome.runtime.getURLは content_scripts から実行できるAPIで通常のタブでは chrome.runtime は参照できない。)
code:loader.js
;(async () => {
await import(chrome.runtime.getURL('dist/main.js'))
})()
manifest.json には以下のように content_scripts と web_accessible_resources の指定を入れる。
実行するオリジンの指定が必要になる。例えば全域で動作させる場合は https://*/* などと指定する。
code:manifest.json
{
"manifest_version": 3,
// (中略)
"content_scripts": [
{
}
],
"web_accessible_resources": [
{
}
]
}