install.rdf ファイル
前回のセクションでは、Hello World 拡張の内容を見ました。今回は、そのファイルとコードについて探ります。install.rdf ファイルから見ていきましょう。これを適当なテキストエディタで開いてください。
このファイルは、RDF と呼ばれる XML 風の特殊な書式で書かれています。RDF は、Firefox 本体のストレージ機構に使用されていますが、現在は、簡単なデータベースシステムへの置き換えが進んでいます。これらのストレージシステムについては後のセクションで取り上げます。
それでは、このファイルの重要な部分を見ていきましょう。
<em:id>[email protected]</em:id>
これは、拡張機能の固有の識別子です。Firefox が各拡張機能を区別できるように、それぞれに固有の ID を割り当てる必要があります。
アドオンの ID には 2 通りの標準があります。一つは、Hello World の例でも使用されている、次のメールアドレスのような書式です: <project-name>@<yourdomain>。 もう一つの標準は、生成された UUID 文字列を使用することです。これは、非常に重複することのないランダムな文字列です。UNIX ベースのシステムには、UUID を生成する uuidgen と呼ばれるコマンドラインツールがあります。他のプラットフォーム用の UUID を生成するツールもあります。囲み括弧は、実際に使用されている表記法です。ID が他に使用されていない固有のものであれば、どのような書式でも使用可能です。
<em:name>XUL School Hello World</em:name>
<em:description>Welcome to XUL School!</em:description>
<em:version>0.1</em:version>
<em:creator>Appcoast</em:creator>
<em:homepageURL>https://developer.mozilla.org/ja/XUL/School_tutorial</em:homepageURL
これは、拡張機能がインストールされる前と後に表示されるデータです。アドオンマネージャで見ることもできます。ホームページの URL は、拡張機能を右クリックして [サイトを表示] を選択すると開くことができます。この他にも、貢献者や翻訳者の情報など多くのタグを追加することができます。install.rdf ファイルの仕様書にすべての詳細があります。
拡張機能は、複数の言語に翻訳できるので、拡張機能の説明や名前まで翻訳が必要になることがあります。Firefox 3 以降では、ローカライズ (言語に合わせて翻訳) された説明と名前を次のコードように追加します:
<em:localized>
<Description>
<em:locale>es-ES</em:locale>
<em:name>XUL School Hola Mundo</em:name>
<em:description>Bienvenido a XUL School!</em:description>
</Description>
</em:localized>
es-ES ロケールの文字列は、スペイン (国コード: ES) のスペイン語 (言語コード: es) ロケールであることを示しています。必要に応じて <em:localized> セクションを追加してください。Firefox 2 では、このファイルのローカライズは少々複雑でした。ローカライズについては後のセクションで取り上げます。
<em:type>2</em:type>
これは、インストールされるアドオンの種類が拡張機能であることを指定しています。他の type の値については、install.rdf の仕様を参照してください。
<em:targetApplication>
<Description>
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
<em:minVersion>3.0</em:minVersion>
<em:maxVersion>3.6.*</em:maxVersion>
</Description>
</em:targetApplication>
このノードは、拡張機能のターゲットアプリケーションが Firefox、ターゲットバージョンが 3.0 から 3.6.* であることを指定しています。UUID は Firefox 固有の ID です。Thunderbird や SeaMonkey など他の Mozilla アプリケーションおよび Mozilla ベースのアプリケーションにも固有の ID があります。拡張機能を複数のアプリケーションとバージョンで動作させることもできます。例えば、Firefox の拡張機能を作った場合、少し書き加えるだけで Firefox とよく似た機能や UI を持つ SeaMonkey でも動作させることができるでしょう。
minVersion および maxVersion は、拡張機能をがインストールできるバージョンの範囲を指定します。バージョンの表記については、Toolkit のバージョン形式を参照してください。アプリケーションやバージョン範囲がマッチしない場合はインストールできません。また、既にインストールされたアドオンは無効化されます。ユーザは、アプリケーションの設定を変更するか Add-on Compatibility Reporter などのアドオンをインストールすることでバージョンチェックを無効にできます。
上記が Firefox や他の Mozilla アプリケーションにアドオンをインストールするために必要な情報のすべてです。アドオンにエラーや足りない情報があると、インストール処理に失敗したり拡張機能が無効化された状態でインストールされる原因になります。
chrome.manifest ファイル
chrome (クロム) とは、アプリケーションウィンドウのコンテンツ領域の外側を構成するユーザインタフェース要素のセットです。例えば、ツールバーやメニューバー、プログレスバー、ウィンドウのタイトルバーといった要素は、すべて chrome で構成された典型的な部分になります。
これは、Chrome Registration からの引用です。
言い換えれば、chrome は、あなたが Firefox に見ているものすべてです。すべての Firefox ウィンドウには、(1) chrome で構成された部分と (2) Firefox のタブにウェブページを表示するコンテンツ領域の 2 つの部分が見えています。アドオンマネージャやダウンロードウィンドウなどのウィンドウは純粋な chrome だけで構成されています。Hello World の例のように、拡張機能のほとんどのコードは chrome フォルダ内にあります。
chrome ファイルはすべて、拡張機能名が付いた JAR アーカイブ内にパッケージ化されています。chrome ファイルを一つのパッケージにまとめる必要はありませんが、パフォーマンス上の理由から、このようにパッケージ化することが推奨されています。
展開した拡張機能のディレクトリ構造で見たとおり、chrome には、content, locale, skin の 3 つのセクションがあります。ほとんどの拡張機能では、これら 3 つとも必要です。chrome.manifest ファイルを (適当なテキストエディタで) 開くと、これらのディレクトリが含まれていることが分かります:
content xulschoolhello jar:chrome/xulschoolhello.jar!/content/ skin xulschoolhello classic/1.0 jar:chrome/xulschoolhello.jar!/skin/ locale xulschoolhello en-US jar:chrome/xulschoolhello.jar!/locale/en-US/
chrome.manifest ファイルは、Firefox に chrome ファイルのどこを探せばよいかを伝えるものです。上記のテキストは表のようにスペースを空けていますが、ファイルが読み込まれる時は連続したスペースが無視されるため、このように記述する必要はありません。
行の先頭の単語は、Firefox に何が宣言されているかを伝えます (content, skin, locale 他)。二番目の単語はパッケージ名です。これは説明の必要はないでしょう。skin や locale の場合は、これらの適用対象を指定する三番目の値があります。skin と locale のエントリは、異なるテーマや言語ごとに複数記述できます。最も一般的な例としては、一つの global skin エントリに classic/1.0、言語ごとに一つの locale エントリを記述します。行の最後は、ファイルの場所を指定します。jar: スキームについて補足すると、これは、Firefox に JAR ファイル内の正しいパスからファイルを読み込むように伝えるものです。拡張機能の chrome ディレクトリをパッケージ化しない場合は、ファイルへのパスを chrome/content/ のように変更するだけです。
chrome.manifest ファイルのエントリには、他にもいくつかのオプションを記述することができます。詳しくは、Chrome Registration ページを参照してください。注意すべきこととして、OS 特有のエントリを記述することができます。これは、Firefox 3 以降のブラウザの外観が各オペレーティングシステムで異なるため、特に重要になります。メジャーなシステムに合わせて拡張機能を異なる外観にする必要がある場合は、次のように記述します:
content xulschoolhello jar:chrome/xulschoolhello.jar!/content/ skin xulschoolhello classic/1.0 jar:chrome/xulschoolhello.jar!/skin/unix/ skin xulschoolhello classic/1.0 jar:chrome/xulschoolhello.jar!/skin/mac/ os=Darwin skin xulschoolhello classic/1.0 jar:chrome/xulschoolhello.jar!/skin/win/ os=WinNT locale xulschoolhello en-US jar:chrome/xulschoolhello.jar!/locale/en-US/
この方法は、Windows および Mac OS X, Linux 用のスキンをそれぞれのディレクトリに分けて定義しています。他のほとんどのシステムは UNIX ベースのため、"unix" スキンは、フラグなしのデフォルトスキンとして定義します。
chrome
先に述べた通り、chrome は、content, locale, skin の 3 つのセクションで構成されています。content は、ユーザインタフェース (XUL) とスクリプト (JS) のファイルを保持している最も重要なセクションです。skin セクションには、UI のルック＆フィールを定義するファイル (ウェブページのように CSS と画像を使用します) があります。最後に、locale セクションは、拡張機能内で使用されるすべてのテキストを DTD ファイルと properties ファイルに保持しています。このように分けることで、拡張機能のプログラム本体のコードを書き換えることなく、他の開発者が skin を置き換えるテーマを作成したり、翻訳者が別の言語にローカライズしたりできます。この仕組みが Firefox の拡張機能にすばらしい柔軟性をもたらしています。
chrome ファイルへのアクセスは、chrome プロトコルを通します。chrome URI は、次のように定義します:
chrome://packagename/section/path/to/file
例えば、拡張機能内の browserOverlay.xul ファイルへアクセスしたい場合、chrome URI は、chrome://xulschoolhello/content/browserOverlay.xul になります。content 内に多くのファイルがあり、それらをサブディレクトリに分けたい時は、chrome.manifest を変更する必要はありません。必要なことは、URI の content の後に正しいパスを追加するだけです。skin と locale ファイルも同じ方法でアクセスできます。この時、パスに skin 名や locale 名を指定する必要はありません。同様に、Hello World 拡張内の DTD ファイルへアクセスする場合の chrome のパスは、chrome://xulschoolhello/locale/browserOverlay.dtd です。求める locale は Firefox が知っています。
ここで、おもしろい実験をしましょう。Firefox の新しいタブを開き、ロケーションバーに chrome://mozapps/content/downloads/downloads.xul と入力して Enter キーを押してください。驚きましたか？ Firefox のタブ内にダウンロードウィンドウが開かれたでしょう！ ロケーションバーに chrome ファイルの URI を入力するだけでアクセスすることができます。これは、Firefox の一部、または他の拡張機能やあなたの拡張機能のスクリプトファイルを調べたいときに役立つ手軽な方法です。これらのファイルのほとんどはテキストファイルとして開かれますが、XUL ファイルだけは、通常のウィンドウに表示されるように実行され、表示されます。
content
content ディレクトリには 2 個のファイルがあります。はじめに、XUL ファイルから見ていきましょう。
XUL ファイルは、Firefox と拡張機能のユーザインタフェース要素を定義する XML ファイルです。XUL は HTML を元にしているため、両者に多くの似たところがあることが分かるでしょう。しかしながら、XUL は HTML よりも多くの点で改善されており、HTML が策定される過程で起こった多くのミスから学んでいます。XUL は、HTML よりもリッチで対話的なインタフェースを作成できます。また、少なくとも XUL のほうが簡単に作成できます。
XUL ファイルは通常、ウィンドウとオーバーレイのどちらか片方を定義します。先ほど開いた downloads.xul ファイルのコードは、ダウンロードウィンドウを定義しています。Hello World 拡張に含まれる XUL ファイルはオーバーレイです。オーバーレイは、既存のウィンドウを拡張し、新しい要素を追加したり既存の要素を置き換えたりします。chrome.manifest ファイルで読み飛ばした行は、この XUL ファイルがメインのブラウザウィンドウのオーバーレイであることを示しています:
overlay chrome://browser/content/browser.xul chrome://xulschoolhello/content/browserOverlay.xul
この行によって、Firefox が browserOverlay.xul のコンテンツをメインのブラウザウィンドウ (browser.xul) のオーバーレイとして適用する必要があることを知ります。Firefox 内のどのウィンドウやダイアログに対してもオーバーレイを宣言することができますが、メインのブラウザウィンドウにオーバーレイを適用する方法が最も一般的です。
それでは、XUL ファイルの内容を見ていきましょう。最初の数行は、後で取り上げる skin と locale に関連する部分なので飛ばします。
<overlay id="xulschoolhello-browser-overlay" xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
このファイルのルート要素は overlay です。他の XUL ドキュメントは window タグや dialog タグを使用しています。この要素は、XUL 内の他の要素と同様にユニークな id を持っています。2 番目の属性は、常に XUL ルート要素内で定義される名前空間です。この名前空間は、このノード以下のすべての子ノードが XUL であることを示しています。XUL に加えて HTML や SVG など、異なる種類のコンテンツをこのノード以下に記述する場合のみ、名前空間の宣言を変更する必要があります。
<script type="application/x-javascript" src="chrome://xulschoolhello/content/browserOverlay.js" />
HTML のように、ここでは外部の JavaScript スクリプトファイルを XUL ファイルに含めています。script 要素は、XUL ファイル内に必要なだけ複数記述することができます。スクリプトファイル内のコードについては、後で見ることにします。
locale セクションで取り上げる数行のコードは飛ばして、content の最も重要な部分へ移ります:
<menubar id="main-menubar">
<menu id="xulschoolhello-hello-menu" label="&xulschoolhello.hello.label;"
accesskey="&xulschoolhello.helloMenu.accesskey;" insertafter="helpMenu">
<menupopup>
<menuitem id="xulschoolhello-hello-menu-item"
label="&xulschoolhello.hello.label;"
accesskey="&xulschoolhello.helloItem.accesskey;"
oncommand="XULSchoolChrome.BrowserOverlay.sayHello(event);" />
</menupopup>
</menu>
</menubar>
これは、ブラウザウィンドウに Hello World メニューを追加するコードです。このコードを書くには、browser.xul 内の XUL コードの知識が必要です。まず、メインメニューの id が main-menubar であることを知る必要があります。ここでは、独自のメニューを追加し、それをメインメニューバーのヘルプメニューのすぐ後に追加することを Firefox に知らせています。次の属性でメニューの追加位置を指定しています:
insertafter="helpMenu"
helpMenu は、ブラウザのメインメニュー内のヘルプメニューに相当する、メニュー要素の id です。ブラウザ要素の id を見つける方法は後で取り上げます。ここでは、Hello World メニューを構成している要素を見ていきましょう。
menubar 要素は、アプリケーションウィンドウの上部に表示されるメニューバーを表します。メインの Firefox ウィンドウや他のウィンドウにも、この要素が使用されています。また、追加の拡張機能のウィンドウにもメニューバーがある場合があります。
ここでは、Hello World メニューをメニューバーの "ルート" に追加したので、とても簡単に見つけられたでしょう。しかし、この方法は勧められません。すべての拡張機能がウィンドウ上部のメニューバーに追加したところを想像してみてください。少数の拡張機能が、飛行機のコックピットの計器類のように、メニューを拡張機能のオプションで満たしてしまうでしょう。拡張機能のメニューを置く推奨される場所は、ツール メニュー以下です。では、実際のコードを次のように変更しましょう:
<menupopup id="menu_ToolsPopup"> <menu id="xulschoolhello-hello-menu" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.helloMenu.accesskey;" insertafter="javascriptConsole,devToolsSeparator"> <menupopup> <menuitem id="xulschoolhello-hello-menu-item" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.helloItem.accesskey;" oncommand="XULSchoolChrome.BrowserOverlay.sayHello(event);" /> </menupopup> </menu> </menupopup>
XUL ツリーの深いところにあるメニューにオーバーレイを適用しましたが、これは問題になりません。必要なものはオーバーレイを適用する要素の id だけです。上記のコードは、ツール menu 要素内の menupopup 要素の id を指定しています。insertafter 属性は、ツールメニューのエラーコンソールの下にメニューを追加することを Firefox に知らせています。この場所は、拡張機能のエチケットのページで推奨されています。メニューについて、詳しくはチュートリアルの後の章で取り上げます。ここでは、次の行に焦点を当てましょう:
oncommand="XULSchoolChrome.BrowserOverlay.sayHello(event);"
この属性は、イベントハンドラを定義しています。command イベントは、ほとんどの UI 要素のメインの動作に相当するため、Firefox で最も頻繁に使われます。属性の値は、関数を呼び出す JavaScript コードです。この関数は、script タグで XUL ファイルに含まれた JS ファイル内で定義されています。この JavaScript の関数は、ユーザが Hello World メニューのメニュー項目をクリックすると一度だけ呼び出されます。すべてのイベントハンドラは event という名前の特別なオブジェクトを定義しており、関数へ渡す引数としてよく使用されます。イベントハンドラについては、後で詳しく説明します。
次に、JavaScript ファイルへ進みます。このファイルでイベントが起こった時に何が行われているかを見ていきましょう。
/**
* XULSchoolChrome namespace.
*/
if ("undefined" == typeof(XULSchoolChrome)) {
var XULSchoolChrome = {};
};
これは、XULSchoolChrome 名前空間を定義しています。JavaScript で定義したすべてのオブジェクトや変数はグローバルです。つまり、Firefox や他の拡張機能内のスクリプトが、このファイルの変数へアクセスできてしまうことを意味しています。また、MenuHandler や他の一般的な名前でオブジェクトを定義すると、それらが既存のオブジェクトと競合してしまうことも意味しています。ここでは、一つのグローバルオブジェクト XULSchoolChrome を定義しています。このオブジェクトの中に私たちのすべてのオブジェクトを収めることで、他の拡張機能によって複製されたり上書きされたりすることが起こらなくなります。
このコードについて詳しくは、typeof 演算子のページをお読みください。JavaScript や一部の構文に詳しくない方に説明すると、{} に初期化することと new Object() に初期化することは同等です。
/**
* Controls the browser overlay for the Hello World extension.
*/
XULSchoolChrome.BrowserOverlay = {
最後の BrowserOverlay は私たちのオブジェクトです。このように冗長な名前を付けて参照する方法は落ち着かないかもしれませんが、そうするだけの価値があります。
sayHello : function(aEvent) {
let stringBundle = document.getElementById("xulschoolhello-string-bundle");
let message = stringBundle.getString("xulschoolhello.greeting.label");
window.alert(message);
}
ようやく、関数の宣言まできました。この 3 行のコードは、動作に必要なコードのすべてです。関数の中で宣言された最初の行は、overlay で定義された stringbundle 要素を保持する変数です。この変数は、var に似た let を使用していますが、var よりもスコープの範囲が制限されています。詳しくは、let 宣言のページをお読みください。Firefox の JavaScript に追加された比較的新しいものに注目するのはよいことですが、とても古いバージョンと互換性のある拡張機能を作る場合は、var を使用してください。
正規の JavaScript と同じく、XUL ドキュメントを操作するために DOM (Document Object Model) を使用することができます。初めに、ドキュメント内の stringbundle 要素への参照を取得します。これは、ローカライズされた文字列を、その文字列を識別する "キー" を与えるだけで動的に取り扱うことができる特別な要素です。2 行目で、bundle 要素の getString メソッドを呼び出し、画面に表示されるローカライズされたメッセージを取得しています。次に、HTML ドキュメントで行うのと同じように、window.alert 関数をメッセージ付きで呼び出します。
locale
ロケールファイルには DTD と properties の 2 種類があり、この例では両方とも使用しています。DTD は、XUL 内のテキストを表示する方法として最も効率的な方法です。可能な限り、これを使用してください。しかし、動的に生成されるテキストには使用できないなど融通が利かない場合もあるので、ローカライズされた文字列を取得する代わりの方法が必要です。
メニューのコードに戻ります。次のような属性に気が付くでしょう:
label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.helloItem.accesskey;"
これらの属性は、メニューに表示されるテキストを定義している文字列キーです。この文字列キーは DTD ファイル (browserOverlay.dtd) で定義されています。DTD ファイルは、次のコードで XUL ファイルに含まれていました:
<!DOCTYPE overlay SYSTEM "chrome://xulschoolhello/locale/browserOverlay.dtd" >
DTD ファイルでは、キーとローカライズされた文字列が関連付けられているのが分かるでしょう:
<!ENTITY xulschoolhello.hello.label "Hello World!"> <!ENTITY xulschoolhello.helloMenu.accesskey "l"> <!ENTITY xulschoolhello.helloItem.accesskey "H">
XUL ファイルでは文字列キーが & と ; で囲まれているのに対して、DTD ファイルではキーだけが指定されていることに注意してください。これを守らないと、おかしなパースエラーが起こり、ローカライズが正しく行われません。
アクセスキーは、キーボードだけでメニューをすばやく操作できるようにするためのショートカットです。これらは、視力が弱い人や身体に障害があるためマウスを使えない人の、アクセシビリティの問題を回避してメニューを操作できるようにする唯一の方法でもあります。Windows では、次の画像のように、アクセスキーに相当する文字に下線が引かれるのですぐに分かるでしょう (日本語版の場合は、アクセスキーが括弧付きで表示されます):
ほとんどのユーザインタフェースを制御する要素には accesskey 属性があります。これを使用してください。アクセスキーの値は、メニューなどのラベルテキストに含まれる文字を使用しなければならないため、そのラベルに合わせてローカライズされます (日本語版の場合は、英語版に合わせます)。また、アクセスキーが重複しないように気を付けなければなりません。例えば、メニューやサブメニューの同じ階層でアクセスキーが重複してはいけません。ウィンドウ内には多くのコントロールがあるため、アクセスキーを選定する際はさらに気を付けてください。特に気を付けなければならないのは、オーバーレイ上のアクセスキーの選定です。Hello World 拡張の場合は、メインメニュー項目のアクセスキーに "H" を使用することができません。これは、ヘルプメニューのアクセスキーに使用されています。同様に、"W" も Mac OS のウインドウメニューと重複するため使用できません。結局、ここでは "l" の文字を設定しています。
DTD 文字列は、ドキュメントが読み込まれた時に確定され、設定されます。DOM を使用して Hello World メニューの label 属性の値を要求すると、文字列キーではなく、ローカライズされた文字列が取得されます。属性の値を新しい DTD キーに動的に変更することはできません。新しい値を直接設定する必要があります:
let helloItem = document.getElementById("xulschoolhello-hello-menu-item"); // alert には "Hello World!" と表示されます alert(helloItem.getAttribute("label")); // 不可 helloItem.setAttribute("label", "&xulschoolhello.hello2.label;"); // 可 helloItem.setAttribute("label", "Alternate message"); // 正解！ helloItem.setAttribute("label", someStringBundle.getString("xulschoolhello.hello2.label"));
これが、DTD 文字列をすべてのローカライズに適用できない理由です。そして、XUL ファイルに stringbundle で properties ファイルを含める必要がある理由です:
<stringbundleset id="stringbundleset">
<stringbundle id="xulschoolhello-string-bundle"
src="chrome://xulschoolhello/locale/browserOverlay.properties" />
</stringbundleset>
stringbundleset 要素は、stringbundle 要素のコンテナです。これは、browser.xul 内のとても一般的な id の stringbundleset にオーバーレイを適用しているため、ドキュメントごとに一つでなければなりません。stringbundle の順番を入れ替えても違いがないため、insertbefore 属性や insertafter 属性は不要です。この要素は、完全に不可視です。overlay 要素に順番を指定する属性を記述しなくても、この要素は、親要素の最後の子要素として Firefox に追加されます。
stringbundle に必要なものは、(後で要素を呼び出すための) id と properties ファイルへの chrome パスだけです。もちろん、properties ファイルも必要です:
xulshoolhello.greeting.label = Hi! How are you?
"=" 記号の周りのスペースは無視されます。また、空行も無視されます。install.rdf でのように、行頭を "#" 文字で始めるとコメントを追加することができます。
たびたび、拡張機能に関する情報についてユーザに知らせたいときなど、ローカライズした文字列の一部に動的コンテンツを含めたくなることがあるでしょう。例えば、"Found 5 words matching the search query" の文字列の数字部分です。はじめに思いつくアイデアは、"Found" プロパティともう一つの "words matching..." プロパティを単に繋ぎ合わせる方法でしょう。これは、良い方法とはいえません。この方法では、ローカライズの作業がとても困難になり、別の言語の文法によっては文全体の並び順を変更しなければなりません。この問題を避けるため、プロパティ内にパラメータを使用する方法を用いてください:
xulshoolhello.search.label = Found %S words matching the search query!
このローカライズされた文字列を取得するには、getString の代わりに getFormattedString を使用します。パラメータが使用できるおかげで、複数のプロパティを使用する必要がなくなり、翻訳がとても楽になります。詳しくは、XUL チュートリアルのテキストのフォーマットセクションをお読みください。また、複数形とローカライズの記事も読んでください。この記事は、Firefox 3 で導入されたローカライズの新機能である、この最後の例よりもさらに洗練された、言語ごとに異なる複数形を扱う方法について書かれています。
skin
XUL のスタイル付けは、HTML のスタイル付けととてもよく似ています。ここでは詳しく取り上げません。XUL のボックスモデルにスタイル付けする時や、他のさらに詳しいトピックでいくつかの違いについて見ていきます。最小限のメニューと単純な警告メッセージにできるスタイル付けは、ほとんどありません。そのため、Hello World 拡張の XUL ファイルには、空の CSS ファイルと義務的な global スキンファイルだけが含められています:
<?xml-stylesheet type="text/css" href="chrome://global/skin/" ?> <?xml-stylesheet type="text/css" href="chrome://xulschoolhello/skin/browserOverlay.css" ?>
global スキンの CSS ファイルは、すべての XUL 要素とウィンドウのデフォルトのスタイルを保持しています。XUL ウィンドウにこのファイルを含めることを忘れると、おかしな表示になってしまいます。Hello World 拡張の場合は、すでにこの global CSS が含まれたメインブラウザの XUL ファイルにオーバーレイを適用しているため、本当は含める必要はありません。いずれにせよ、忘れてミスしないように、常に XUL ファイルに含んでおくほうが良いでしょう。好奇心の強い方は、ロケーションバーに chrome パスを入力してファイルを調べてみてください。
この章では、Hello World 拡張のすべてのファイルをカバーしました。ここまで読んだあなたには、拡張機能開発の基本的な考え方が身についているはずです。次は、開発環境のセットアップへ進みましょう。その前に、簡単な練習問題があります。
練習問題
警告ウィンドウに表示される歓迎メッセージを変更し、Hello World メニューをツールメニュー内に移動してください。次に、XPI ファイルにパッケージしなおして再インストールしてください。XPI ファイルをブラウザにドラッグ＆ドロップするだけでインストールされます。変更した箇所が動作するかテストして検証してください。インストール時に問題が起こったときは、XPI ファイル内のディレクトリ構造が元のとおり正しく配置されていません。余計なディレクトリが追加されていないか確認してください。
動作が確認できたら正解を見てください: Hello World 2
This tutorial was kindly donated to Mozilla by Appcoast.