はじめに
WEBサイト閲覧の効率化のためにFirefoxアドオンを自作しました。そのときに、躓いたことをいくつかまとめてみました。同じようなことで困っている人がいたときの参考になればと思います。
※初めての拡張機能を読んでいる前提で話を進めます。
※憶測で書いている部分があるので、間違いがあればご指摘ください。
注意すべきことたち
console.logではTypeErrorなどの例外がみえない
普段どおりconsole.logを使ってデバッグをしながら開発をされるかと思いますが、通常のJavaScriptの仕様であれば、次のような挙動を示すはずです。
var a = [];
console.log(a[0]); // undefined
console.log(a[0][0]); // TypeError: a[0] is undefined
しかし、アドオンのコンテンツスクリプトで動かしているとなぜかTypeErrorが隠蔽されてしまうため、バグの発見が困難になります。
実際、もう少し技術的な問題なのかと思っていましたが、上記のような挙動を知らずのうちにやってしまいデバッグに時間がかかってしまいました。
解決手段
@chromia さんよりコメントにて解決方法を教えていただきました。
コンテンツスクリプト（manifest.jsonでcontent_scriptsで指定しているスクリプトのこと）上でのType Error等の例外は、Ctrl+Shift+Jを押下で出現するブラウザーコンソールを使うと見えるようになります。
アドオン開発でデバッグするときはCtrl+Shift+I押下で出現する開発者ツールのコンソールではなく、Ctrl+Shift+Jを押下で出現するブラウザーコンソールを使用するべきです。
browser.menus is undefined が出てしまう
{
"content_scripts": {
"matches": ["*"],
"js": ["target.js"]
}
}
のようにcontent_scriptsで指定しているスクリプトからは呼べません。
{
"background": {
"scripts": ["target.js"]
}
}
このようにbackgroundで指定して呼びます。ちなみに、content_scriptsとbackgroundで両方指定してる場合も動かなくなるので注意してください。
XMLHttpRequestが使えない（なぜかステータスコードxhr.statusで0が返ってくる）
対象のサイトが持つAPIを通して情報を取得したい場合、セキュリティの問題上閲覧中のウェブページとAPIのドメインが違うとき（クロスドメインと呼ばれる）にブラウザで実行しないように設定されています。
これを解除するためにはmanifest.jsonのpermissionをいじる必要があります。
拡張機能用のAPIが使えない
上記と同じ通り、permissionをいじる必要があります。
編集後記
Qiitaで調べてみると同じような記事が多かったのですが、例外が見えない件はパット見では見当たらなかったので一応投稿しておきます。