Googleが配布しているウェブブラウザのGoogle Chrome(グーグル クローム)は、機能拡張によって変更・カスタマイズができます。
Chromeテーマとは、テーマファイルを使ってツールバーなどの外観のデザイン・配色を変えることができるようにした仕組で、Chrome ウェブストア > テーマで入手できます。
そのテーマファイルは、テキストエディターで好みの配色やお気に入りの写真やイラストを指定して比較的簡単に作成することができるので、作り方を紹介します。
今回使用したGoogle Chromeのバージョンは、31.0.1650.63 mです。
使用場所 | ファイル名 | サイズ |
---|---|---|
テーマを表すアイコン(小) | icon-16.png | 16 x 16px |
テーマを表すアイコン(中) | icon-48.png | 48 x 48px |
テーマを表すアイコン(大) | icon-128.png | 128 x 128px |
通常ウィンドウのフレーム | frame.png | 256 x 80px |
通常ウィンドウの非アクティブ状態のフレーム | frame_inactive.png | 256 x 80px |
通常ウィンドウのバックグラウンド状態のタブ | tab_background.png | 256 x 65px |
シークレットウィンドウのフレーム | frame_incognito.png | 256 x 80px |
シークレットウィンドウの非アクティブ状態のフレーム | frame_incognito_inactive | 256 x 80px |
シークレットウィンドウのバックグラウンド状態のタブ | なし(tab_background.png を再利用) | 256 x 65px |
ツールバー(アクティブ状態のタブ) | toolbar.png | 256 x 120px |
新しいタブページの背景 | ntp_background.png | 960 x 540px |
新しいタブページのロゴ | ntp_attribution.png | 180 x 32px |
ウィンドウの閉じる・サイズ変更ボタンの背景 | window_control_background.png | 256 x 16px |
{
"manifest_version":2,
"name":"Shiinotomoshibi",
"version":"1.0",
"icons":{
"16":"source/icon-16.png",
"48":"source/icon-48.png",
"128":"source/icon-128.png"
},
"theme":{
"images":{
//通常ウィンドウのフレーム
"theme_frame": "source/frame.png",
//通常ウィンドウの非アクティブ状態のフレーム
"theme_frame_inactive": "source/frame_inactive.png",
//通常ウィンドウのバックグラウンド状態のタブ
"theme_tab_background": "source/tab_background.png",
//シークレットウィンドウのフレーム
"theme_frame_incognito": "source/frame_incognito.png",
//シークレットウィンドウの非アクティブ状態のフレーム
"theme_frame_incognito_inactive": "source/frame_incognito_inactive.png",
//シークレットウィンドウのバックグラウンド状態のタブ
"theme_tab_background_incognito": "source/tab_background.png",
//ツールバー
"theme_toolbar": "source/toolbar.png",
//新しいタブページの背景
"theme_ntp_background": "source/ntp_background.png",
//新しいタブページのロゴ
"theme_ntp_attribution": "source/ntp_attribution.png",
//ウィンドウ操作ボタンの背景
"theme_window_control_background":"source/window_control_background.png"
},
"colors":{
//通常ウィンドウのフレーム
"frame": [ 0, 0, 0],
//通常ウィンドウの非アクティブ状態のフレーム
"frame_inactive": [ 0, 0, 0],
//シークレットウィンドウのフレーム
"frame_incognito": [ 0, 0, 0],
//シークレットウィンドウの非アクティブ状態のフレーム
"frame_incognito_inactive":[ 0, 0, 0],
//タブのテキスト
"tab_text": [192,255, 96],
//バックグラウンド状態のタブのテキスト
"tab_background_text": [ 32, 32, 32],
//ツールバー
"toolbar": [ 32, 32, 32],
//ブックマークバーのテキスト
"bookmark_text": [255,255,255],
//新しいタブページの背景
"ntp_background": [ 0, 0, 0],
//新しいタブページのテキスト
"ntp_text": [255,255,255],
//新しいタブページのリンクテキスト
"ntp_link": [192,255, 96],
//新しいタブページのテキスト
"ntp_section_text": [255,255,255],
//新しいタブページのリンクテキスト
"ntp_section_link": [192,255, 96]
},
"tints":{
//通常ウィンドウのフレーム画像
"frame": [-1.0,-1.0,-1.0],
//通常ウィンドウの非アクティブ状態のフレーム画像
"frame_inactive": [-1.0,-1.0,-1.0],
//シークレットウィンドウのフレーム画像
"frame_incognito": [-1.0,-1.0,-1.0],
//シークレットウィンドウの非アクティブ状態のフレーム画像
"frame_incognito_inactive":[-1.0,-1.0,-1.0],
//バックグラウンド状態のタブ画像
"background_tab": [-1.0,-1.0,-1.0],
//ボタン
"buttons": [ 0.0, 0.0, 1.0]
},
"properties":{
"ntp_background_alignment":"bottom",
"ntp_background_repeat": "repeat-x",
"ntp_logo_alternate": 1
}
}
}
Chrome ウェブストアのデベロッパー ダッシュボードでアップロードする場合は、コメント(//から行末まで)を削除する必要があります。
Google Chrome 52.0.2743.116 m (64-bit)
設定 > デザイン > デフォルトのテーマに戻す で初期設定のテーマになります。