プログラミングノート

■[Firefox]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

参考

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

• Firefox 3ではじめる拡張機能開発
• XULDEV.ORG
• Firefox拡張機能開発チュートリアル
• XUL チュートリアル
• Firefox拡張機能(extension)の作り方
• Firefox 拡張開発にあたり、使った拡張や参考になった拡張など

ツイートする

Permalink | コメント(6) | トラックバック(1) | 20:50