前回まで，タグヘルパー拡張機能の実装とUIのローカライズを行いました。今回はskinパッケージを追加し，メニュー項目へアイコンを追加する装飾を行います。さらに，Firefox 3の新機能を使ってOS別に異なるアイコンを追加する装飾を行います。なお，第6回完成時点でのソースファイルは，下記URLから入手可能です。

• http://www.xuldev.org/misc/sd.php

スキンの概要

XULで作成した拡張機能のUIを装飾するには，スタイルシートを使います。ちょうど，WebページのHTMLをスタイルシートで装飾するのと同じイメージです。スタイルシートおよびスタイルシートから読み込む画像ファイルなどは，XULやJavaScriptのソースファイルと同じくcontentパッケージ内に格納しても問題ありません。しかし，一般的にはこれらのソースファイルをskinパッケージ内に格納します。装飾に関するソースファイルをskinパッケージとして切り離すことで，Firefoxのテーマ別にスキンを作成したり，逆にテーマ側が拡張機能専用のスキンを作成したりすることが可能になります。なお，skinパッケージで提供されるUIの装飾を「スキン」と呼びます。

skinパッケージのソースファイルは，「skin」フォルダ内に作成したFirefoxテーマ別のサブフォルダ内に格納します（注1）。通常はFirefoxのデフォルトテーマ用スキンのみ作成し，そのソースファイルを「classic」サブフォルダ内に格納します。デフォルトテーマ以外のテーマ用のスキンも作成する場合，別のサブフォルダを作成してソースファイルを格納し，後述するクロムマニフェストにて別のskinパッケージを追加します。なお，デフォルトテーマ用のスキンのみ作成した場合，どんなテーマを使用しているかによらず，デフォルトテーマ用のスキンが適用されます。

注1）

ここでの「テーマ」とは，Firefoxのデザインを変更するための「テーマ」のことを意味します。

全OS共通スキンを作成する

第6回の前半では，一般的な拡張機能開発のマナーにしたがって，全OS共通のスキンを作成する手順を解説します。まず，第6回（前半）完成時点での各種ソースファイルのフォルダ構成を図1に示します。また，第6回（前半）で新たに作成するフォルダやファイルの概要を表1に示します。

なお，アイコン画像は下記URLからダウンロードして使用してください。

• http://www.xuldev.org/misc/sd.php

skinパッケージの追加（全OS共通スキン）

skinパッケージを追加するために，クロムマニフェストへリスト1の内容を追加してください。

content  taghelper  content/
locale  taghelper  en-US  locale/en-US/
locale  taghelper  ja-JP  locale/ja-JP/
skin  taghelper  classic/1.0  skin/classic/
overlay  chrome://browser/content/browser.xul  chrome://taghelper/content/overlay.xul 

リスト1の4行目がskinパッケージを登録するための宣言です。パッケージ名が「taghelper」，このskinパッケージを適用するテーマ識別子が「classic/1.0」，ソースファイルを格納したフォルダへの相対パスが「skin/classic/」となります（注2）。

注2）

今回は簡便のためskinパッケージのフォルダパスを「skin/classic/」のようにしていますが，一般的にはフォルダパスを「skin/classic/taghelper/」のようにします。

今回は前述の通りデフォルトテーマ用のスキンしか作成しませんが，例えばもし「Kempelton」テーマ（注3）用のスキンを作成する場合，「skin taghelper kempelton skin/kempelton/」のような宣言を追加します。なお，現在使用しているテーマのテーマ識別子を知るには，「about:config」から設定値「general.skins.selectedSkin」の値を調べてください。

注3）

Kempelton icon set by Arvid