初心者向けFirefox拡張の作成(Add-on SDKを使用)


Firefox拡張(extension)の作り方は大きく分けて3通り。詳しくは以下のサイトを参照。

Firefox 拡張の作り方 (2013 年版)

今回は、一番初心者向けとされる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に比べると色々制約がある。

コメントを残す

メールアドレスが公開されることはありません。