画像は次第に半透明になっていきますが、画像に合わせた背景色を指定しておくことで下の画像のような効果を作り出すことができます。
Firefox の WebExtensions API で開発されたテーマでは、Firefox ブラウザーのヘッダー領域に画像を追加してブラウザーの見た目を変更できます; それはメニューバー、ツールバー、アドレスバー、検索バー、タブの背後の領域です。
こうしたテーマのオプションは静的テーマ (テーマ画像自体はアニメであっても) や、ブラウザー拡張機能での動的テーマにて実装できます。
軽量テーマがある場合、軽量テーマが非推奨になる前に自動的に神テーマに変換されるでしょう。テーマを移植する必要はありません。しかし、下記の新機能を使うためには、気軽にテーマを更新してください。
静的テーマはブラウザー拡張機能と同じリソースを使って指定します: manifest.jsonと同一またはサブフォルダに格納したテーマコンポーネントを指定する manifest.json ファイルです。これらのリソースは addons.mozilla.org (AMO) での公開や、自前の配布用にzipで圧縮されます。自己配布については、Signing and distributing your add-onを見てください。
AMOの theme generator を使って静的テーマを作ることもできます。それに加えて、Firefox Color を使って、共有・テーマエクスポートオプションでの、ブラウザーテーマのカスタマイズをプレビューできます。
A theme and browser extension functionality cannot be defined in one package, such as including a theme to complement an extension. You can, however, programmatically include a theme in an extension using the Theme API. See Dynamic themes.
テーマを作るには (その例では簡単な、単一画像のテーマです):
<mytheme> <your_header_image>.<type>
{
"manifest_version": 2,
"version": "1.0",
"name": "<your_theme_name>",
"theme": {
"images": {
"theme_frame": "<your_header_image>.<type>"
},
"colors": {
"frame": "#FFFFFF",
"tab_background_text": "#000"
}
}
}
ここで:
"frame": ではテーマのヘッダー領域の背景色です。"tab_background_text": はヘッダー領域のテキスト色です。Firefoxのヘッダー領域のテーマ変更には2つのアプローチがあります: 単一画像のテーマと複数画像のテーマです。2つを同一にもできますが、別物と扱うほうが簡単です。
これは基本的で最小のオプションで、次のものを定義します:
ヘッダー画像が埋める必要がある領域の高さは最大200pxです。ヘッダー画像の横幅の最大値はFirefoxを実行しているディスプレイの解像度によって決められます。すなわちこれは、次世代の5kモニターのことまで考えると、横幅は最大でも5120pxだと考えておけば良いということになります。ただ、そんな大きな画像を用意するよりも左端が少しずつ薄くなっていき次第に透明になって背景色に溶け込んでいくような画像を用意したほうがいいでしょう。たとえば次のような画像です。
画像は次第に半透明になっていきますが、画像に合わせた背景色を指定しておくことで下の画像のような効果を作り出すことができます。
このテーマファイルの詳細についてはGithubのリポジトリのなかにある、 weta_fadeをご覧ください。
もちろん横に長い一枚絵を用意してもなんら問題はありません。
単一画像のテーマを作る他に、複数画像を使うオプションもあります。これらの画像は、並べ方のオプションとともに、個々にヘッダーに配置されます。
作成したい効果によっては、必須の "theme_frame": に空画像や透過画像を指定して抑制することがあります。空や透過画像を使います。例えば次のように、中央に寄せた画像にして、
このような効果を作成したい場合
weta 画像を次のように指定して:
"images": {
"theme_frame": "empty.png",
"additional_backgrounds": [ "weta_for_tiling.png"]
},
画像の並べ方はこのようにします:
"properties": {
"additional_backgrounds_alignment": [ "top" ],
"additional_backgrounds_tiling": [ "repeat" ]
},
このテーマのセットアップ方法の全容は themes の例のweta_tiledにあります。寄せたり並べたりするオプションの全容は "theme" key descriptionにあります。
あるいは、複数の画像を使うこともできます。例えばオリジナルの weta 画像をヘッダーの左に配置した次の画像と一緒にするして
このような効果を作成するには
画像をこのように指定して:
"images": {
"theme_frame": "empty.png",
"additional_backgrounds": [ "weta.png", "weta-left.png"]
},
並びをこのように指定します:
"properties": {
"additional_backgrounds_alignment": [ "right top" , "left top" ]
},
このテーマのセットアップ方法の全容は themes 例のweta_mirrorにあります。並びのオプションの全容は "theme" key descriptionにあります。
It is possible to create an animated theme using an APNG format image, as in the themes example animated. However, remember that rapid animations, such as the one in the example might be too distracting for a practical theme.
You can also animate themes programmatically, which we discuss in Dynamic themes.
If your static theme is hosted on AMO, you can upload a new version using the Developer Hub with the following steps:
For self-hosted static themes, a new version can be updated through AMO by following the above steps or be handled by you through an updateURL or external application updates. A new version will need to be signed through the Developer Hub.
If you are uploading a packaged file, the version number must be higher than the current version number
As an alternative to defining a static theme, you can use the {{WebExtAPIRef("theme")}} API to control the theme used in Firefox from within a browser extension. There are a couple of use cases for this option:
And, obviously, you can combine the two and bundle a programmatically controlled theme with your extension.
Using the {{WebExtAPIRef("theme")}} API is straightforward. First, request "theme" permission in the extension's manifest.json file. Next, you build a JSON object containing the same information you would use in a static theme’s manifest.json, Finally, pass the JSON object in a {{WebExtAPIRef("theme.update()")}} call.
例えば、the following code, from the dynamic theme example defines the content for the day and night elements of the dynamic theme:
const themes = {
'day': {
images: {
theme_frame: 'sun.jpg',
},
colors: {
frame: '#CF723F',
tab_background_text: '#111',
}
},
'night': {
images: {
theme_frame: 'moon.jpg',
},
colors: {
frame: '#000',
tab_background_text: '#fff',
}
}
};
The theme.Theme object is then passed to {{WebExtAPIRef("theme.update()")}} to change the header theme, as in this code snippet from the same example:
function setTheme(theme) {
if (currentTheme === theme) {
// No point in changing the theme if it has already been set.
return;
}
currentTheme = theme;
browser.theme.update(themes[theme]);
}
Learn more about dynamic themes and see an additional example in the following video:
{{EmbedYouTube("ycckyrUN0AY")}}
If you have not built a browser extension before, check out Your first extension for a step-by-step guide.
主要なブラウザ間でのテーマファイルの互換性はまだいまいちです。Operaブラウザは全く違うアプローチを取っていますし、Edgeブラウザのテーマ開発はまだユーザに公開されていません。
Firefoxの静的テーマとChromeのテーマファイルの間にはまあまあ互換性があって一枚の画像で構成されるヘッダーデザインをFirefoxからChromeへと移植することができます。ただ、Chromeでは"frame": と "tab_background_text": にはRGBカラーしか指定できないことに注意しておく必要があります。
すなわち、Chromeで先のサンプル(weta_fade)を使えるようにするにはmanifest.jsonを次のように書き換える必要があります。
{
"manifest_version": 2,
"version": "1.0",
"name": "<your_theme_name>",
"theme": {
"images": {
"theme_frame": "weta.png"
},
"colors": {
"frame": [ 173 , 176 , 159 ],
"tab_background_text": [ 0 , 0 , 0 ]
}
}
}
またChromeでは “theme_frame”:に指定した画像は左から並べられることに注意しておいてください。
Chromeとの互換性に関するさらなる詳細は Chrome compatibility をご確認ください。