Firefoxではインターフェースを記述するのにXULを使います。これは「<button />」のようにインターフェースをXMLの形式で記述するものです。Extension Developer's Extensionを入れてるなら「ツール」-「Extension Developer」-「XUL Editor」メニューから試すことができます。例えば下のように入力して「Open preview in new window」を押すと以下のような画面が表示されます。
<?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="yourwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="sample" > <hbox> <textbox /> <button label="button" /> </hbox> <label value="Put your XUL here!"/> </window>
XUL controls - MDCに基本的な部品がまとめられてるので自分でいろいろと試してみてください。
Firefox自体もXULによって作られており、chromeの中にまとめられています。chromeにはFirefoxに必要な情報が含まれており、以下の三種類があります。
例えば「chrome://browser/content/browser.xul」とロケーションバーに打ってEnterを押すとFirefoxのインターフェースが現れます。これはbrowserパッケージのcontentであるbrowser.xulファイルにFirefoxのインターフェースが書かれてるということです。
このようにFirefoxはXULによって書かれてるので、XULによって書き換えることができます。「content」フォルダ内に「helloworld.xul」ファイルを作って、テキストエディタで以下のように入力します。
<?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> <!-- オーバーレイすることを表す --> <overlay id="helloworld" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <!-- ステータスバーに追加 --> <statusbar id="status-bar"> <statusbarpanel id="my-panel" label="Hello, World"/> </statusbar> </overlay>
ここで重要なのはstatusbar部品にstatus-barというidを指定していることです。Firefoxのstatusbar部品もidにstatus-barを指定しているため、このファイルをFirefoxのXULファイルにオーバーレイ（結合）することで、Firefox自体のXULファイルを書き換えることができます。
オーバーレイなど、chrome関係の宣言はchrome.manifestという名前のファイルで行います。「helloworld」フォルダ内に「chrome.manifest」ファイルを作ってください。
このファイルに、以下のように入力します。
content helloworld content/ overlay chrome://browser/content/browser.xul chrome://helloworld/content/helloworld.xul
まず、一行目はchromeの内容を宣言しています。「chrome型 パッケージ名 登録するフォルダ（ファイル）」の形で宣言を行います。「content helloworld content/」なら「content/フォルダ内のファイルをhelloworldパッケージのcontentとして登録する」という意味になります。これにより「helloworld.xul」は「chrome://helloworld/content/helloworld.xul」というchromeアドレスで表されます（chromeアドレスはchrome://パッケージ名/chrome型/ファイル名」の形で書かれます）。
次にoverlay(オーバーレイ)を行います。overlayは「overlay オーバーレイされるファイル オーバーレイするファイル」という書式で書きます。「overlay chrome://browser/content/browser.xul chrome://helloworld/content/helloworld.xul」なら「helloworld.xul」（chrome://helloworld/content/helloworld.xul）をブラウザのインターフェース（chrome://browser/content/browser.xul）にオーバーレイ（結合）することを意味します。
ここまでできたらいったんインストールします。まず、どこでもいいので「helloworld@yourname.net」（アドオンのidと同じ名前）という名前のファイルを作ります。これをテキストエディタで開いて、アドオンが保存されているフォルダ（この場合は「C:\Extensions\helloworld\」（最後の\を忘れないように！））を入力して保存します。これをプロファイルフォルダ内の「extensions」フォルダにコピーします。Firefoxを再起動すると、アドオンがインストールされ、図のようにステータスバーに"Hello, World"と表示されます。
次にメニューからプログラムを実行できるようにします。アドオンに何かの動作をさせたい場合、JavaScriptを使うので、まず、「content」フォルダ内に「helloworld.js」ファイルを作成します。
以下のコードを貼り付けます。
function hello(){
alert("Hello, world!");
}
次にhelloworld.xulファイルに以下の赤い部分を追加します。
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>
<!-- オーバーレイすることを表す -->
<overlay id="helloworld"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<!-- ステータスバーに追加 -->
<statusbar id="status-bar">
<statusbarpanel id="my-panel" label="Hello, World"/>
</statusbar>
<!-- ツールメニューの追加 -->
<menupopup id="menu_ToolsPopup">
<menuitem insertafter="devToolsSeparator" label="Hello, World!"
accesskey="H" oncommand="hello();" />
</menupopup>
<!-- 右クリックメニューの追加 -->
<popup id="contentAreaContextMenu">
<menuitem id="hw_contextMenu" label="Hello, World!"
oncommand="hello();"/>
</popup>
<!-- JavaScriptファイルのインポート -->
<script type="application/x-javascript" src="helloworld.js" />
</overlay>
ここでもidをFirefoxのXULと同じにすることでオーバーレイできるようにしています。Firefoxを再起動するとアドオンが更新されて、ツールメニューと右クリックメニューに"Hello, World!"が追加され、クリックするとメッセージが表示されます。
さて、アドオンを作る段階では上の方法でインストールした方がファイルの変更がすぐ反映されるので便利なんですが、一般公開して配布する場合はxpiファイルにまとめることになります。特にこだわりがなければ、単に「install.rdf」と「chrome.manifest」と「content」「locale」「skin」「default」フォルダをまとめてzip圧縮して、名前を「helloworld.xpi」に変えるだけでOKです(拡張子も含めて。拡張子を表示してない場合はこのページを参考に表示させてください)。