Firefox拡張(アドオン)開発入門
この間アドオンを開発したのですが、開発に入るまで少し時間がかかって面倒だったので、初めて開発する際にさくっと作れるようにまとめました。
簡単なサンプルを作った後、参考URLに挙げているサイトで詳細な解説を見ると理解しやすいと思います。(Firefox3.0と3.5で動作確認済みです)
準備
開発を始める際に、一度だけ行えばよい設定です。
開発用プロファイル作成
予想外のトラブルでFirefoxが利用できなくなる可能性があるので、アドオン開発用のプロファイルを作成しておきます。プロファイルマネージャーの起動は下記オプションで。
Mac /Applications/Firefox.app/Contents/MacOS/firefox -ProfileManager Windows C:\...\Mozilla Firefox> firefox -p
about:configの設定
URLにabout:configと入力し、下記変数の値をtrueに設定します。
現在値が設定されていないものについては右クリック「新規作成 > 真偽値」で追加します。
javascript.options.showInConsole | JavaScriptのエラーをエラーコンソールに出力する |
javascript.options.strict | JavaScriptのエラーを厳密にする |
browser.dom.window.dump.enabled | dump関数で文字列を出力可能にする |
nglayout.debug.disable_xul_cache | XULのキャッシュを無効にする |
DOM Inspectorのインストール
ブラウザ構成要素(メニューバーとか)の情報を取得するために必要です。
https://addons.mozilla.org/ja/firefox/addon/6622
開発
ここからアドオンの実装です。
必要ファイルの作成
今回は下記のファイルを準備します。
開発用の作業ディレクトリ /Users/ntaku/extensions/hello /Users/ntaku/extensions/hello/install.rdf /Users/ntaku/extensions/hello/chrome.manifest メインスクリプトを設置するディレクトリ /Users/ntaku/extensions/hello/content /Users/ntaku/extensions/hello/content/overlay.xul /Users/ntaku/extensions/hello/content/overlay.js
install.rdf
インストール情報を記述した設定ファイルです。
アドオンの基本情報、対応させるFirefoxのバージョンを指定します。
id | アドオンを識別するためのID |
name | 名称 |
version | バージョン |
description | 説明 |
creator | 開発者 |
targetApplication | 対応させるアプリケーションの情報 |
<?xml version="1.0"?> <RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <RDF:Description RDF:about="urn:mozilla:install-manifest"> <em:id>hello@ntaku.development.com</em:id> <em:name>hello</em:name> <em:version>0.1</em:version> <em:description>サンプルアプリケーション</em:description> <em:creator>ntaku</em:creator> <em:targetApplication> <RDF:Description em:id="{ec8030f7-c20a-464f-9b0e-13a3a9e97384}" em:minVersion="3.0" em:maxVersion="3.5.*" /> </em:targetApplication> </RDF:Description> </RDF:RDF>
chrome.manifest
アドオンのパッケージ情報を記述した設定ファイルです。
アドオンで利用するディレクトリを登録します。
content hello content/ overlay chrome://browser/content/browser.xul chrome://hello/content/overlay.xul
overlay.xul
GUIを定義するXUL(ズール)ファイルです。
ここで定義したGUIがFirefoxのブラウザウィンドウへオーバーレイされます。
<?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/overlay.js" /> <popup id="contentAreaContextMenu"> <menuitem id="hello-menu" label="Hello" oncommand="Hello.init();" /> </popup> </overlay>
ここではコンテキストメニューのIDを指定して、その場所に新規アイテムを追加しています。DOM Inspectorを開いてURLにchrome://browser/content/browser.xulと入力してみてください。Firebugのような感覚でブラウザ構成要素のIDを調査できます。
overlay.js
具体的な処理を記述します。
xulの中にもJSを記述できますが、あまり好ましくないので分離します。
var Hello = { init: function(){ var doc = window.content.document; var p = doc.getElementById("hello-popup"); if(!p){ var popup = doc.createElement("div"); popup.setAttribute("id", "hello-popup"); doc.body.appendChild(popup); p = doc.getElementById("hello-popup"); } var s = p.style; s.position = "absolute"; s.top = 0; s.left = 0; s.width = "100%"; s.background = "#fff398"; p.innerHTML = "<div>HELLO</div>"; } };
画面の上部にHELLOと表示するだけのスクリプトです。今回は特に気にしていませんが、アドオン内で指定するIDは他のアドオンと被らないように工夫した方がよいです。
デバッグ用インストール
上記ファイルが全て準備できたら、デバッグ用にインストールしてみます。
ソースファイルからインストールするには、作業ディレクトリのパスを記述したファイルをextensionsディレクトリに設置するだけでOKです。
ファイル名はinstall.rdfで指定したアプリケーションID(hello@ntaku.development.com)です。
/Users/ntaku/extensions/hello
extensionsディレクトリ
Mac ~/Library/Application Support/Firefox/Profiles/xxx/extentions/ Windows C:\Documents and Settings\user\Application Data\Mozilla\Firefox\Profiles\xxx\extensions
この状態でFirefoxを再起動するとアドオンがインストールされます。
インストール後に処理を修正した場合は、Firefoxを再起動するか、新規ウィンドウを開けば適応されます。
インストーラー作成
開発が終了したらファイルをxpi形式でまとめて配布できるようにします。
ファイル構成が少し変わって、下記のようにまとめる必要があります。
/Users/ntaku/extensions/hello /Users/ntaku/extensions/hello/chrome.manifest /Users/ntaku/extensions/hello/install.rdf /Users/ntaku/extensions/hello/chrome ← 変更 /Users/ntaku/extensions/hello/chrome/hello.jar ← 変更
hello.jarにはcontentディレクトリが含まれています。
構成が変わったので、chrome.manifestを少し変更します。
content hello jar:chrome/hello.jar!/content/ ← 変更 overlay chrome://browser/content/browser.xul chrome://hello/content/overlay.xul
最後に全てのファイルをzipで固めて拡張子をxpiに変更すればインストーラーの完成です。
xpiファイルをFirefoxにD&Dすればインストールできます。
xpi生成スクリプト
下記のようなスクリプトで上記作業を自動化できます
#!/bin/bash cd /Users/ntaku/extensions cp -r hello hello-xpi sed 's/hello content\//hello jar:chrome\/hello.jar!\/content\//' hello/chrome.manifest > hello-xpi/chrome.manifest cd hello-xpi mkdir chrome zip -r chrome/hello.jar content rm -rf content zip -r hello.xpi chrome install.rdf chrome.manifest mv hello.xpi ~/Desktop cd .. rm -rf hello-xpi
参考
より詳しく知りたい方は続けて下記サイトをどうぞ。