概要
これは初心者のブラウザ拡張機能 Advent Calendar 2024の6日目の記事です。
拡張機能を作ってみたけれど、なんかうまく動かないときに確認する手順を記載します。
動かない原因の大半はJavascriptの文法ミス
色々と開発してみて気がつくのは、Javascriptの文法を誤っていて想定どおりの挙動にならないことが多々ある、ということです。
簡単な例を紹介します。
これはbodyの背景色を赤色にするだけの拡張機能です。manifest.jsonを作り読み込むと背景が赤くなります。
main.js
document.body.style.backgroundColor = "red";
Qiitaの編集画面が赤くなっているところ
文法を間違えてみると赤くなりません。
main.js
documet.body.style.backgroundColor = "red";
documentと書くところをdocumetと書いています。
途中で間違えるとあとの処理ができなくなる
やっかいなのは途中で間違えると、間違えたあとの処理だけ失敗する点です。
以下の例ではStartは表示されますが、Finishは表示されません。途中でdocumetと間違えているためです。
main.js
console.log("Start");
documet.body.style.backgroundColor = "red";
console.log("Finish");
単純な例であればよいのですが、複雑な拡張機能になると間違いを見つけるのが難しくなります。
確認すること
開発者ツールを開いてエラーを確認する
F12またはCtrl + Shift + Iで開発者ツールを開きます。
エラーを選択するとコンソールにエラーメッセージが出力されます。
ここに拡張機能関連でエラーが出ていないか見ましょう。
エディタのチェック機能で文法ミスを確認する
文法ミスはエディタの機能で防げる場合が多いです。
下記はVScodeの画面ですが、bodyと書くところをodyにしている箇所に赤線が入っています。
console.logを使って出力を確認する
エラーにはならなくても想定通りの挙動にならない場合もあります。
そういう場合はconsole.logあるいは何かの通知機能で、そこまでは処理できていることを確認していきます。
main.js
console.log("Start");
// 処理
console.log("10行目");
// 処理
console.log("50行目");
// 処理
console.log("Finish");