2006-10-20

WindowsではCygwinで作業すると楽かも。

拡張作成用Firefoxを用意する

Firefoxがインストールされているディレクトリ($FIREFOXDIR)にあるchrome ディレクトリに移動してjarファイルを展開する。

$ cd $FIREFOXDIR/chrome
$ for file in *.jar; do unzip $file; done

Firefoxがjarファイルではなく展開したファイルを使用するようにmanifestファイルを修整する。

$ perl -pi.orig -e "s/jar:[^\.]*\.jar\!/resource\:\/chrome/g" *.manifest

Firefoxのtoolsメニューに "Hello World!" アラートダイアログを表示するメニューを追加する

展開されたディレクトリ($FIREFOXDIR/chrome/content/browser)に移動する。
helloWorldOverlay.xul, helloWorldOverlay.js の2つのファイルを作る。
helloWorldOverlay.xul

<?xml version="1.0"?>
<overlay id="helloWorldOverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <script type="application/x-javascript" src="chrome://browser/content/helloWorldOverlay.js" />
    <menupopup id="menu_ToolsPopup">
        <menuitem id="menu_helloWorld" label="Hello World!" accesskey="H"
            oncommand="helloWorld.hello();" />
    </menupopup>
</overlay>

helloWorldOverlay.js

var helloWorld = {
    hello : function() {
        alert("Hello World!");
    }
}

browser.xulに helloWorldOverlay.xul を追加する。
browser.xul

<?xml version="1.0"?>

<?xml-stylesheet href="chrome://browser/content/browser.css" type="text/css"?>


<?xml-stylesheet href="chrome://browser/skin/" type="text/css"?>


<?xml-stylesheet href="chrome://global/skin/toolbar.css" type="text/css"?>
<?xml-stylesheet href="chrome://global/skin/findBar.css" type="text/css"?>

<?xul-overlay href="chrome://browser/content/baseMenuOverlay.xul"?>

<?xul-overlay href="chrome://browser/content/helloWorldOverlay.xul"?>

<!DOCTYPE window [
<!ENTITY % brandDTD SYSTEM "chrome://branding/locale/brand.dtd" >
...

きちんと動作することを確認して、パッケージング作業に移る。

作成したファイルをパッケージングする

作業用ディレクトリ($WORKDIR)に移動して chrome/content ディレクトリを作成する。

$ cd $WORKDIR
$ mkdir -p chrome/content

作成した helloWorldOverlay.xul, helloWorldOverlay.js ファイルを $WORKDIR/chrome/content ディレクトリにコピーする。

cp $FIREFOXDIR/chrome/content/browser/helloWorldOverlay.* $WORKDIR/chrome/content/

helloWorldOverlay.xul のuriを修正する。

<?xml version="1.0"?>
<overlay id="helloWorldOverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <script type="application/x-javascript" src="chrome://helloworld/content/helloWorldOverlay.js" />
    <menupopup id="menu_ToolsPopup">
        <menuitem id="menu_helloWorld" label="Hello World!" accesskey="H"
            oncommand="helloWorld.hello();" />
    </menupopup>
</overlay>

$WORKDIR/chrome ディレクトリに移動してパッケージングする。

$ zip -r0 helloworld.jar content/
  adding: content/ (stored 0%)
  adding: content/helloWorldOverlay.js (stored 0%)
  adding: content/helloWorldOverlay.xul (stored 0%)
$ ls
content/  helloworld.jar

$WORKDIR ディレクトリに戻って chrome.manifest, install.rdf ファイルを作成する。
chrome.manifest の句切りはタブを使う。
chrome.manifest

overlay	chrome://browser/content/browser.xul	chrome://helloworld/content/helloWorldOverlay.xul
content	helloworld	jar:chrome/helloworld.jar!/content/

install.rdf 作成スクリプト
install.rdf

<?xml version="1.0"?>
<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>{88fb121f-0313-4fc9-8541-9f8c3646418e}</em:id>
        <em:name>helloworld</em:name>
        <em:version>1.0</em:version>
        <em:type>2</em:type>
        <em:description>show hello world message</em:description>
        <em:creator>iNo</em:creator>
        <em:homepageURL>http://www.eonet.ne.jp/~wdf/</em:homepageURL>
        <em:targetApplication>
            <Description>
                <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
                <em:minVersion>1.5</em:minVersion>
                <em:maxVersion>2.0.0.*</em:maxVersion>
            </Description>
        </em:targetApplication>
        <em:file>
            <Description about="urn:mozilla:extension:file:helloworld.jar">
                <em:package>content/</em:package>
                <em:locale></em:locale>
                <em:skin></em:skin>
            </Description>
        </em:file>
    </Description>
</RDF>

出来上がったファイルをxpiファイルにパッケージングする。

$ zip -r9 helloworld.xpi chrome.manifest install.rdf chrome/helloworld.jar
  adding: chrome.manifest (deflated 44%)
  adding: install.rdf (deflated 59%)
  adding: chrome/helloworld.jar (deflated 52%)

xpiファイルをFirefoxのウィンドウにドラッグ&ドロップしてインストールする。
インストール前に $FIREFOXDIR/chrome/content/browser/browser.xul に追加したオーバーレイの記述を削除しておくこと。

WDF

Firefox拡張作成方法

拡張作成用Firefoxを用意する

Firefoxのtoolsメニューに "Hello World!" アラートダイアログを表示するメニューを追加する

作成したファイルをパッケージングする