Chrome テーマ作成ガイド

Google Chrome の母体とも言えるオープンソースプロジェクト Chromium の wiki にある ThemeCreationGuide を和訳、要約後、現行バージョンとの齟齬を確認した箇所を修正、オリジナルからは、かなり変わった部分もある。

2015年07月13日 一段落

Chrome Ver. 43.0.2357.132 m

オリジナルへのリンクは以下の通り

ThemeCreationGuide

https://code.google.com/p/chromium/wiki/ThemeCreationGuide

Updated Oct 16, 2014 by phist...@chromium.org

目次

テーマ作成に必要な物

作業手順

“manifest.json” ファイル記述例

訳者注記

画像要素

色要素

色調要素

UI（ユーザインターフェイス）プロパティ要素

要素の解説

基本的なテーマ要素

theme_frame （1. 画像要素 番号 1）

theme_toolbar （1. 画像要素 番号 2）

theme_tab_background （1. 画像要素 番号 3）

theme_ntp_background （1. 画像要素 番号 5）

拡張要素を使えばより凝ったテーマが作成できる。

テーマ拡張要素 （1. 画像要素）

theme_frame_inactive （1. 画像要素 番号 1.1）

theme_frame_incognito （1. 画像要素 番号 2）

theme_frame_incognito_inactive （1. 画像要素 番号 1.2）

theme_tab_background_incognito （1. 画像要素 番号 3.1）

theme_tab_background_v （1. 画像要素 番号 4）

theme_frame_overlay （1. 画像要素 番号 6）

theme_frame_overlay_inactive （1. 画像要素 番号 6.1）

theme_button_background （1. 画像要素 番号 7）

theme_ntp_attribution （1. 画像要素 番号 8）

theme_window_control_background （1. 画像要素 番号 9）

テーマ拡張要素 （2. 色要素）

"manifest.json" ファイルでこの要素を定義するための書式は、"要素名" : [R,G,B]、不透明度まで設定できる場合は "要素名" : [R,G,B,不透明度] となり、R,G,B は 0-255、不透明度は 0-1 の小数値（0 が透明、1 が不透明）を指定する。

frame （2. 色要素 番号 10）

frame_inactive （2. 色要素 番号 10.1）

frame_incognito （2. 色要素 番号 10.2）

frame_incognito_inactive （2. 色要素 番号 10.3）

toolbar （2. 色要素 番号 10.4）

tab_text （2. 色要素 番号 11）

tab_background_text （2. 色要素 番号 12）

bookmark_text （2. 色要素 番号 13）

ntp_background （2. 色要素 番号 14）

ntp_text （2. 色要素 番号 14.1）

ntp_link （2. 色要素 番号 14.2）

ntp_link_underline （2. 色要素 番号 14.3）

ntp_header （2. 色要素 番号 14.4）

ntp_section （2. 色要素 番号 14.5）

ntp_section_text （2. 色要素 番号 14.6）

ntp_section_link （2. 色要素 番号 14.7）

ntp_section_link_underline （2. 色要素 番号 14.8）

control_background （2. 色要素 番号 15）

button_background （2. 色要素 番号 16）

テーマ拡張要素 （3. 色調要素）

buttons （3. 色調要素 番号 17）

frame （3. 色調要素 番号 18）

frame_inactive （3. 色調要素 番号 18.1）

frame_incognito （3. 色調要素 番号 18.2）

frame_incognito_inactive （3. 色調要素 番号 18.3）

background_tab （3. 色調要素 番号 19）

テーマ拡張要素 （4. プロパティ要素）

ntp_background_alignment （4. プロパティ要素 番号 20）

ntp_background_repeat （4. プロパティ要素 番号 21）

ntp_logo_alternate （4. プロパティ要素 番号 22）

パッケージ化

テーマ作成ガイド

Google Chrome 拡張機能の一つであるテーマの作成方法について解説

テーマ作成過程での様々な試行錯誤は、このヘルプドキュメント（未完）を作成する上で大いなる助けとなった。 もしも人々が可能な限りの方法でこの文書に貢献してくれるならば、それらは有益な情報として参考になり、より優れたテーマ作成ガイドへと発展させてくれるだろう。

テーマ作成に必要な物

1. テキストエディタ（できれば行番号表示のできるもの。 テーマをパッケージ化する際、Chrome は制御ファイルである "manifest.json" にエラーがあれば、それを指摘する。 フリーでとても便利なエディタ、Notepad++ の使用を推奨！）。
   訳者補記） 推奨エディタがどんなものか確認していないが、"manifest.json" ファイルの行数はさほど多くはならないので、行番号にこだわる必要もないと思う。

2. イメージエディタ。 フォトショップを推奨するが、フリーの Gimp や Paint.net でも良い。（良質な画像コンテンツを作るには、やはり高機能なエディタが望ましい）
   ※上記のフリー高機能エディタ情報へのリンク
   http://sixrevisions.com/graphics-design/10-excellent-open-source-and-free-alternatives-to-photoshop/

3. フォトショップを使っているならば、以下の Chrome ウィンドウデザイン（いくつかのレイヤーが壊れているが）をダウンロードすれば、テーマがどのように見えるかを容易に視認できる。
   ※フォトショップのバージョンによっては開けないかも？
   http://www.chromium.org/user-experience/visual-design/chrome_0.2_psd.zip

作業手順

1. テーマの名前をつけたフォルダを作り、その中に “images” というサブフォルダを作る。
   
2. テーマで使う画像（PNG ファイル）を作り、それらを先程の “images” フォルダに入れる（テーマで使う画像の解説は次のセクションで行う）。
3. "manifest.json" というファイル（中身はテキストファイル）を 1. のフォルダに作る。
   同ファイルのサンプルが以下のリンクにあるhttp://src.chromium.org/viewvc/chrome/trunk/src/chrome/test/data/extensions/theme/manifest.json?revision=72690&view=markup
   
   現行バージョンでは先頭行に "manifest_version":2, が必要！！

参考までに、上記サンプルを編集して説明を加えた記述例も後述する。 どちらでもコピペしてデキストエディタで編集できるが、後述分には余計な要素（「 ＜※画像要素セクション」等の説明文）が入っている事に注意。
また、”name” の値以外は、全て小文字を使用する事に注意。

4. テーマをテスト後、パッケージ化してインストール。

“manifest.json” ファイル記述例

 ※青太字は後述する「5.1. テーマ基本要素」の項目に該当

{

"manifest_version":2,

"name": "camo theme",

"version": "2.0",

"theme": {

"images": {※画像要素セクション※

"theme_frame": "images/theme_frame_camo.png",

"theme_ntp_background": "images/theme_ntp_background.png",

"theme_toolbar": "images/theme_toolbar_camo.png"

},

"colors": {※色要素セクション、[R,G,B] の値は 0-255※

"frame": [ 71, 105, 91 ],

"ntp_link": [ 36, 70, 0 ],

"ntp_section": [ 207, 221, 192 ],

"ntp_text": [ 20, 40, 0 ],

"toolbar": [ 207, 221, 192 ]

},

"tints": {※色調要素セクション、[色相,彩度,明度] の値は 0-1※

"buttons": [ 0.33, 0.5, 0.47 ]

},

                "properties": {※プロパティ要素セクション※

"ntp_background_alignment": "left bottom"

                }

}

}

これをテキストエディタにコピペして編集する場合は、※から※までを削除して使用する事！

文字コードは UTF-8 !!! ANSI とか Shift-Jis とか NG。

原稿バージョンでは先頭行の "manifest_version":2, が必要！！

区切り文字であるコンマの過不足に注意！（エラー原因の上位を占めそうだ）

{ から } までがその前に書かれた項目を設定する要素等となるが、複数の項目や要素がある場合、それら { } 内の各要素等をコンマ「 , 」で区切る必要がある。 例えば、、、

{

        "a":"aa",

        "b":"bb"

}

改行やタブ、半角スペース等は無視されるので、上記例は {"a":"aa","b":"bb"} と同義で、こうすると最後に区切り文字であるコンマが必要ない事がわかり易い。

訳者注記

オリジナル文書作成時と、現在の Chrome バージョンの違いからくる問題について。

• 新しいタブページ（ntp）

構成要素が大きく変わり、以前、ヘッダ、セクション、最近閉じたタブバー等と呼ばれていた ntp 内の区画は、現在該当する要素が無く、同じく、ntp 内にあったブックマークバーは、ツールバーと一体化できる仕様となって、現在は ntp エリアには無い。

そういった関係からか、現在効果の現れない要素がいくつも存在する。

“section” と名のつく要素では、唯一 "ntp_section" 色要素だけが、ntp に表示されるサイトサムネイルが納まる区画の周囲に見える境界線の色として機能しているにすぎないのだが、同じ区画に表示されるサイトサムネイルの説明文字は "ntp_text" と、セクションの親要素である ntp で定義され、しかも ntp 内にある他の文字には影響しない、といったおかしなところが結構ある。

ちなみに色要素 ”ntp_header” も "ntp_section" と同じ効果があり、双方に別々の値を定義すると、こちらが優先され、 "ntp_section" は無効となる。

• ツールバー（toolbar）

視覚的なボタンは無くなり、マウスポインタを重ねた時だけ、その面影を見る事ができるが、そのせいか、”button” 関連の要素は、背景画像・色等、その殆どがツールバーのボタンには意味をなさなくなっているようだ。 但し、色要素 "button_background" は、ツールバーのボタンには効果が無いにも関わらず、本来色要素 "control_background" で定義すべき、フレームに存在するウィンドウコントロールボタンの色が "button_background" で定義できてしまったりと、こちらもおかしな感じだ。

色要素 “toolbar” はツールバーの色を設定できないが、ntp に表示される独立したブックマークバーや、リンク先を表示するステータスバー（ページ左下にポップアップ）、それにダウンロードバーの色を指定できる。

バージョンとは無関係に気づいた事。

• 色要素のいくつかは、特定の画像要素を定義しないと有効にならないものがある。
  色要素 "frame" と "button_background" は、画像要素 "theme_frame" を定義していないと効果がない。 他にもそんな要素があるのかもしれない。

その他参考

• Chrome ウェブストアにあるテーマ等を参考にしたい場合、配布されているパッケージ（拡張子 crx）を以前はストアから直接ローカルに保存できたようだが、今は無理っぽい。 ローカルで探してみると Windows 7 では以下にあった。

"C:\Users\ユーザ名\AppData\Local\Google\Chrome\User Data\Default\Extensions"

この中にインストールした拡張機能がそれぞれのサブフォルダに入って管理されている。

名前がランダム生成っぽい長い文字列なので、どれがそうだか見ただけではわからないので、テーマをインストールしたらすぐに上記フォルダの中を見て、フォルダの年月日を見て判断すれば良い。

中身はアーカイブファイルである crx でも zip でもなく、解凍の必要もないので、見つかったら、どこか別の場所にコピーしてやれば、自作の助けとなる。

ただ、ウェブストアにあるテーマは古い物が非常に多いので、それらの “manifest.json” に記載されている要素も、現行バージョンでは機能しない物も多いのだが、それでも “manifest.json” の記載や使われている画像等の効果を、適用したテーマを目で見ながら確認できるのは非常に参考となるだろう。

Google 作成のテーマには、特殊な構成のものがある。

画像用サブフォルダの名前が “images” ではなくて単に “i” で、中身の png ファイルに拡張子が付いていないとか、見慣れないフォルダが他にもあるとか、更に、

“manifest.json” の違い。

•  "name" 要素の値が我々一般には使用が認められていない変数 "__MSG_themeName__" で指定されている。
•  "default_locale" で指定された "en" はフォルダ “_locales” に入った言語別サブフォルダの名称で、そのフォルダ “en” の中にある “manifest.json” に先程の変数が記載されている。
• 我々がテーマを作成する上では不要な定義が “_metadata” の中にある “verified_contents.json” に記載されている。

これを一般向けに再構成するには、

• _locales/en/manifest.json をテキストエディタで開き、記載されている値をルートフォルダにある manifest.json の "name" の値として適用する。変数名が "__MSG_themeName__" なので、”themeNaame” の構成要素 “message” の値がそれとなる。
• ルートのmanifest.json から"default_locale" の項目（行）を削除。
• “i” 以外のサブフォルダと “Cached Theme.pak” を削除。
• 画像フォルダ ”i” の名称を ”images” に変更したり、中身の画像名をわかりやすいものに変更して png の拡張子を付けたりして、その変更をルートの “manifest.json” に適用。

他に、これは自分でパッケージ化しても “manifest.json” に加えられる要素も含まれるが、不要なので削除する項目は、

• 公開鍵要素 "key"
• アイコン要素 ”icons”
• アップデート URL 要素 "update_url"

以上の修正を加えれば、 “manifest.json” の値を調整したりした物を実際に仮適用（パッケージ化を参照）して変化の具合を目で見る事ができるようになる。

以下1.から4.で Chrome のテーマ要素をリストアップ、「5. 各要素の解説」でその説明をする。

1. 画像要素

画像要素は “manifest.json” ファイルの “images” セクションで定義する。

※青太字の4項目は後述する「5.1. テーマ基本要素」に該当

2. 色要素

色要素は “manifest.json” ファイルの "colors" セクションで定義する。

色は RGB の数値で指定、いくつかの要素は不透過属性も指定できる。

[R,G,B,不透過度] ※ R,G,B=0-255, 不透過度=0-1

例 ： "ntp_section" : [15, 15, 15, 0.6]

3. 色調要素

色調要素は、ボタンのシンボルマークや非アクティブタブ、非アクティブウィンドウ・シークレットウィンドウのフレームにかけられるマスクのような補正で、色調（色相、彩度、明度）を調整して設定する。

色調要素は “manifest.json” ファイルの "tints" セクションで定義する。

4. UI（ユーザインターフェイス）プロパティ要素

プロパティ要素は “manifest.json” ファイルの “properties” セクションで定義する。

ここは全てntp (new tab page) のメイン区画（よくアクセスするページ等がある区画）に係る設定

以上、1から5、ユーザが Google Chrome で変更できる要素だが、どれを変更するのかはユーザが決める事だ。 変更の必要がない要素については放っておけば良い（“manifest.json” ファイルに記述されない要素については、デフォルトの設定が適用される）。 各要素はそれぞれ “manifest.json” ファイルの該当するセクションで定義しなければならない事に注意。 色要素は “colors” セクション、画像要素は “images” セクション、等々。

次章では各要素を１つずつ解説する。

5. 要素の解説

1. 基本的なテーマ要素

これらの要素だけで簡単に基本的なテーマを作る事ができる。

1. theme_frame （1. 画像要素 番号 1）

フレーム（タブの背後となるウィンドウの最外枠エリア、上図青色部分）に表示される画像要素（左上が配置原点）。 この画像でカバーされないフレームエリアの残りの部分は、色要素の "frame" が適用される。 この画像は左上から右方向へのリピート配置となるので、小さな矩形の画像を使えば簡単にパターンを作成できる。

縦方向へはリピートしないので、ツールバーエリアの高さを十分カバーできるよう、縦80ピクセル以上であることが望ましく、また、一般的には画像底部のアルファ透過グラデーション処理で、色要素 “frame” との調和を図る（フレーム境界線までカバーする大きな画像を使う事もできる）。

画像サイズが不適切だと、ウィンドウが復元モードの時に、フレーム左上端部に小さな隙間が生じる場合がある。

リピートされない程に幅のある画像を１つの連続したデザインとして作る事もできるが、この手法では画像のロード時間が長くなる可能性がある。

この画像要素を定義しない場合、色要素の "frame" は無効となる事に注意。

※非アクティブタブではこの画像が透けて見える。

※ウィンドウ最大化時とそうでない時では上部の高さが異なる。

2. theme_toolbar （1. 画像要素 番号 2）

カレントタブとその下のツールバー（上図赤色部分）をカバーする画像要素。

ブックマークバーを「常に表示」に設定している場合、ブックマークバーはツールバーと一体化して、高さも若干低くなり、ここでの設定効果が及ぶ（画像が表示される）。

独立した区画としてのブックマークバーには、画像要素を適用する事はできない。

Ctrl + F で表示されるページ内検索バーも、この画像を共有する為、画像の高さは119ピクセル以上必要。 また、画像要素 "theme_frame" と同様に、この画像は左上から右方向にリピート配置される。

一体化したブックマークの場合、アイコンと文字以外の部分に画像が表示される為、画像デザインや文字色で上手く調整しなければ見難くなるかもしれない。

右端上部で僅かに “theme_frame” の画像要素と接するが、双方に同じ画像を使った場合、最大化ウィンドウ時の接合部ではこちらが 3 ピクセル高く表示され、非最大化ウィンドウでは逆にこちらが高く表示されてしまう。

これは非アクティブタブからフレーム画像が透けて見える場合にも問題となるかもしれない。

上部フレームエリアの高さがウィンドウ最大化如何で変わり、そこの左上を起点としてフレーム画像が配置される事によるものだ。

3. theme_tab_background （1. 画像要素 番号 3）

全ての非アクティブタブ、及びその右に配置される「新しいタブページ」を開く為の小さなパーツで表示される画像要素。

この画像も左上から右方向にリピート配置され、高さは約65ピクセル以上が望ましい。

カレントタブと非アクティブタブを区別できるデザインにする事も重要！

※現行バージョンでは、ここに不透過画像を定義するか、色調要素 ”background_tab” で非アクティブタブを不透過としなければ、”theme_frame” で定義したフレーム画像が透けて見える。

画像要素も色調要素も適用しなければ、かなりハッキリとフレーム画像が見える事になる。

透けて見える場合の問題は、ウィンドウ最大化時と、そうでない時とで、フレームの高さが変わり、そこの左上を起点として配置されるはずのフレーム画像の見え方が 1 つ。

フレーム画像はウィンドウ状態に応じて配置起点が変動するが、非アクティブタブに透けて見える画像は、状態に関わらず常に最大化時の配置状態で変わらずに見える。

更に悪い事に、非アクティブタブ、フレーム、ツールバーでの視覚的一体化を細かい所まで目論むなら、これら 3 箇所のズレが無視できないかもしれず、その時は同じデザインの画像に上下のズレ補正をかけたものを作り、ここで定義してやるしかない。 但し、フレーム画像との完全な一体化は、ウィンドウ最大化・非最大化時で配置起点の異なるフレーム画像の仕様故、どちらにあわせるか選択しなければならない。 

4. theme_ntp_background （1. 画像要素 番号 5）

新しいタブページでウィンドウの大部分を占める大きな白いスペース（上図緑色部分）に表示される画像要素で、アルファ透過画像も使える。

"ntp" は "new tab page" の略なので、表記に "ntp" の文字を含む要素は全て「新しいタブページ」に対応している。

ブラウザの背景画像を作成するには２つの方法がある。リピートやタイル貼りを必要としない１つの大きな画像を使うか、あるいは小さな画像を使って、それを横方向、及び／若しくは縦方向へリピート配置するかである。（”ntp_background_repeat” を参照）

また、画像表示位置設定のオプションもあり、デフォルトの中央配置整列を、他に変更できる。（”ntp_background_alignment” を参照）

最大表示領域をカバーする画像に、画面プロパティ要素の "ntp_background_alignment" を "top" に設定した時、アプリページでは何故か肝心のトップが少し隠れてしまった。 何故？ｗ

拡張要素を使えばより凝ったテーマが作成できる。

2. テーマ拡張要素 （1. 画像要素）

5. theme_frame_inactive （1. 画像要素 番号 1.1）

Chrome のウィンドウが非アクティブの時、フレーム（タブの背後となるウィンドウの最外枠）に表示される画像要素（左上が配置原点）。

"theme_frame" と名の付く要素の全てに言える事だが。通常、テーマが重くならないよう、色調要素の "frame_inactive" で、非アクティブウィンドウを定義する。 そうすれは新しい画像を作成するより効率的だ。 それでも、非アクティブ用に画像を用意するのか、非アクティブウィンドウの色調要素で調整するのかは、結局はデザイナーの決定次第である。

6. theme_frame_incognito （1. 画像要素 番号 2）

シークレットモードのウィンドウフレームに表示される画像要素。 シークレットウィンドウ専用に別画像をデザインしても良いし、無視する事もできる。 その場合、"theme_frame" 用に作った画像が色調要素（"frame_incognito" を参照）の影響を受け、シークレットモードで使用される（デフォルトでは、シークレットモードでは暗い色調となる）。

7. theme_frame_incognito_inactive （1. 画像要素 番号 1.2）

非アクティブなシークレットウィンドウのフレームに表示される画像要素（"frame_incognito_inactive" を参照）。

8. theme_tab_background_incognito （1. 画像要素 番号 3.1）

シークレットウィンドウの非アクティブタブに表示される画像要素。 シークレットウィンドウの非アクティブタブには、色調要素の "background_tab" を使用する事もできるが、それには若干の問題がある。 色調要素を使った場合、非アクティブタブは（デフォルトで）透過処理される為、タブの背後、つまりフレームが見えてしまうのだ。 それを回避したいならば、この画像要素を使えば良い。

9. theme_tab_background_v （1. 画像要素 番号 4）

※現行バージョンでも同様！ この画像要素の役割は、誰かが解かなければならない謎！

10. theme_frame_overlay （1. 画像要素 番号 6）

フレームの左上角部分に表示される画像要素。 "theme_frame" 画像と位置が重なるが、こちらが手前となる。 また、この画像ははリピート配置されないので、フレームエリアで画像をリピート処理させたくない場合に使えるかも。 "theme_frame" 同様、80ピクセル以上の高さが望ましく、色要素の "frame" と調和するように、底部をアルファ透過グラデーション処理するのが一般的。

11. theme_frame_overlay_inactive （1. 画像要素 番号 6.1）

ブラウザウィンドウが非アクティブの時に表示される画像要素。 これを定義しない場合、非アクティブウィンドウには "theme_frame_overlay" 画像要素が暗く色調処理されて使われる。

12. theme_button_background （1. 画像要素 番号 7）

※現行バージョンではこの効果を確認できず！

各種ボタン（停止、更新、戻る、進む、等）用の背景画像要素。 これを定義しなくても、色要素の "button_background" でボタンの背景色を上書きできる。

ここにはどんな画像を持ってきても、画像上部と左側に２ピクセルの余白が生じ、表示される25ピクセル四方のボタン用背景画像の中央に、ボタン（停止、更新、戻る、進む、等）のアイコン／シンボルが配置される。.

13. theme_ntp_attribution （1. 画像要素 番号 8）

新しいタブページの右下隅に表示される画像要素。 Chrome が自動的に「テーマの作成者」というヘッダを付け、その下にここで定義した画像が表示される。

作成者名（必要ならば連絡先も）用として必要最小限のアルファ透過PNGファイルを作成すると良い。 大きく派手な色の画像は目を引くだろうが、大きなPNGファイルはテーマのファイルサイズを増加させ、結果重くなる。

14. theme_window_control_background （1. 画像要素 番号 9）

ウィンドウコントロールボタン（最小化、最大化、閉じる）用の画像要素。 特に必要が無ければ定義せずとも良い。 定義した場合、画像の上部と左側に1ピクセルの余白を残し、16ピクセル高のボタンを表示、幅はボタンに応じて変化する。

この画像要素を定義しない場合、色要素の "button_background" を設定しなければ、画像要素 ”theme_frame” で設定したフレーム画像が透けて見える。

色要素 "button_background" での設定には若干問題があるので、何かしたければ、こちらの方が良いかもしれない。

3. テーマ拡張要素 （2. 色要素）

"manifest.json" ファイルでこの要素を定義するための書式は、"要素名" : [R,G,B]、不透明度まで設定できる場合は "要素名" : [R,G,B,不透明度] となり、R,G,B は 0-255、不透明度は 0-1 の小数値（0 が透明、1 が不透明）を指定する。

15. frame （2. 色要素 番号 10）

ブラウザのフレームエリア（タブの後背部、及びウィンドウの境界線）の色要素。 画像要素の "theme_frame" を定義した時だけ有効で、その画像がカバーしない部分の色となる。

16. frame_inactive （2. 色要素 番号 10.1）

非アクティブな／フォーカスの当たっていないブラウザのフレームエリア（タブの後背部、及びウィンドウの境界線）の色要素。 画像要素の "theme_frame" を定義した時だけ有効で、その画像がカバーしない部分の色となる。

17. frame_incognito （2. 色要素 番号 10.2）

"frame" と同様の色要素だが、シークレットウィンドウでの定義。

18. frame_incognito_inactive （2. 色要素 番号 10.3）

"frame_inactive" と同様の色要素だが、シークレットウィンドウでの定義。

19. toolbar （2. 色要素 番号 10.4）

標準設定でのブックマークバー（新しいタブページだけに表示される）の背景色を指定する色要素。 「ブックマークバーを常に表示する」設定（Ctrl + Shift + B でも表示・非表示の設定可能）の場合には適用されない。 また、この要素には不透明度も設定する事ができ、（リンクにマウスポインタを重ねた時、ページ下部に浮かび上がる）ステータスバーやダウンロードバーの背景色もここの設定に従う。 透過色にしていれば、ステータスバー等の下は透けて見える事になり、こちらは効果が及ぶのも新しいタブページに限らない。

記載例、 "toolbar" : [25, 154, 154, 0.5]

20. tab_text （2. 色要素 番号 11）

カレントタブに表示されるテキストの色要素。

21. tab_background_text （2. 色要素 番号 12）

非アクティブタブに表示されるテキストの色要素。

22. bookmark_text （2. 色要素 番号 13）

新しいタブページだけに表示される標準設定のブックマークと、ウィンドウ下部に現れるダウンロードバーに表示されるテキストの色要素。 注記）ダウンロード中の進行MB数を示す文字色は設定できない。

23. ntp_background （2. 色要素 番号 14）

新しいタブページの背景色を指定する色要素（"theme_ntp_background" で画像の配置されていない全ての領域をカバー）。 画像要素 "theme_ntp_background" でアルファ透過画像を指定している場合、"ntp_background" はそういった画像の見え方に影響を及ぼす事に注意。

24. ntp_text （2. 色要素 番号 14.1）

新しいタブページに表示される「よくアクセスするページ」のサイトサムネイルの上に表示されるタイトル文字色を設定する色要素。 同ページ右上の文字（アカウント名、Gmail、画像）と、ページ中央の Google ロゴ右下に表示される「日本語」の文字には、この設定効果が無く、他にこれらを設定できる要素が見当たらない。

ここで指定した文字色は、その文字とサムネイルが収まる区画の背景色に影響する。 白い文字を設定すれば背景は暗くなり、黒い文字を設定すれば背景は白くなる。

25. ntp_link （2. 色要素 番号 14.2）

新しいタブページに表示されるリンクの色要素。

26. ntp_link_underline （2. 色要素 番号 14.3）

新しいタブページに表示されるリンク下線の色要素（”ntp_link” 要素の下線色）。

27. ntp_header （2. 色要素 番号 14.4）

新しいタブページに表示される「よくアクセスするページ」のサムネイル配置区画の周囲に表示される境界線色を指定する色要素。 ntp_section と重複するが、双方に別々の値を定義すると、こちらが優先される。

28. ntp_section （2. 色要素 番号 14.5）

新しいタブページに表示される「よくアクセスするページ」のサムネイル配置区画の周囲に表示される境界線色を指定する色要素。 ntp_header と重複するが、双方に別々の値を定義すると、こちらは無効となる。

29. ntp_section_text （2. 色要素 番号 14.6）

新しいタブページに表示される「よくアクセスするページ」のサイトサムネイル上の文字は、5.3.10. ”ntp_text” の設定に従う。

※現行バージョンでは、効果の現れる対象を見つけられない。 無効？

30. ntp_section_link （2. 色要素 番号 14.7）

※現行バージョンでは、効果の現れる対象を見つけられない。 無効？

31. ntp_section_link_underline （2. 色要素 番号 14.8）

※現行バージョンでは、効果の現れる対象を見つけられない。 無効？

32. control_background （2. 色要素 番号 15）

名前からすると、ウィンドウ右上にあるコントロールボタン（最小化、最大化、閉じる）の色を指定する色要素のようだが、現行バージョンでは次項 5.3.19. button_background がその機能を有する。

33. button_background （2. 色要素 番号 16）

画像要素の "theme_frame" を定義した時だけ有効となる。 名前からすると、ツールバーエリアにあるボタン（戻る、進む、更新等）の背景色を設定する色要素のようだが、現行バージョンではツールバーのボタンには無関係で、ウィンドウ右上にあるコントロールボタン（最小化、最大化、閉じる）の背景色を指定する色要素。 この要素は "toolbar" と同じく、不透明度を設定できる（0 が透明、1 が不透明、0 から1 までの少数値で設定）が、動作が不安定。

背景色に白 [255,255,255] を指定した場合、不透明度は 0 または 1 でしか機能せず、間の小数値では正常に表示されない（私の環境では青色となった）。

但し、背景色に黒 [0,0,0] を指定した場合、小数値の不透明度も問題なく設定できた。

“manifest.json” ファイルでの定義書式は、"button_background" : [R,G,B,不透明度]

記載例、"button_background" : [25, 154, 154, 0.5]



4. テーマ拡張要素 （3. 色調要素）

色調要素は、ボタンのシンボルマークや非アクティブタブ、非アクティブウィンドウ・シークレットウィンドウのフレームにかけられるマスクのような補正で、色相（H=Hue）、彩度（S=Saturation）、明度（L=Lightness）を 0 から 1 までの小数値で指定して調整する。

書式は、 "色調要素名" : [H,S,L]

記載例、"buttons" : [0.3,0.5,0.5]

（0 から 1 までの小数値なので、0.125 とか 0.65 でも良い）

（H,S,L のいずれでも、変更しない場合は -1.0 を指定 ※ -1 でも良いかも）

• 色相（H）、0 が赤、0.1, 0.2,,, と色が変化、1 で赤に戻る（時計のような巡回変化）
• 彩度（S）、0 でグレースケール、1 が最もカラフル（Hを調整するなら、ここはまず 1 から）
• 明度（L）、0 は真黒、1 は真白（白か黒ならここだけでOK）

34. buttons （3. 色調要素 番号 17）

ツールバーにあるボタンのシンボルマーク（戻る、進む、更新、設定、等）の色調を指定する色調要素。 現行バージョンではシンボルマークの見え方はこれにかかっているので重要かも。

"buttons":[1,1,0.5] で赤、"buttons":[-1.0,-1.0,0] で黒、"buttons":[-1.0,-1.0,1] で白を確認。

色を変えるには "buttons":[H,1,0.5] で H の値を 0 から 1 の間で調整すると良い。

35. frame （3. 色調要素 番号 18）

フレームエリアの色調を指定する色調要素。フレームエリア用に作成した画像は全て、ここで指定した色調要素の影響を受ける。

36. frame_inactive （3. 色調要素 番号 18.1）

非アクティブウィンドウのフレームに色調要素 “frame” と同じ効果をもたらす。

37. frame_incognito （3. 色調要素 番号 18.2）

シークレットウィンドウのフレームに色調要素 “frame” と同じ効果をもたらす。フレームエリア用に作成した画像は全て、ここで指定した色調要素の影響を受ける。

38. frame_incognito_inactive （3. 色調要素 番号 18.3）

非アクティブなシークレットウィンドウのフレームに色調要素 “frame” と同じ効果をもたらす。

39. background_tab （3. 色調要素 番号 19）

非アクティブタブの色調要素。 これは最も影響範囲が広い。

5. テーマ拡張要素 （4. プロパティ要素）

40. ntp_background_alignment （4. プロパティ要素 番号 20）

"theme_ntp_background" で設定した画像の配置・表示に係るプロパティ要素。

記載例、"ntp_background_alignment" : "値"

値には、 "top", "bottom", "left", "right" のいずれか、または "left top", "right bottom" 等の組み合わせで指定する。 "left" は、新しいタブページの左端、縦方向には中央に背景画像が配置される。 "left top" の場合、新しいタブページの左上隅に画像が配置される。

※原文には無いが、”center” を指定しているテーマを見た。

記載例、"ntp_background_alignment" : "left bottom"

（ここでの定義を省略した場合、背景画像は中心に配置される）

不具合？＞最大表示領域をカバーするほぼピッタリな大きさの画像で、”center” 配置なら画像左上にあるデザインがちゃんと見えるのに、"top" を指定した時のアプリページでは何故かトップ配置になっておらず、まるで “bottom” を設定したかのように画像の上部分が少し隠れてしまった。

41. ntp_background_repeat （4. プロパティ要素 番号 21）

画像要素 “theme_ntp_background”.のリピート処理を定義するプロパティ要素。

記載例、"ntp_background_repeat" : "値"

値には "repeat", "no-repeat", "repeat-x", "repeat-y" を指定する。 用意した画像に応じて、横方向へのリピート、縦方向へのリピート、もしくはリピートしないよう選択できる。（デフォルトはリピートオン？）

42. ntp_logo_alternate （4. プロパティ要素 番号 22）

Google Chrome のロゴ設定。 検索エンジンを Google から変更していなければ、新しいタブページ中央に表示される検索ボックス上の Google のロゴの設定だ。

記載例、"ntp_logo_alternate" : 値

要素の値をダブルクォーテーションで囲まない事に注意！ 値には 0 か 1 を指定する。

0 はカラフルな Google Chrome ロゴ、1 は真っ白なロゴを表示。

定義しないと 1 の白いロゴになる。

6. パッケージ化

テーマの名前をつけて最初に作ったフォルダに、完成した "manifest.json" ファイルと、必要な画像が入ったサブフォルダ “images” が用意できたら、いよいよテーマのテストが準備完了。 現行バージョン（Ver. 43.0.2357.132 m）では、テーマをテストしたり、パッケージ化するためのオプションがあるので、以下でそれを説明する。

※パッケージ化に関する更なる情報（Google 公式）

https://developer.chrome.com/extensions/packaging

6. Chrome の設定画面を開く（閉じるボタン下の横三本アイコンから）
7. 左メニューから拡張機能を選択、最上部右のデベロッパーモードにチェック
8. まずはテストとして、「パッケージ化されていない拡張機能を読み込む」ボタンをクリック
9. 現れたダイアログから最初に作ったテーマの名前をつけたフォルダを指定
10. エラーがあれば先程クリックしたボタンの下に表示される
11. 問題が無ければテーマが適用される（これは出来を確認する為の仮適用）
12. 仕上がりに納得ができたら 6.2. で表示された「拡張機能のパッケージ化」ボタンをクリック
13. テーマのフォルダと秘密鍵ファイル（省略可）を指定
14. ダイアログの「拡張機能のパッケージ化」ボタンをクリック

以上で、テーマが拡張機能としてパッケージ化された ”テーマフォルダ名”.crx ファイルと、それをバージョンアップする際に必要となる公開鍵ファイル ”テーマフォルダ名”.pem が、テーマフォルダと同じディレクトリに作成される。

出来上がった拡張機能ファイルを Chrome にドラッグ＆ドロップでインストールすれば、正式にテーマとして適用される事になる。

テーマの出来に満足できたら、パッケージ化した crx ファイルではなく、テーマフォルダのの zip ファイルを作成して Chrome ウェブストアのデベロッパー ダッシュボードからアップロードできる・・・

・・・できるのだが、よく読むと、最初のアイテムを公開する前に、1 回限りのデベロッパー登録手数料として US$5.00 を支払わなければならないとか・・・

デベロッパーのアカウントを確認し、不正行為からユーザーを保護する為に使われるそうだが、そうする事で最大 20 アイテムを公開できるらしい・・・って、どこが 1 回限りなんだかｗ