概要

拡張機能を作ってみたけれど、なんかうまく動かないときに確認する手順を記載します。

動かない原因の大半は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あるいは何かの通知機能で、そこまでは処理できていることを確認していきます。

main.js

console.log("Start");

// 処理

console.log("10行目");

// 処理

console.log("50行目");

// 処理

console.log("Finish");