初心者向けFirefox拡張の作成(Add-on SDKを使用)
Firefox拡張(extension)の作り方は大きく分けて3通り。詳しくは以下のサイトを参照。
今回は、一番初心者向けとされるAdd-on SDKを使用する方法について記述する。ドキュメントはこちらのサイトの左上にある「Documentation」のリンクから適当にたどる。
開発環境の整備
まずは開発環境を整備する。
SDKのインストール
ここからAdd-on SDKをダウンロードしてインストールする。Add-on Builderというのは無視する。
Firefoxで開発用プロファイルの作成
Firefoxには「プロファイル」というものがある。通常の環境とは別に、Extension開発用のプロファイルを作成しておくと良い。プロファイルに関しては、詳しくはこちらを参照。
Macの場合、以下の様にプロファイルを作成する。devというのがプロファイル名。環境によって若干異なるので、詳しくはこちらを。
/Applications/Firefox.app/Contents/MacOS/firefox-bin -no-remote -P dev &
Macの場合、作成したプロファイルは以下の場所に保存されているので、lsでプロファイルのフォルダ名を確認しておく。
~/Library/Application Support/Firefox/Profiles/
Firefoxの環境設定
作成したプロファイルでFirefoxを起動するには、Macの場合以下のように実行する。
/Applications/Firefox.app/Contents/MacOS/firefox-bin -no-remote -p &
そのうえで、以下を実行して開発環境を整えておくとよい。
- Firebugやその他開発ツールのインストール
- (必ずしもこのタイミングでやる必要はないが)関連サイトへのログイン。例えばEvernote関連のExtensionを開発するのであれば、Evernoteへ事前にログインしておく。
Firefox拡張の基本的な仕組み
Chromeのブラウザ拡張と仕組みは少し似ている。
ブラウザ拡張の構成要素としては、主に以下の2つに分かれる。
- add-on code
- content scripts
“content scripts”は、名前はChrome Extensionのものと同じだが、考え方が少し違うと思う。
add-on codeと各content scriptとは、メッセージ通信でデータのやりとりを行う。このページの図が簡潔で分かりやすいと思う。
基本的な作り方
こちらのページ通りに、以下のようにプロジェクトを作成。
mkdir my-addon cd my-addon cfx init
これで必要なファイルとかディレクトリが色々作成される。その後、
cfx run
を一度実行すると、ExtensionのIDが生成され、pacakge.json の中に書き込まれる。その後もう一度cfx runを実行するとExtensionが入ったFirefoxが起動される。
デバッグの仕方
ちなみに、単純に`cfx run`を実行するのではなく、以下のようにプロファイルを指定して実行すると、上の方で設定したような(開発ツールとかがインストールされた)状態でFirefoxが起動するので、色々と便利。
cfx run --profiledir=~/Library/Application\ Support/Firefox/Profiles/xxxxxx.dev/
後は、console.log とか出してもいいし、Firebugとか活用して適当に。
具体的な開発のtipsとか
ツールバーボタン
SDKのチュートリアルとかやると、ブラウザの右下(ステータスバー)の辺りにボタンを出す方法はあるが、Firebugなどのようにアドレスバーの右の方にボタンを出力する方法は何も触れられていない。
色々調べたけど、一番簡単そうなのはErik Voldという人が作った”toolbarbutton”というのを使う方法らしいんだけど、以下のURLは404となっていてどこで入手していいのか良く分からなかった。
https://github.com/voldsoftware/toolbarbutton-jplib
結局、以下のSOのスレッドに回答している人がforkしたToolbar Button Completeというのがあったので、それを利用することにした。
Ajax
結論から先に書くと、content scriptからは(実質)Ajaxは使えない。外部と通信する必要が有る場合は、add-on本体(main.js)にメッセージを投げて、main.jsがAjaxを行い、結果が帰ってきたらcontent scriptに対して再度メッセージを投げるという方法が良い。
おわりに
Add-on SDKを使うと比較的簡単にFirefoxのExtensionが使える。ただ、それでもChromeに比べると色々制約がある。
