Firefox 3ではじめる拡張機能開発

第2回 機能を実装する(前編)

この記事を読むのに必要な時間:およそ 3 分

前回は機能が無い状態の最小構成でタグヘルパー拡張機能をテストインストールしましたが,今回はいよいよタグヘルパーの機能を実装します。その前に,XUL,クロム,オーバーレイといった拡張機能開発に必要となるいくつかの前提知識について,簡単に説明します。その後,クロムマニフェストとXULのソースファイルを作成し,実際にオーバーレイによってFirefoxの右クリックメニューへメニュー項目を追加します。

なお,第2回完成時点でのソースファイルは,下記ページから入手可能です。

XULアプリケーションを構成する要素技術

Firefox本体や拡張機能のユーザインタフェースは,XULと呼ばれるXML形式のマークアップ言語によって記述されています。また,GUIの動作制御はJavaScriptによって記述し,見た目の細かい調整はCSSによって記述します。

XUL+JavaScript+CSSで構成されるXULアプリケーションは,ちょうどHTML+JavaScript+CSSで構成されるWebアプリケーション(いわゆるダイナミックHTML)のように,多くのWeb開発者に馴染みのある標準技術を駆使して手軽にアプリケーションが開発できます。

クロムと3種類のパッケージ

XULアプリケーションのユーザインタフェース構成部分をひとまとめにクロムと呼びます。クロムは表1に挙げたように3種類のパッケージから構成されます。

表1 クロムを構成する3種類のパッケージ

パッケージの種類概要
content
パッケージ
XULやJavaScriptなどのメインのソースファイルを格納するためのパッケージ
locale
パッケージ
翻訳が可能な言語リソースを格納するためのパッケージ。拡張機能を多言語対応にするためには,言語別にlocaleパッケージを複数持たせる
skin
パッケージ
CSSや各種アイコンの画像などを格納するためのパッケージ。複数のskinパッケージを持たせてOS別の見た目を提供することも可能

クロムURL

拡張機能のパッケージをFirefox本体へ登録して実際に利用可能にするためには,クロムマニフェストと呼ばれるファイルが必要になります。パッケージを登録すると,パッケージ内の各ソースファイルのパスがクロムURLと呼ばれる特殊なURIへマッピングされて実際に利用可能となります。クロムURLは「chrome://<パッケージ名>/<パッケージの種類>/<ソースファイルの相対パス>」のような構文となります。例えば,Firefoxのブラウザウィンドウは「chrome://browser/content/browser.xul」というクロムURLによって表されます。これは,パッケージ名が「browser」のcontentパッケージ内に格納された「browser.xul」というソースファイルに対応していることになります。

クロムURLで表されたソースファイルはUniversalXPConnect権限と呼ばれる特殊な権限が付与されます。これによって,JavaScriptからXPCOMと呼ばれるC++などで実装された機能を利用し,ファイルの読み書きなどの高度な処理が実現できるようになります。拡張機能のクロムパッケージ登録のイメージを,図1に示します。

図1 拡張機能のクロムパッケージ登録

図1 拡張機能のクロムパッケージ登録

XULのオーバーレイ

"Firefoxのメニューバーへ拡張機能独自のメニューを追加する","ツールバーへボタンを追加する","右クリックメニューへメニュー項目を追加する",こういったことは,XULのオーバーレイによって実現できます。XULのオーバーレイとは,あるXULドキュメントへ別のXULドキュメントを合成し,1つのXULドキュメントとして処理する機能です。前述のようにFirefoxのブラウザウィンドウ内へGUI部品を追加するには,「chrome://browser/content/browser.xul」に対して拡張機能独自のGUI部品を記述したXULファイルをオーバーレイする必要があります。

オーバーレイを実施する方法は2通りあります。1つめの方法は,XULのソースファイル内でxul-overlay処理命令を使用することで,別のXULをオーバーレイする方法です。2つめの方法は,クロムマニフェストへオーバーレイの内容を記述する方法です。今回のように拡張機能からFirefoxに対して一方的にオーバーレイを行うには,後者のクロムマニフェストを用いた方法でなければなりません。なお,クロムマニフェストを用いたオーバーレイを,特にクロスパッケージオーバーレイと呼びます。xul-overlay処理命令を用いたオーバーレイと,クロスパッケージオーバーレイのイメージを,図2に示します。

図2 xul-overlay処理命令によるオーバーレイとクロスパッケージオーバーレイ

図2 xul-overlay処理命令によるオーバーレイとクロスパッケージオーバーレイ

ソースファイルのフォルダ構成

ここからはタグヘルパーの開発に話を戻し,contentパッケージおよびクロムマニフェストの作成を行います。はじめに,第2回完成時点での各種ソースファイルのフォルダ構成を前もって図3に示しておきます。また,第2回で新たに作成するソースファイルの概要を表2に示します。

図3 第2回完成時点でのフォルダ構成

図3 第2回完成時点でのフォルダ構成

表2 第2回で新たに作成するソースファイルの概要

ファイル名概要
chrome.manifestクロムマニフェスト
overlay.xulFirefoxのブラウザウィンドウへオーバーレイするXULドキュメント。

著者プロフィール

Gomita

拡張機能開発者。
現在までにScrapBook,FoxAge2ch,Tab Scope,FireGesturesの4つをリリースしている。

URLhttp://www.xuldev.org/

コメント

コメントの記入