ファイヤープロジェクト
オーバレイ
2005-03-25T00:35+09:00   matsu
複数XULファイルで要素を共有する仕組みであるオーバレイについて調査した. さらにオーバレイを使用してFirefoxメニューから拡張機能を呼び出すサンプルを作成した.
比較的大規模複雑なXULアプリケーションになってくると,複数のウィンドウやダイアログで構成されるようになる. そしてそれぞれのウィンドウやダイアログは別々のXULファイルに記述される. 一方で,各XULファイルで共有したいあるXULファイルの要素がある. 例えば,Firefox拡張機能にはインストールされるとFirefoxメニューの「ツール」内にエントリが追加されるものがある. これは拡張機能側のxpiファイルに記述された要素overlayがFirefoxメインウィンドウの要素の子として登録された結果である(※). オーバレイとはあるXULファイルの共有要素のようなものである. 本頁ではオーバレイを使用して,Firefox拡張のエントリをFirefoxメニューの「ツール」に追加するサンプルを作成することを目標とする.
※ 「要素」と表現している点に注意. オーバレイは見た目のコンポーネント構成のみならず,キーボードショートカットなどにも有効らしい.
例によって,今まで作成してきた電卓プログラムにメニューバーを作成し,そのメニューのエントリをオーバレイを使用して読み込むサンプルを作成した. まず,共有要素は要素overlayをルート要素とするXULファイル(credit.xul)に記述する.
ポイントを以下に示す.
  • ルート要素がoverlay
  • ルート要素overlayの子要素が属性idに値をもつ(ルート要素にも記述したが,こちらは使用しない).
  • 共有される要素はルート要素overlayの内容に記述される
次にこの共有要素を使用する側のXULファイルを以下にしめす.
やはりポイントを以下に示す.
  • ルート要素内にオーバレイの読み込み宣言がある.
    <?xul-overlay href="chrome://mycalculator/content/credit.xul"?>
    
    hrefの値はcredit.xulのchromeURLである. 今回これはmycalculator.xulと同じディレクトリとした.
  • overlay.xulの要素overlayの直下と同じ要素(menu)を同じidで記述している.
      <menu id="overlay-credit" label="overlay-menu"/>
    
これで,この要素menuがoverlay.xulの要素menuの内容で上書かれる. これによって,mycalculator.xulを起動すると,メニューバーにはcredit.xulの記述内容が反映されている.
前回電卓のサンプルXULアプリケーションをFirefox拡張機能とした. 次にオーバレイを使用してFirefoxのメニューバーの「ツール」からこの拡張機能を起動するようにする. これ. 私はちょっと混乱したので,明示するが,自作するのがオーバレイ,共有される側である. 前節に記述したオーバレイの仕組みを踏まえると,課題を達成するには以下の情報が必要である.
共通要素に指定する属性idの値
Firefoxではメニューバーの「ツール」部分から,どういったidでオーバレイを読み込んでいるか知る必要がある. この値を自作オーバレイの直下の要素の属性idの値に指定する.
Firefoxへの自作オーバレイの通知方法
Firefox作者は私がサンプルを作成したことなど知らない. だから,名指しで私のサンプルをオーバレイとして読み込む記述があるはずがない. ので,何らかの通知方法があるはずである.
共通要素に指定する属性idの値を知るには,二通りの方法がある.
Firefoxのメニューバーの「ツール」部分から起動する拡張機能を解体して,オーバレイ部分を探す.
比較的簡単な方法であるが,別の場所から読み込ませたい場合(例えばメニューバーの「ヘルプ」部分),別途拡張機能を探す必要がある. 手順としては大体以下のようになる
$jar xvf 参考拡張機能.xpi
$grep -r overlay ./
Firefoxを解体して読み込ませたい部分の要素とその属性idの値を探す.
上より若干難しい気がするが,オーバレイをいろんな場所に適用できる,応用の効く方法である. 手順は大体以下のようになる.
$ cp FIREFOX_TOP/chrome/browser.jar .
$ jar xvf browser.jar
$ less content/browser/browser.xul 
lessなどで開いた後は,menuなどをキーワードに探す.
Firefoxへの自作オーバレイの通知方法は,やはりcontents.rdfである. 以下に電卓サンプル用のcontents.rdfを示す.
まずoverlayを読み込ませるXULファイルを指定.ここではborwser.xulとnavigator.xulを指定した.
  <RDF:Seq about="urn:mozilla:overlays">
    <RDF:li resource="chrome://browser/content/browser.xul"/>
    <RDF:li resource="chrome://navigator/content/navigator.xul"/>
  </RDF:Seq>
次に,それぞれが読み込むoverlayをそれぞれ指定.
  
    chrome://mycalculator/content/menu.xul
  
  
    chrome://mycalculator/content/menu.xul
  
どちらも先程作成したmenu.xulである. あとは今までと同じである. ただ一点,要素RDF:Descirptionの属性chrome:extensionの設定が追加されている. この設定により,サンプル拡張機能をインストール後,以下のファイルが自動作成され,これをFirefoxが読み込んでツールの「メニューに」希望するものが表示される.
$> cat FIREFOX_PROFILE/chrome/overlayinfo/browser/content/overlays.rdf 
<?xml version="1.0"?>
<RDF:RDF xmlns:c="http://www.mozilla.org/rdf/chrome#"
         xmlns:NC="http://home.netscape.com/NC-rdf#"
         xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
  <RDF:Seq RDF:about="chrome://browser/content/browser.xul">
    <RDF:li>chrome://mycalculator/content/menu.xul</RDF:li>
  </RDF:Seq>
</RDF:RDF>
matsu(C)
Since 2002
Mail to matsu