プログラミングノート

一からものを作ることが好きなエンジニアの開発ブログです。

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
参考

より詳しく知りたい方は続けて下記サイトをどうぞ。