Firefoxのアドオンを作ってみる 入門編
開発環境が整ったので、とりあえず「Hello,World!」してみる。
今回は、アドオンは以下のようなものを作成する。
・アドオンバーにボタンを表示
・ボタンを押すとアラートが出現し、「Hello,World!」と表示
開発環境
・Ubuntu 11.04・FireFox 6.0
作業項目
1. 作業ディレクトリの準備2. chrome.manifestの作成
3. install.rdfの作成
4. hello.xulの作成
5. hello.jsの作成
1. 作業ディレクトリの準備
毎回、xpiファイルを作成して、インストールする作業はめんどうなので、任意のディレクトリのコードを直接読み込む用にする。まずは、適当な場所に作業用ディレクトリを作成する。例えば、こんな感じ。
/home/ユーザ名/firefox/hello/
次に、リンクファイル(ここでは「hello@xuldev.org」)は以下の場所に作成する。
/home/ユーザ名/.mozilla/firefox/ID.[プロファイル名]/extensions/
このファイルに作業用ディレクトリの場所を記述することで、コードを直接読み込むことができる。
ディレクトリ構成はこのようになる。
hello
┠─ chrome.manifest
┠─ install.rdf
└─ content
┠─ hello.xul
└─ hello.js
2. chrome.manifestの作成
FireFoxが拡張機能を認識できるように、以下のようなマニュフェストファイル(chrome.manifest)を作成する。content hello content/ overlay chrome://browser/content/browser.xul chrome://hello/content/hello.xul
ここでは、「content」と「overlay」の2つのマニュフェスト命令を使用している。
・content
contentパッケージの定義、指定したパッケージ名のルートとなるパスを指定する。
content パッケージ名 パス
・overlay
インターフェースを修正するため、パッケージのオーバーレイを定義する。
overlay オーバーレイが適用されるxul 適用するオーバーレイのxul
3. install.rdfの作成
以下のようなinstall.rdfファイルを作成する。<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#">
<Description about="urn:mozilla:install-manifest">
<em:id>hello@xuldev.org</em:id>
<em:type>2</em:type>
<em:name>Hello</em:name>
<em:version>0.1</em:version>
<em:description>Hello Extention</em:description>
<em:creator>Your Name</em:creator>
<em:homepageURL>http://www.xuldev.org/misc/sd.php</em:homepageURL>
<em:optionsURL>chrome://hello/content/prefs.xul</em:optionsURL>
<em:localized>
<Description>
<em:locale>ja</em:locale>
<em:name>こんにちは</em:name>
<em:description>こんにちは！</em:description>
<em:creator>hisasann</em:creator>
</Description>
</em:localized>
<em:targetApplication>
<Description>
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
<em:minVersion>3.0</em:minVersion>
<em:maxVersion>8.0.*</em:maxVersion>
</Description>
</em:targetApplication>
</Description>
</RDF>参考にした元のinstall.rdfと違う箇所は「maxVersion」で「3.0.*」を「8.0.*」に変更した。
4. hello.xulの作成
xulファイルにより、オーバーレイするパーツを以下のように定義する。<?xml version="1.0" ?>
<overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript" src="chrome://hello/content/hello.js" />
<toolbar id="addon-bar">
<button id="my-test-button" label="TEST" oncommand='Hello.alert( "Hello,World!" );'></button>
</toolbar>
</overlay>ここでは、
・hello.jsの読み込み
・アドオンバーにボタンを作成
を行っている。
5. hello.jsの作成
上記で作成したボタンを押した時の処理をhello.jsで以下のように記述している。var Hello = {
alert: function( msg ) {
window.alert( msg );
}
};動作確認
実際に作成したアドオンの動作を確認する。$ firefox -no-remote -P [開発用プロファイル名]
1〜5の作業が完了していると、ブラウザの下部にあるアドオンバーの右側にボタンが表示され、押すと「Hello,World!」と表示される。
感想
ステータスバーをアドオンバーで代用したから、 ちょっと手間だった。*1けど、思ってたよりは、アドオンの作成は簡単かな。
1の作業を行うことで、「xpiファイル作って、インストール」という作業を短縮できて、とても楽。
参考
・Chrome Registration/MDN・Firefox拡張機能（Extention）の簡単な作り方メモ
・アドオンバー
・「ステータスバーに何が起きたのか?」
