はじめに
Internet Explorer（以下、IE）が主流のブラウザ市場の中で、Firefoxはシェアを伸ばしています。Firefoxがシェアを拡大している理由の一つに、拡張機能の存在があるでしょう。非常に多くの拡張機能が世界中の人々によって開発されています。これらの拡張機能を組み合わせることによって、Firefoxを自分の好みのブラウザにカスタマイズできるのです。
とはいえ、他人が作った拡張機能がぴったり自分に合っているとは限りません。幸いなことにFirefoxの拡張機能は、XML言語の一種でUI部分を規定するXUL、動作を規定するJavaScript、そしていくつかの設定ファイルから構成されています。これらはいずれもごくありふれた開発言語であり、特別な知識は必要ありません。しかも、エディタとFirefoxがあれば高価な開発環境をそろえる必要もありません。他人の作った拡張機能を自分の好きなように改造することが簡単にできるのです。
しかし、問題もあります。残念ながら拡張機能の開発に関する情報は、まだまだ不足しているのです。ごく簡単なサンプルを作成するチュートリアルやリファレンス（英文）はありますが、これでは拡張機能をいじりたくても二の足を踏んでしまっている方も多いのではないでしょうか。
本記事では、『不完全なHTMLを動的にタッチアップ』でも扱っているTouchUpWeb拡張機能を題材に、拡張機能の仕組みを紹介します。実際に動作している拡張機能をベースにしていますので、仕組みや開発のコツが理解しやすいことと思います。
対象読者
Firefoxの拡張機能をいじりたい、あるいは、新しく開発したいと考えている方。
なお、本記事では拡張機能開発の基礎（xpiファイルの構成やHello World!を表示する拡張機能）についての知識をお持ちであることを前提としています。これらの情報は、Firefoxまとめサイトによくまとまっています。
必要な環境
Firefox 1.5以上が動作する環境であればプラットフォームは問いません。拡張機能はエディタがあれば開発できますので、開発環境も特に問いません。
TouchUpWeb拡張機能とは
解説に入る前に、まずTouchUpWeb拡張機能の簡単な説明をしましょう。Firefoxでネットサーフィンをしていると、時折ページのデザインが崩れたり、正常に動作しないページに遭遇することがあります。多くの場合、これらのページはIEでの閲覧を前提として作られています。つまり、Firefoxなど他のブラウザでの表示や動作のチェックを行っていないのです。しかし、ブラウザの種類によってHTMLやCSSなどの解釈は異なるため、IEではデザイナが意図したとおりに見えても、他のブラウザで見ると表示が崩れてしまうことがあるのです。
TouchUpWebシステムはこのような問題を修復する仕組みであり、独立行政法人 情報処理推進機構（IPA）の2005年度下期オープンソースソフトウェア活用基盤整備事業の一環として開発されました。システムは、フィルタ（TouchUpWebプロジェクトでは修正スクリプト、あるいは、TouchUpスクリプトと呼んでいます）を使ってブラウザ側で問題を修復するTouchUpWeb拡張機能と、修復するためのフィルタを配信するTouchUpWebサーバから構成されています。動作の仕組みや画面イメージなど、より詳しい情報はTouchUpWebのプロジェクトサイトをご覧ください。
レポート機能の概要
TouchUpWeb拡張機能の仕組みをすべて解説するのは困難ですので、本記事ではTouchUpWeb拡張機能のうち、レポート作成機能に焦点をあてて解説します。レポート作成機能とは、次のような機能です。
TouchUpWeb拡張機能は、ユーザーの求めに応じてTouchUpWebサーバへ修正スクリプトの有無を問い合わせ、ウェブページへ修正スクリプトを適用します。これらの処理はウィザード形式で進められます。修正スクリプトを適用後、ウィザードは下図のようにレポートを表示するかを尋ねてきます。
ここで［詳細レポート表示］ボタンをクリックすると、現在のウェブページに適用された修正スクリプトの内容や、HTMLソースに対して施された修正状況が表示されます。
修正した内容は下図のように見やすく色分けして表示されます（赤字がオリジナルのソース、青字が修正後のソース）。この機能は修正スクリプトの開発者やウェブサイトの作成者に対して有効です。たとえば、修正スクリプトの開発者は自分の作成したスクリプトが正しく動作していることを確認できますし、ウェブサイトの作成者は自分のウェブサイトのどこに問題があるかがわかるのです。
TouchUpWeb拡張機能のディレクトリ構成
それではさっそくTouchUpWeb拡張機能の構成を見てみましょう。
TouchUpWebのサイトから拡張機能（touchupweb-version.xpi）をダウンロードしてください。xpiファイルはzip形式で圧縮されていますので、zip形式の展開ツールを使って展開できます。すると、次のような構成になっていることが分かります（※冒頭の「+」はディレクトリ、「-」はファイルを表し、一部のファイルは省略しています）。
| ディレクトリ/ファイル名 | 説明 |
| + chrome | |
| + content | |
| - installer-1.js | 修正スクリプトをサーバからインストールするスクリプト |
| - installer-2.js | 同上 |
| - options.js | オプション設定用のスクリプト |
| - options.xul | オプション設定ダイアログ |
| - overlay.js | Firefoxのメニュー等から各処理を呼び出すスクリプト |
| - overlay.xul | Firefoxに追加するメニューなどのUIの設定 |
| - wizard.js | ウィザードの処理を行うスクリプト |
| - wizard.xul | ウィザードのUIの設定 |
| + diff | |
| - diff.js | 2つのファイルの差分を作成するスクリプト |
| - report.js | レポートを作成するスクリプト |
| - template.html | レポートの雛形 |
| - locale | UIなどに表示する文字列を指定したファイル |
| - skin | アイコンなどの画像ファイル |
| - chrome.manifest | インストール用の設定ファイル |
| - install.rdf | 同上 |
| + META-INF |
拡張機能の核となる部分は「chrome/content」以下に格納され、レポート作成に関する部分は「chrome/content/diff」以下にまとめられています。
レポート機能の解説
レポート機能は主に以下の3つの部分から構成されています。
- ウィザードからレポート機能を呼び出すための設定
- レポートのテンプレートの読み込み
- 差分の作成とレポート出力処理
では、これらの処理を順番に見ていきましょう。
