テーマのコンセプト

This translation is in progress.

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.json というファイルをそのフォルダに作成し、中身は次のようにします:
    {
      "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": はヘッダー領域のテキスト色です。
  • テーマをパッケージ化して AMOに投稿するにはこの指示に従います。テーマは AMO に投稿するか、自己配布でホストできます。

静的テーマのアプローチ

Firefoxのヘッダー領域のテーマ変更には2つのアプローチがあります: 単一画像のテーマと複数画像のテーマです。2つを同一にもできますが、別物と扱うほうが簡単です。

単一画像のテーマ

これは基本的で最小のオプションで、次のものを定義します:

  • ヘッダー領域の右上に置かれる単一の画像
  • ヘッダー内のテキストの色

ヘッダー画像が埋める必要がある領域の高さは最大200pxです。ヘッダー画像の横幅の最大値はFirefoxを実行しているディスプレイの解像度によって決められます。すなわちこれは、次世代の5kモニターのことまで考えると、横幅は最大でも5120pxだと考えておけば良いということになります。ただ、そんな大きな画像を用意するよりも左端が少しずつ薄くなっていき次第に透明になって背景色に溶け込んでいくような画像を用意したほうがいいでしょう。たとえば次のような画像です。
An image of a weta (the common name for a group of about 70 insect species in the families Anostostomatidae and Rhaphidophoridae, endemic to New Zealand) with the left edge fading to total transparency.
画像は次第に半透明になっていきますが、画像に合わせた背景色を指定しておくことで下の画像のような効果を作り出すことができます。
A single image theme using the weta.png image

このテーマファイルの詳細についてはGithubのリポジトリのなかにある、 weta_fadeをご覧ください。

もちろん横に長い一枚絵を用意してもなんら問題はありません。

複数画像のテーマ

単一画像のテーマを作る他に、複数画像を使うオプションもあります。これらの画像は、並べ方のオプションとともに、個々にヘッダーに配置されます。

作成したい効果によっては、必須の "theme_frame": に空画像や透過画像を指定して抑制することがあります。空や透過画像を使います。例えば次のように、中央に寄せた画像にして、
An image of a weta (the common name for a group of about 70 insect species in the families Anostostomatidae and Rhaphidophoridae, endemic to New Zealand) with the left and right edges fading to total transparency.
このような効果を作成したい場合
A single image theme using the additional images option to align an image to the center of the heading and tile it.
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 画像をヘッダーの左に配置した次の画像と一緒にするして
An image of a weta (the common name for a group of about 70 insect species in the families Anostostomatidae and Rhaphidophoridae, endemic to New Zealand) with the right edge fading to total transparency.
このような効果を作成するには
A theme using the additional images option to place two mirrored image to the left and right of the browser header.

画像をこのように指定して:

"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:

  1. Visit the product page for your theme through the Developer Hub
  2. Select "Upload New Version" on the left
  3. Upload your packaged file for validation or modify it using the theme generator

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 theme API to control the theme used in Firefox from within a browser extension. There are a couple of use cases for this option:

  • To bundle a theme with a browser extension, as an added extra.
  • Create a dynamic theme that changes under programmatic control.

And, obviously, you can combine the two and bundle a programmatically controlled theme with your extension.

Using the 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 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 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:

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”:に指定した画像は左から並べられることに注意しておいてください。

The basic theme example using the Chrome compatible manifest.json keys, showing the differences in how those keys are implemented.

Chromeとの互換性に関するさらなる詳細は Chrome compatibility をご確認ください。