Firefox の拡張機能を自分で作りたい！
というわけで備忘録です。
開発環境は Firefox 2.0.0.12 & Windows XP です。
とりあえずまずは適当に作ってみましょう。
Mozilla のページに作り方が載ってるので簡単そうですが
やってみてもうまくいきません。
いきなりここでつまずきそうなので、別の手法でやってみます。
http://ted.mielczarek.org/code/mozilla/extensionwiz/
ここに、新規Extension作成用のWizardがあります。
必要な項目を入力して「Create Extension」ボタンを押すと
zipファイルが作成されるので、これを適当なディレクトリに展開します。
以下このディレクトリを、EXT_ROOT と記述します。
普段あまり使うことが無いかもしれませんが、Firefoxにはプロファイル機能があります。
これによって複数の環境(ブックマークやその他あらゆる設定)を切り替えることができます。
開発用のプロファイルを作ってそこで作業するようにしてみましょう。
start "" "%ProgramFiles%\Mozilla Firefox\firefox.exe" -no-remote -P dev
コマンドプロンプトから上記のように入力します。
dev ユーザで Firefox を起動する、という意味です。
もしまだdevユーザが無い場合には、プロファイル選択画面が出てきますので
「新しいプロファイルを作成」でdevユーザを作成します。
ただし「今後このプロファイルを使用する」チェックは外します。
すると dev ユーザで Firefox が起動します。
ブックマークやホームページの設定など、全てクリーンな状態になっていることを確認しましょう。
そしたら次に、devユーザのプロファイルフォルダを探します。
C:\Documents and Settings\[OSユーザ名]\Application Data\Mozilla\Firefox\Profiles
の下に、ユーザ毎のフォルダがあるはずです。
その中で、.dev 拡張子の付いたフォルダが、devユーザ用のプロファイルフォルダです。
そのフォルダの下の extensions フォルダを開き、新規ファイルを作成します。
ファイル名は、拡張機能のID(Extension ID)と同じにします。
先程Wizard画面で入力したものです。
もし忘れてしまった人は、EXT_ROOT/install.rdf ファイルを開き、
<em:id>要素を探しましょう。ここにIDが書いてあります。
<em:id>sample1@limy.org</em:id>
このように。この例の場合、ファイル名を sample1@limy.org にします。
@ も含めてIDと全く同じにして下さい。
ファイルの内容は、zipファイルを展開したフォルダ(EXT_ROOT)を1行で記述します。
sample1@limy.org
C:\var\prog\extensions\sample1
例えばこんな感じにします。
これだけで、拡張機能がFirefoxに登録されたことになります。
これは dev ユーザのみで有効です。
ここまで来たら、Firefox を再起動します。
一旦devユーザのFirefoxを終了させ、またコマンドプロンプトから以下を入力します。
start "" "%ProgramFiles%\Mozilla Firefox\firefox.exe" -no-remote -P dev
「ツール」メニューを見てみましょう。
すると一番下に「Your localized menuitem」というのが追加されているはずです。
これが今回拡張機能で追加されたものです。
選択すると、Hello World ダイアログが表示されます。
拡張機能がインストールされたことを確認するには、
同じく「ツール」メニューから「アドオン」を選択します。
ここに今回追加した拡張機能が表示されています。
うまくインストールできなかった場合は、エラーメッセージが表示されるでしょう。
拡張機能は大体以下のようなディレクトリ構成になっています。
EXT_ROOT |-- install.rdf |-- chrome.manifest | |-- content/ | |-- XXX.xul |-- locale/ |-- skin/ |
この中で、必須なのは install.rdf と chrome.manifest の二つだけです。
あとのファイルは任意、フォルダ名も自由です。
これがメインとなるマニフェストファイルです。
拡張機能のIDや名称、作者名などを記述します。
拡張機能で使うディレクトリやファイルの構成を記述します。
以下、これらの設定を「プロパティ」と呼びます。
例を見てみましょう。
content sample1 content/ overlay chrome://browser/content/browser.xul chrome://sample1/content/firefoxOverlay.xul
1行目で content プロパティを定義しています。
このように、先頭カラムにプロパティの種別を書きます。
content / locale / skin / overlay / style / override / resource
と全部で7つのプロパティ種別があります。
1行目2カラム目の sample1 というのが「パッケージ名」です。
これは自由に定義して構いません。
3カラム目が、そのパッケージに対応するフォルダ名です。
オーバーレイとはちょっと聞きなれない言葉かもしれませんが
拡張機能の開発時にはよく出てくるのでここで覚えましょう。
Firefox を動かしているのは XUL というユーザーインターフェイス言語です。
これはXML形式で記述されたテキストファイルで、
Firefox はこの XUL で記述された言語によって動いています。
chrome://browser/content/browser.xul
というのが、Firefox の標準XUL(通称ブラウザウィンドウ)です。
試しに、このアドレスをFirefoxのURL欄に打ち込んでみましょう。
すると、タブの中身が「Firefoxウィンドウの中身」に変化したと思います。
で、オーバーレイの説明に戻ります。
オーバーレイとは「重ね合わせる」という意味で
overlay chrome://browser/content/browser.xul chrome://sample1/content/firefoxOverlay.xul
は、chrome://browser/content/browser.xul という XUL (ブラウザウィンドウ)に
chrome://sample1/content/firefoxOverlay.xul の機能を重ね合わせる
という意味になります。
これがつまり Firefox に 拡張機能を追加する、ということになるわけです。
chrome:// で始まるURIは、XULファイルを呼び出すためのスキーマで
chrome://sample1/content/firefoxOverlay.xul
というのは
という意味になります。
パッケージ名は先程contentプロパティで定義したものと合わせます。
データの種類は、content / locale / skin のいずれかである必要があります。
パスは、先程contentプロパティで定義したフォルダ名と合わせます。
これによって、
chrome://sample1/content/firefoxOverlay.xul
は、ローカルフォルダの
EXT_ROOT/content/firefoxOverlay.xul
を指すことになります。