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

書き足していく

「ビューを検証 Service Worker」が表示されない

• 他の拡張機能に表示されているか確認する。開発中の拡張機能にだけ表示されていなければバックグラウンドスクリプトが正しく読み込めていない可能性があるので、manifest.jsonを確かめる
• 全ての拡張機能に表示されていないなら、デベロッパーモードがオフになっている可能性がある。

ポップアップを開くと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を書いてないのではないか

https://zwzw.hatenablog.com/entry/2019/12/04/200000

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

バックグラウンド

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

• 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でログが書き込まれていなければそもそもコンテンツスクリプトが読みまれてないか、挿入されていない。