拡張機能開発で出てきたエラー
書き足していく
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
でログが書き込まれていなければそもそもコンテンツスクリプトが読みまれてないか、挿入されていない。
Discussion