ひだまりソケットは壊れない

ソフトウェア開発に関する話を書きます。 最近は主に Android アプリ、Windows アプリ (UWP アプリ)、Java 関係です。

まじめなことを書くつもりでやっています。 適当なことは 「一角獣は夜に啼く」 に書いています。

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

Firefox 拡張機能

4 年前に Firefox 拡張機能の作り方についての記事を書いた のですが、いい加減内容が古いので、改めて Firefox 拡張を作ろうと思った人向けに Firefox 拡張の作り方について概要を記しておこうかと思います。

この記事の内容は古くなっています！！！！！ (2015-12-15 追記)

タイトルにあるように、本記事は 2013 年に書かれたもので、現在ではすでに内容が古くなっています。 現在でも通用する部分もありますが、基本的には一から調べなおした方が良いと思います。

これ以降は古い内容である可能性がありますので、ご注意ください。

Firefox 拡張機能の作り方は大きく分けて 3 とおり

3 種類の方法があるので、拡張機能を作り始める前にどの方法を使うかを決める必要があります。

  • Add-on SDK (または Add-on Builder) を使う方法
  • 従来からある XUL オーバーレイを用いる方法 (ブートストラップ型ではない XUL ベースの拡張機能)
  • Add-on SDK を用いずにブートストラップ型拡張機能を作る方法 (ブートストラップ型の XUL ベースの拡張機能)

個人的な感触としては、上の方が初心者向けです。 最も多くのことができるのは従来からある XUL オーバーレイを用いる方法です。 Add-on SDK を用いる方法が一番できることは少ないです (が、実験的に XPCOM の使用が可能になっているので、それを使えば他の 2 つでできるほとんどのことは可能になります)。

従来からある XUL オーバーレイを用いる方法では、Firefox 拡張インストール後に再起動が必要です。 他の 2 つはインストール後の Firefox 再起動は不要です。

それぞれについての概要を以下で説明します。

Add-on SDK (または Add-on Builder) を使う方法

Add-on SDK はローカルホスト上の開発環境であり、Add-on Builder は web 上での開発環境です。 ローカルホスト上に環境構築できないなどの理由がなければ、Add-on SDK を使えばいいでしょう。 (これ以降、特に Add-on Builder については言及しませんが、基本的には Add-on SDK を使う場合と同じだと思います。 使ったことがないのでわかんないのですが。) ちなみに Add-on SDK は、昔は Jetpack SDK と呼ばれていました。 Add-on SDK で開発した Firefox 拡張は、Firefox 4 以降にインストールできます。

Add-on SDK を使うと、主に JavaScript と HTML、CSS を使って Firefox 拡張を開発することができます。 Add-on SDK の API として Firefox 拡張に必要な機能がある程度提供されているので、Firefox 独自の XUL *1 や XPCOM *2 について知らなくても、拡張機能を開発することができます。

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

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

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

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

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

デバッグ用出力

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

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

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

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

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

従来からある XUL オーバーレイを用いた拡張機能 (ブートストラップ型ではない XUL ベースの拡張機能)

Firefox の UI は XUL という言語で記述されています。 この開発方法では Firefox アプリケーションの XUL を拡張機能側から上書きする (オーバーレイ) ことで UI を変更したり、読み込む JavaScript ファイルを決定したりします。 拡張機能のメインの JavaScript ファイルは、オーバーレイした XUL から読み込まれることで実行されるわけです。 (UI の変更自体は、XUL オーバーレイを使用しなくても、JS 側から DOM 操作で変更することも可能です。)

基本的には、DOM 操作による XUL の変更やイベントハンドラの追加と、XPCOM コンポーネント を使用することで拡張機能としての処理を実装することになります。 例えば、アクティブなブラウザウィンドウを取得するのにも XPCOM コンポーネントを使用する必要があります。 (FUEL という拡張機能用の API もありますが、あまり主流ではなさそうです。)

他の 2 つの方法とは違い、この方法で開発した Firefox 拡張はインストール時に Firefox の再起動が必要となります。 また、他の開発方法では Firefox 4 以降にしかインストールできませんが、この方法では Firefox 3.6 やそれより前の Firefox にもインストールできる拡張機能を開発できます。

参考になるページ

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

開発の流れ

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

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

デバッグ出力

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

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

基本的な考え方

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

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

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

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

Add-on SDK を使わないでブートストラップ型の Firefox 拡張を開発する (ブートストラップ型の XUL ベースの Firefox 拡張)

従来からの XUL ベースの Firefox 拡張は、インストール時に Firefox の再起動が必要なわけですが、Firefox 4 からは再起動不要の拡張機能も開発出来るようになっています。 Add-on SDK を使った拡張機能は全て再起動が不要になるようになっているのですが、Add-on SDK を使わずに再起動不要の拡張機能を開発する方法もあります。

DOM 操作で XUL をいじったり、XPCOM を使ったりという部分はブートストラップ型ではない XUL ベースの拡張機能と同じなのですが、XUL オーバーレイを使用しないという点で大きく異なっています。

基本的な作り方

最低限必要なファイルは、下記の 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 にあげました。

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

基本的な考え方

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

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

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

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

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

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

Firefox 拡張の公開方法

作成した XPI パッケージは、基本的には 「Add-ons for Firefox」 で公開すると良いでしょう。 Mozilla の人によるレビューがあるのでアップロードしてから実際に一般ユーザーが使用できるまでに 1 週間程度かかりますが、「Add-ons for Firefox」 で公開しておくと拡張機能のバージョンアップ時に自動的にアップデートされるようになるので、その点は便利です。

参考文献

Firefox 拡張開発にあたっては下記の書籍が参考になります。 特にブートストラップ型の XUL ベースの拡張機能の開発についてはあまり web 上にまとまった情報がないので、『Firefox Hacks Rebooted』 は非常に参考になりました。 (Firefox 8 のころの情報なので、多少最新の情報とは違う部分もありますが、本質的な部分の勉強には最適だと思います。)

Firefox Hacks Rebooted ―Mozillaテクノロジ徹底活用テクニック

Firefox Hacks Rebooted ―Mozillaテクノロジ徹底活用テクニック

Firefox 3 Hacks ―Mozillaテクノロジ徹底活用テクニック

Firefox 3 Hacks ―Mozillaテクノロジ徹底活用テクニック

Web 上では、下記ページに Mozilla による情報がまとまっていますので目を通すと良いでしょう。

あと、Mozilla 関係の開発者向けの情報はだいたい MDN (Mozilla Developer Network) にまとまっているので、何か調べたいことがあれば、調べたいキーワードに 「MDN」 をくっつけてググると良いです。

*1:XML をベースにした UI 記述用言語

*2:クロスプラットフォームなコンポーネントオブジェクトモデル。 これらにより、例えばローカルファイルの読み書きをする機能などが提供される