アドオンの開発手順

Mozilla Developer Centerのチュートリアル (対象はFirefox 1.5) に従い、ステータスバーに「Hello, World」と表示するアドオンを作成する方法を解説します。

必要なファイルの作成

アドオン用のフォルダの作成

アドオン用のフォルダ「extensions」に「myExtension」という名前のアドオンを作るものとして、全体の構成は以下のようになります。

C:.
+---extensions
|   \---myExtension
|       |   chrome.manifest
|       |   install.rdf
|       |
|       \---chrome
|           \---content
|                   sample.xul

ここでは3つのファイルを作成します。

ファイルの文字エンコーディングは、すべてUTF-8 (BOMなし) とします。

Install Manifestの作成 (rdfファイル)

rdfファイルで、アドオンをインストールするのに必要な情報を記述します。Install Manifests | MDN

<?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>myPackage@example.com</em:id>
    <em:version>1.0</em:version>
    <em:type>2</em:type>

    <!-- Target Application this extension can install into,
         with minimum and maximum supported versions. -->
    <em:targetApplication>
      <Description>
        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
        <em:minVersion>1.0+</em:minVersion>
        <em:maxVersion>3.5.5.*</em:maxVersion>
      </Description>
    </em:targetApplication>

    <!-- Front End MetaData -->
    <em:name>Sample!</em:name>
    <em:description>A sample extension</em:description>
    <em:creator>Your Name Here</em:creator>
    <em:homepageURL>http://example.com/</em:homepageURL>
  </Description>
</RDF>

≫Install Manifestの詳細

ユーザーインターフェイスの作成 (xulファイル)

XULファイルで、ボタンやメニューといったユーザーインターフェイスの要素を定義します。

<?xml version="1.0"?>

<overlay id="sample"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

  <statusbar id="status-bar">
    <statusbarpanel id="my-panel" label="Hello, World" />
  </statusbar>
</overlay>

Chrome Manifestの作成 (manifestファイル)

Chrome (クロム) とはユーザーインターフェイス要素のセットのことであり、Chrome Manifestではその基本的な情報を定義します。Chrome Registration | MDN

アドオンのフォルダのルートに、chrome.manifestという名前でファイルを作成します。そして、つぎのように記述します。

content myPackage chrome/content/
overlay chrome://browser/content/browser.xul chrome://myPackage/content/sample.xul

1行目でmyPackageパッケージのcontentフォルダが、chrome/content/にあることを表しています。そして2行目で、sample.xulをbrowser.xulにオーバーレイするように指示しています。

アドオンのインストール

アドオンのインストール方法は、

  1. アドオン インストールファイル (add-on installation file)
  2. パッケージ (package)

の2つがあります。

アドオン インストールファイルによる方法では、ソースファイルの変更がFirefoxの再起動により反映されるため、開発時に向いています。一方でアドオンを配布するには、パッケージにする必要があります。

アドオン インストールファイルからのインストール

アドオン インストールファイルの作成

新しいテキストファイルを作成し、そこにアドオン用のフォルダのパスを記述します。今回の場合は、

C:\extensions\myExtension\

のようになります。

パスの区切り文字は、スラッシュ (/) ではなくバックスラッシュ (\) とします。

このファイルをプロファイル フォルダのextensionsフォルダに、Install Manifestで指定したアドオンのIDと同じ名前 (ここではmyPackage@example.com) で保存します。

C:.
|
+---Extensions
\---Firefox
    |   profiles.ini
    |
    +---Crash Reports
    \---Profiles <- プロファイル フォルダ
        +---xxxxxxxx.default
        |   |
        |   +---bookmarkbackups
        |   |
        |   +---chrome
        |   |
        |   +---extensions
        |   |   |   myPackage@example.com <- アドオン インストールファイル

アドオンのインストール

アドオン インストールファイルを作成してからFirefoxを起動すると、アドオンのインストールを確認する画面が表示されます。ここで[このインストールを許可する]にチェックを入れて[次へ]をクリックすることで、アドオンがインストールされます。ここでインストールを許可しなくても、アドオンマネージャで[有効化]することで使用できるようになります。

アドオン インストールファイルの記述に誤りがあると、インストールは実行されません。そしてインストールの失敗時には、アドオン インストールファイルは削除されます。

アドオンが実行され、ステータスバー※1 に「Hello, World」と表示されます。

※1 Firefox 4でステータスバーが廃止されたため、それ以降のバージョンではステータスバーには表示されません。しかし代わりに「アドオンバー」に表示されるため、結果を確認するにはそれを表示します。ステータスバーに何が起きたのか? | Firefox ヘルプ

期待通りに動作しないときには、エラーが発生していないかエラーコンソールで確認します。またエラーコンソールにエラーが表示されないときには、Firefoxの設定を確認します。

アドオンの削除

アドオンマネージャで[削除]を実行することで、アドオンを削除できます。そのときにアドオン インストールファイルも削除されます。

または逆に、アドオン インストールファイルを削除してFirefoxを再起動することでもアドオンを削除できます。

パッケージからのインストール

パッケージ化

アドオンを配布するには、それをパッケージにまとめる必要があります。そのためにはアドオン用に作成したフォルダ以下のすべてのファイルを、zipで圧縮します。今回の場合では、次のファイルがそれに該当します。

C:.
|   chrome.manifest
|   install.rdf
|
\---chrome
    \---content
            sample.xul

zipに圧縮したら、そのファイルの拡張子を「.xpi」に変更します。

アドオンのインストール

パッケージからのインストール方法は、

  1. xpiファイルから直接インストール
  2. サーバからxpiファイルをダウンロードしてインストール

の2つがあります。

xpiファイルから直接インストール

xpiファイルから直接インストールするには、そのファイルをブラウザにドラッグ&ドロップするのが簡単です。これは、メニューの【ファイル → ファイルを開く】からxpiファイルを開くのと同義です。

サーバからxpiファイルをダウンロードしてインストール

サーバからインストールするには、まずxpiファイルをサーバにアップロードします。そしてそのファイルのURLをブラウザから開きます。なおサーバからインストールするには、あらかじめサーバが設定されている必要があります。

修正したソースの動作確認

修正したソースの種類とそのソースの挙動や配置場所によって、変更を反映させる方法が異なります。

対象 変更の反映方法
ファイルの種類 挙動、配置場所
JavaScriptやCSSなど 新しいウィンドウを開くXULから参照される ウィンドウを、開き直す
XUL ※1 新しいウィンドウを開く ※2
サイドバーとして表示する サイドバーを、開き直す
他のウィンドウへオーバーレイされる オーバーレイ先のXULを、再読み込みする
ブラウザにオーバーレイされる Firefoxを再起動する
properties ---
chrome.manifest ---
既定の設定ファイル defaults\preferencesフォルダ内
XPCOMコンポーネント componentsフォルダ内 プロファイル フォルダ内のcompreg.datとxpti.datを削除し、Firefoxを再起動する
install.rdf --- アドオンを再インストールする
コラム：修正したソースファイルの動作を確認するには - ５章：Firefox拡張機能を作ってみよう！ 開発環境の準備 - Firefox拡張機能開発チュートリアル (XHTML)

※1 XULキャッシュが有効になっていると、XULを修正してもそれが反映されません。このキャッシュは、ユーザー設定の[nglayout.debug.disable_xul_cache]をtrueにすることで無効化できます。

※2 このことからXULやそれに伴うスクリプトは、そのXULを新しいウィンドウとして開くと簡単に動作確認を行えます。

参考

Firefoxアドオンの情報サイトから、まとめて検索