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

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

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

クロムマニフェストの作成

まず,クロムマニフェストの作成から始めます。クロムマニフェストはタグヘルパーの作業フォルダ直下へ配置しますが,第1回のテストインストールを実施すると,自動的に空の内容のクロムマニフェストファイルが生成されているはずです。もし生成されていない場合はファイルを作成してください。次に,クロムマニフェストをテキストエディタで開き,リスト1の内容を記述します。

リスト1 クロムマニフェストへの記述内容

content  taghelper  content/
overlay  chrome://browser/content/browser.xul  chrome://taghelper/content/overlay.xul

リスト1の1行目がcontentパッケージを登録するための宣言です。パッケージ名が「taghelper」⁠contentパッケージ内のソースファイルを格納したフォルダへの相対パス(クロムマニフェストを基点とする)「content/」となります注1)⁠これによって,contentパッケージ内の「overlay.xul」は,⁠chrome://taghelper/content/overlay.xul」というクロムURLによってアクセス可能となります。

リスト1の2行目がクロスパッケージオーバーレイの宣言です。クロムURLが「chrome://browser/content/browser.xul」で表されるFirefoxのブラウザウィンドウへ,タグヘルパーのXULドキュメント「chrome://taghelper/content/overlay.xul」をオーバーレイします。

注1)
今回は簡便のためcontentパッケージのフォルダパスを「content/」としていますが,一般的にはフォルダパスを「content/taghelper/」とします。

右クリックメニューの追加

次に,contentパッケージのソースファイルを格納するためのフォルダ「content」と,FirefoxのブラウザウィンドウへオーバーレイするXULドキュメントである,⁠overlay.xul」を作成します。⁠overlay.xul」をテキストエディタで開き,リスト2の内容を記述します。

リスト2 ⁠overlay.xul」への記述内容

<?xml version="1.0"?>

<overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <script type="application/x-javascript" src="chrome://taghelper/content/overlay.js" />
  <popup id="contentAreaContextMenu">
    <menuitem id="taghelper-menu"
              label="Generate Tags from Selection"
              oncommand="TagHelper.generateTags();" />
  </popup>
</overlay>

リスト2のmenuitem要素が,今回追加するタグヘルパーのメニュー項目です。label属性によってメニュー項目の表示文言を指定し,oncommand属性によってメニュー項目を選択した際に実行するJavaScriptを指定しています。menuitem要素の親であるpopup要素に注目してください。これはFirefoxの右クリックメニューに対応するXUL要素です。クロスパッケージオーバーレイによってGUIの部品を追加する際は,このようにオーバーレイ先XULドキュメント中のどの要素に対して追加するかを明示する必要があります。また,追加する先の要素(今回の場合,idが"contentAreaContextMenu"のpopup要素)を,マージポイントと呼びます。

マージポイントがどの要素であるかを調べるには,拡張機能「DOM Inspector」注2が有効です。DOM Inspectorを起動し,クロムURL「chrome://browser/content/browser.xul」を入力すると,ブラウザウィンドウおよびそのXULドキュメントのツリー構造などが表示されます。通常は,ウィンドウ左上にある矢印マークのアイコンをクリックしてからブラウザウィンドウ中の任意の要素をクリックし,その要素のidや属性などを調べます。実際に,メニューバーの「ツール」メニューへ新しいメニュー項目を追加する際に,マージポイントを探索している様子を図4に示します。ただし,今回は右クリックメニューであるため,この方法では調べることができません。

図4 DOM Inspectorによるマージポイントの探索

図4 DOM Inspectorによるマージポイントの探索

なお,今回は右クリックメニューの最下部へメニュー項目を追加しましたが,右クリックメニューの特定の位置へメニュー項目を挿入するには,menuitem要素へinsertbeforeまたはinsertafter属性を追加し,メニュー項目を挿入したい位置の前後にある要素のidを指定します。

注2)
DOM Inspectorは下記URLからインストール可能です。
https://addons.mozilla.org/ja/firefox/addon/6622

動作確認

ここまでできたら,いったん動作確認します。今回のようにクロムマニフェストを追加または変更した場合,反映させるためにはFirefoxを再起動する必要があります。Firefoxを再起動後,適当なWebページ上で右クリックし,図5のように「Generate Tags from Selection」というメニュー項目が追加されていることを確認してください。

図5 第2回の完成イメージ

図5 第2回の完成イメージ

まとめと次回の予告

今回は,XULのオーバーレイによってFirefoxの右クリックメニューへタグヘルパーのメニュー項目を追加しました。とはいえ,まだメニュー項目をクリックしても何も起きません。次回は,メニュー項目をクリックしたときの動作をJavaScriptで実装していきます。

著者プロフィール

Gomita

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

URLhttp://www.xuldev.org/