Google Chrome のテーマを自作する
こんにちは Chromeのテーマの外観を編集する方法を紹介します。
よしなに👌
html, css, js でかけそうですが、json で書いていきます。
そのため凝った効果をつけづらいので画像を頑張ってるくるとリッチな見た目になりますね。
やりたかったこと ＆ 今回作ったもの
タブの部分を透過させてブラーをかけてグラスモーフィズムなテーマを作りたかったのですが、RGBAで調整してもできないので画像を差し替えてそれっぽく見せるしかないみたいです。
こんな感じのテーマを作ったのでよければ使ってみてね！
フォルダの作成
manifest.jsonさえ入っていればOKです。
補足
テーマを公開するときに多言語の説明をおきたいときはlocalsを用意してあげると良いでしょう。
画像はimagesにまとめておくと管理が楽です。
テーマの名前
├─locals
│ ├─en
│ │ └─messeages.json
│ └─jp
│ └─messeages.json
├─manifest.json
└─images
manifest.json の用意
公式のを書き換えながらやればよきかな
公式より https://developer.chrome.com/docs/extensions/mv3/themes/
{
"manifest_version": 3,
"version": "2.6",
"name": "camo theme",
"theme": {
"images" : {
"theme_frame" : "images/theme_frame_camo.png",
"theme_frame_overlay" : "images/theme_frame_stripe.png",
"theme_toolbar" : "images/theme_toolbar_camo.png",
"theme_ntp_background" : "images/theme_ntp_background_norepeat.png",
"theme_ntp_attribution" : "images/attribution.png"
},
"colors" : {
"frame" : [71, 105, 91],
"toolbar" : [207, 221, 192],
"ntp_text" : [20, 40, 0],
"ntp_link" : [36, 70, 0],
"ntp_section" : [207, 221, 192],
"button_background" : [255, 255, 255]
},
"tints" : {
"buttons" : [0.33, 0.5, 0.47]
},
"properties" : {
"ntp_background_alignment" : "bottom"
}
}
}
manifest.json の詳細
もっと細かく設定したい場合は以下のコードとコメントアウトを参照してください（公式ドキュメントはもっといっぱい書いてある）
それぞれの場所に対して、アクティブ時とシークレット時の色や画像が選べる感じです。
colors
"colors": {
// 開いているタブ以外のタブの背景色
"background_tab": [ 0, 0, 0, 0.5 ],
// 非アクティブ時の開いているタブ以外のタブの背景色
"background_tab_inactive": [ 0, 0, 255 ],
"background_tab_incognito": [ 46, 46, 46, 0 ],
"background_tab_incognito_inactive": [ 46, 46, 46 ],
// ブックマークの文字色
"bookmark_text": [ 255, 255, 255 ],
// 開いてるタブ以外のタイトルの文字色
"frame": [ 255, 255, 255, 0 ],
// 非アクティブ時のボーダー色
"frame_inactive": [ 255, 255, 255 ],
"frame_incognito": [ 15, 15, 15 ],
"frame_incognito_inactive": [ 15, 15, 15 ],
// 背景色
"ntp_background": [ 255, 255, 255 ],
// new tab page のリンク
"ntp_link": [ 251, 255, 117 ],
// new tab page のテキスト
"ntp_text": [ 255, 255, 255 ],
// 検索ボックスの背景色
"omnibox_background": [ 255, 255, 255, 0.5 ],
// 検索ボックスの文字色
"omnibox_text": [ 255, 255, 255 ],
// 開いていないタブのタイトルの文字色
"tab_background_text": [ 255, 255, 255 ],
// インアクティブな開いていないタブのタイトル
"tab_background_text_inactive": [ 191, 191, 191 ],
"tab_background_text_incognito": [ 30, 30, 31 ],
"tab_background_text_incognito_inactive": [ 191, 191, 191 ],
// 開いてるタブのタイトル
"tab_text": [ 30, 30, 31 ],
// ツールバーの背景色
"toolbar": [ 255, 255, 255, 0.5 ],
"toolbar_button_icon": [ 204, 204, 204 ],
// ツールバーの文字色
"toolbar_text": [ 204, 204, 204 ]
},
images
画像は相対パスで指定すればOK。 ファイル形式はPNGである必要があるみたいです。
"images": {
"theme_frame": "images/theme_frame.png",
"theme_ntp_attribution": "images/theme_ntp_attribution.png",
"theme_ntp_background": "images/theme_ntp_background.png",
"theme_toolbar": "images/theme_toolbar.png"
},
properties
フィールド画像の背景の繰り返しや位置を設定できます。
"properties": {
"ntp_background_alignment": "left top",
"ntp_background_repeat": "repeat-x",
"ntp_logo_alternate": 0
},
tints
tintsは色合いを設定する項目です。 ボタン、フレーム、背景タブのUIの色合いを指定します。
Google ChromeではUIに関して、画像だと新しいボタンを追加する場合などでうまく機能しないため色合いで設定するようになっているようです。
ポイントはColorsとは異なりRGBAではなくHSL形式であり0~1.0の間の浮動小数店で指定できます。
値は次のようになります
[色相, 彩度, 明度]
- 色相 絶対値であり0と1が赤
- 彩度 0.5が変化なし、0はモノクロ、１は澱みなく鮮やか
- 明度0.5は変化なし、0は黒、１は白
-1.0を指定すると変更なしになるみたい。
"tints": {
"background_tab": [ -1, -1, -1 ],
"buttons": [ -1, -1, -1 ],
"frame": [ -1, -1, -1 ],
"frame_inactive": [ -1, -1, -1 ],
"frame_incognito": [ -1, -1, -1 ],
"frame_incognito_inactive": [ -1, -1, -1 ]
}
ローカライズ設定
多言語設定もできます。
_locals の用意
manifest.json と同じ階層に_localsフォルダを用意。
その下に"en", "jp"のようなフォルダを用意して、その中にdescription.jsonを入れてください。
manifest.json の変更
以下の３行を元々書いていたものから置き換えるなり、変更するなりしてください。
"default_locale": "en",
"description": "__MSG_description__",
"name": "__MSG_name__",
description.jsonの中身
以下みたいな感じで良き。
{
"description": {
"message": "Hogehogeなテーマです"
},
"name": {
"message": "hogehoge theme"
}
}
確認方法
chrome://extensions/ にアクセスして
右上の”開発者モード”のトグルをONにする
その後”パッケージ化されていない拡張機能を読み込む”を押してフォルダを指定すればOK
参考
Discussion