🦴

拡張機能開発で出てきたエラー

2023/10/18に公開

Chrome拡張

tech

書き足していく

ポップアップを開くと`Waiting for Service Worker` と出てる

npm run devで開発サーバーを起動していることを確認する。
一度再起動してエラーが出ているかログを確認する
「ビューを検証 Service Worker」の後ろに(無効)とついてたらサービスワーカーが止まっている。再度読み込みして（無効）が消えるのを確認する
前に作った拡張機能と間違えてないか確認する。ピン留めしたまま放置していると間違えてクリックしてしまう。自分が動かしたい拡張機能と間違えてないか確認する。

バックグラウンドが動いてない

crxjsを使ってもmanifest.jsonを書き換えた直後だったり、拡張機能を再度読み込みした後はサービスワーカーが止まってしまう。拡張機能一覧で「Service Worker (無効)」となってたらサービスワーカーが止まってしまっている。再度読み込みや何度か操作してたら動き出す。

コンテンツスクリプトが動いてないとき

example.com で起動するか確かめる。

example.com というシンプルなサイトがあるので、背景を赤にして動作するか確かめてみるといい

document.body.style.backgroundColor = "red";

manifest.jsonの設定は正しいか？

例えば新しく拡張機能を作り始めたとき、流れ作業でテンプレートを作るからうっかりmanifest.jsonの設定を書き忘れる時がある。
設定したURL以外のサイトでアクセスしていないか？開発し初めの頃はデバッグもしたいから<ALL_URL>に設定して動かしてみろ

メッセージパッシング

"Unchecked runtime.lastError: The message port closed before a response was received."

メッセージパッシングでreturn trueを書いてないのではないか

受信側では動いているのに送信側では動かない

バックグラウンド

ほとんどコードを書いていないのにバックグラウンドが起動しない

Uncaught SyntaxError: Cannot use import statement outside a module
Service worker registration failed. Status code: 15

background.jsで importを使おうとしたときに出てきたエラー。バックグランドでimportを使うためには、モジュールバンドラー（WebpackやViteなど）を使う必要がある。動作検証のために簡単な拡張機能を作っていて、後からパッケージをインストールしてimportしたときに出た。

Failed to load module script:

JavaScript + React の組み合わせで拡張機能を作ろうとしたら出てきたエラー。TypeScript + React の組み合わせで新しく vite プロジェクトを作ったらエラーがなくなった。

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec.

アイコンが表示されない

16,48,128 px のアイコンだけ作ったが32pxだけ用意しなかったときに起こったエラー。32pxのアイコンを設定したら表示されるようになった。
CRXJS利用時、publicフォルダにicon128.png画像を入れていたのでmanifest.jsonにもpublic/icon128.pngと書いてしまった。しかしdistディレクトリを見るとルートディレクトリに展開されているのでicon128.pngと書くと動く。crxjsを使っているとルートディレクトリを示す/icon128.pngのように書くとエラーが出る。

content_scriptが読み込まれない

manifest.jsonで正しいマッチパターン、jsのパスを書いてあるか。マッチパターンを"matches": ["<all_urls>"]と書き換えて動くか確かめてみよう
jsを読み込んでいるパスが正しくかけているか確認する
console.logをコンテンツスプリプトに書いてどこまで正常に動いているか確認する。console.logでログが書き込まれていなければそもそもコンテンツスクリプトが読みまれてないか、挿入されていない。

ポップアップを開くとWaiting for Service Worker と出てる