Add-onSDK を使った開発のはじめかた

まずは Add-onSDK をインストールします。 下記ページが参考になります。

• インストール - Add-on SDK Documentation

コマンドラインを使い慣れているなら、特に難しいところもないはずです。Python 2 系が必要になるので、場合によってはそれがちょっと面倒かもしれません。

Add-onSDK のインストールが完了したら、cfx コマンドが使えるようになります。 cfx コマンドを使うことで、Firefox 拡張の雛形を生成したり、開発中のFirefox 拡張を試してみたりテストを実行したりできます。

• cfx 入門 - Add-on SDK Documentation

あとはチュートリアルなどを見れば、どのようなことができるのかわかると思います。

• チュートリアル - Add-on SDK Documentation

デバッグ用出力

チューリアルの 「開発テクニック」 の中にリンクがあるので改めて説明する必要はないかもしれませんが、特に最初は動作を調べる上で重要だと思いますのでここにも書いておきます。

Add-onSDK を使って開発する場合は、拡張機能のコードの中でconsole.log 関数などを使ってデバッグ出力を行うことが出来ます。cfx run によってFirefox を起動した場合は、そのコマンドラインにconsole.log の出力が表示されます。 それ以外の場合は、Firefox のエラーコンソール (Ctrl + Shift + J で開くウィンドウ) に出力されます。

• ロギング - Add-on SDK Documentation

Add-onSDK のAPI で提供されている機能では不足している場合

Firefox 拡張で可能な機能でも、全ての機能が Add-onSDK のAPI で提供されているわけではありません。 例えばローカルファイルの操作などは Add-onSDK のAPI では現在のところ不可能です。 そういった機能は、XPCOMコンポーネントとして提供されています。 Add-onSDK を使ってFirefox 拡張を開発する場合でもXPCOMコンポーネントは使用できますので、Add-onSDK のAPI では不足する場合はXPCOMコンポーネントを直接使用しましょう。 下記ページが参考になります。

• Add-on SDK で始めるアドオン開発（ XPCOM 編） | Mozilla Developer Street (modest)
• Chrome 権限 - Add-on SDK Documentation

ただ、この機能は今のところ Add-onSDK の実験的な機能ということですので、XPCOMコンポーネントを使用しないといけないような拡張機能が作りたい場合はXUL ベースの拡張機能として開発する方が良さそうです。

参考になるページ

従来からのXUL オーバーレイを用いた拡張機能については参考になるページが結構豊富なので、参考になるページを見ながら開発を進めると良いでしょう。

• 目次 - Firefox拡張機能開発チュートリアル (XHTML) : 従来のXUL ベースの拡張機能の開発方法についてよくまとまっています
• XUL チュートリアル - XUL | MDN :XUL に関するチュートリアルです
• Firefox 3ではじめる拡張機能開発：特集｜gihyo.jp … 技術評論社
• AppLauncher ver.0.1 〜 Firefox 拡張機能作り方メモ 〜 - vivid memo : 昔書いた記事です

開発の流れ

開発の流れは、下記ページにまとまっています。

• ５章：Firefox拡張機能を作ってみよう！ 開発環境の準備 - Firefox拡張機能開発チュートリアル (XHTML)

上記ページでは、XPI ファイルにパッケージングする際に JAR ファイルを作成していますが、実際にはわざわざ JAR ファイルを作成する必要はなく、全てまとめて ZIP 圧縮して拡張子を XPI に変更しても良いです。 もともと JAR ファイルに固めるようになっていたのはパフォーマンス上の理由からだったようですが、Firefox 4 以降ではむしろ JAR ファイルに固めない方が良いようです。

• Latest topics > XPIファイルのパッケージングの仕方を工夫してもあんまり報われないという事が分かった（僕の場合は） - outsider reflex

デバッグ出力

XUL オーバーレイの際に読み込まれたJavaScript ファイルは、Chrome ウィンドウ (Firefox そのもののウィンドウやダイアログなどのウィンドウを表すオブジェクト) の名前空間で実行されます。 そのため、例えば JS 中で alertメソッドを呼び出すとそのまま alert が表示されます。 もっとも簡易なデバッグ出力はこの方法だと思います。

他にも、エラーコンソールに出力するなど、デバッグ用の出力の方法はいくつかあります。 詳細は 「５章：Firefox拡張機能を作ってみよう！ 開発環境の準備 - Firefox拡張機能開発チュートリアル (XHTML)」 の下の方のコラム (「JavaScriptデバッグ方法」) をご覧ください。

基本的な考え方

ブートストラップ型ではないXUL ベースの拡張機能の開発の際の考え方としては、

• UI 周りの処理は、以下の 2 通りのどちらかの方法で行う
  • XUL オーバーレイの際に読み込んだ JS で行う
  • JavaScript コードモジュール から、XPCOMコンポーネントを通じて UI 操作を行う
• UI 周りに関するではなく本質的な処理は全てJavaScript コードモジュールで行う

という風にするのが良いのかなーと思っています。 私は下記のことを最初のころ理解できてなくて苦労しました。

• XUL オーバーレイの際に JS を読み込むと、(例えばFirefox アプリケーションウィンドウに対するオーバーレイを行った場合は)Firefox のアプリケーションごとに同じ JS ファイルが別々の名前空間で実行される
  • window 変数でChrome ウィンドウを表すオブジェクトにアクセスできたりするので、UI をいじるのはやりやすい
  • アプリケーション全体で 1 つだけ持っておきたい情報等はここで管理すべきではない
• JavaScript コードモジュールとして実行された JS ファイルは、アプリケーション全体で単一のものとして実行される
  • Chrome ウィンドウを表すオブジェクトにアクセスするためにXPCOMコンポーネントを使う必要があったりして、UI をいじるのは多少面倒
  • アプリケーション全体で 1 つだけ持っておきたい情報等はここで管理すると良い

ここら辺のことについて saneyuki さんから言及頂きましたので合わせてご覧ください。

• XUL アドオンの JS コードモジュール とロジックの関係 - snyk_s log

基本的な作り方

最低限必要なファイルは、下記の 2 つです。

• install.rdf
• bootstrap.js

install.rdf は、ブートストラップ型でないXUL ベースの拡張機能でも使用していたものと基本的には同じですが、ブートストラップ型にするために下記内容を追加する必要があります。 ((ここでem は名前空間URI “http://www.mozilla.org/2004/em-rdf#” を表すプレフィックスです。))

<em:bootstrap>true</em:bootstrap>

bootstrap.js には、インストール時や拡張機能の有効化、無効化時、アンインストール時などに呼び出されるいくつかの関数を記述します。 サンプルを Gist にあげました。

• ブートストラップ型の XUL ベースの Firefox 拡張としてのサンプル。 · GitHub

この 2 つのファイルを ZIP に固めて拡張子を XPI に変更すると、Firefox にインストールできる形になります。

基本的な考え方

bootstrap.js はChrome ウィンドウとは独立な名前空間で実行されます。JavaScript コードモジュールから全ての UI 操作を行うのと同じような感じで開発を進めることになると思います。 例えば、ウィンドウにツールバーボタンを追加するような拡張機能の場合、新しいウィンドウが開かれる際のイベントを検出して、新しいウィンドウが開かれたらそこにツールバーボタンを追加する、というようなことを拡張機能が行う必要があります。

また、拡張機能の無効化時などに再起動がされないので、拡張機能で行った UI 変更などは拡張機能自身が責任を持って元に戻すということをしなければなりません。

他の 2 つの開発方法と比べて考えるべき事が多くて難しいので、Firefox 拡張周りの知識が乏しい状態でブートストラップ型のXUL ベースのFirefox 拡張を開発するのはやめておいた方が良いんじゃないかなーと思います。

ブートストラップ型のXUL ベース拡張の雛形や参考になるサンプル

piroor さんによって、ブートストラップ型のXUL ベースのFirefox 拡張の雛形が公開されています。 ブートストラップ型のXUL ベースのFirefox 拡張を開発する際には、これを元にしたり参考にしたりして開発を進めると良いのではないかと思います。

• piroor/restartless · GitHub

teramako さんによる HTTPリファラをいじる拡張機能も参考になります。

• Firefox拡張でHTTPリファラを弄る - hogehoge @teramako