テーマのコンセプト

This translation is incomplete. この記事の翻訳にご協力ください

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つを同一にもできますが、別物と扱うほうが簡単です。

単一画像のテーマ

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

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

The area your header image needs to fill is a maximum of 200 pixels high. The maximum image width is determined by the resolution of the monitor Firefox is displaying on and how much of the monitor Firefox is using. Practically, this means you would need to allow for a width of up to 5120 pixels wide (for the next generation of 5k monitors). However, rather than creating a very wide image, a better approach is to use a narrower image with a transparent left edge so that it fades to the background color. 例えば、we could use this image
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.
combined with a complementary background color, to create this effect in the header
A single image theme using the weta.png image

See details about this theme in the themes example weta_fade.

Obviously, you can still provide a single wide image if you prefer.

複数画像のテーマ

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

作成したい効果によっては、必須の "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.

クロスブラウザー互換性

There is currently limited compatibility between themes in the major browsers. Opera takes an entirely different approach, and Microsoft Edge themes are not yet open to developers.

There is good compatibility between Firefox static themes and Chrome themes, providing the ability to port a single header image theme from Firefox to Chrome. However, noting that "frame": and "tab_background_text": only support RGB color array definition on Chrome.

So, in the single image theme example (weta_fade) could be supported in Chrome using the following manifest.json file:

{
  "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 ]
    }
  }
}

Also, note that Chrome tiles the “theme_frame”: image from the left of the header area.

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

For more information, see the notes on Chrome compatibility.