ウェブ制作ソフト
Google Chromeテーマの作り方

Googleが配布しているウェブブラウザのGoogle Chrome(グーグル クローム)は、機能拡張によって変更・カスタマイズができます。
Chromeテーマとは、テーマファイルを使ってツールバーなどの外観のデザイン・配色を変えることができるようにした仕組で、Chrome ウェブストア > テーマで入手できます。
そのテーマファイルは、テキストエディターで好みの配色やお気に入りの写真やイラストを指定して比較的簡単に作成することができるので、作り方を紹介します。
今回使用したGoogle Chromeのバージョンは、31.0.1650.63 mです。

手順

フォルダの作成

Google Chromeテーマ用のフォルダを作成
  1. テーマの名前を決めます。
    ここでは、「Shiinotomoshibi(シイノトモシビ)」としました。
    Shiinotomoshibiという名前と配色は、和歌山県那智勝浦町などで見られる光るキノコのシイノトモシビタケからとりました。
  2. 適当な場所にテーマと同じ名前のフォルダを作成します。
  3. そのフォルダの中に画像ファイルを入れるためのフォルダを作成します。
    ここでは、「source」としました。
    manifest.json は、後の「設定ファイルの作成」で説明します。

画像ファイルの作成

InkscapeでのGoogle Chromeテーマ用の画像ファイルを作成 Inkscapeの編集画面
  1. developer.chrome.comのThemesを参考にして、必要な画像ファイルを作成します。
    ここでは、Inkscape を使って、以下の PNGファイルを作成しました。
    GIMPなどでサイズ調整・トリムしたデジタル写真も使用できます。
    どの画像がどこに使われるかは、後の「設定ファイルの作成」の「manifest.jsonの例」をご覧ください。
使用場所 ファイル名 サイズ
テーマを表すアイコン(小) 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

設定ファイルの作成

  1. テキストエディタ(メモ帳的なもの)で新規ファイルを作成、配色と画像ファイルの位置(パス)・ファイル名を指定する情報を入力し、先ほど作成したテーマフォルダの中に「manifest.json」として保存します。
    Manifest Version 1は、Chrome 18からは非推奨となり、Chrome 21からは許可されなくなっているため、Version 2を使用します。
    ここでは、HTML Project2を使って、文字コードがUTF-8・改行コードがLFの以下の内容のテキストファイルを作成しました。
manifest.jsonの例
										
{
	"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 ウェブストアのデベロッパー ダッシュボードでアップロードする場合は、コメント(//から行末まで)を削除する必要があります。


テーマファイルの作成

  1. Google Chromeの ツールバー > 設定アイコン > ツール > 機能拡張 をクリックします。
    アドレスバーに「chrome://extensions/」と入力してもOKです。
  2. 右上の方にある「デベロッパー モード」をオンにしてデベロッパー用ボタン群を表示します。
  3. 「機能拡張のパッケージ化」をクリックします。
  4. 「機能拡張のルートディレクトリ」に最初に作成したテーマフォルダを設定し、「機能拡張のパッケージ化」をクリックします。
    エラーが出た場合は、問題を修正して再度行います。

テーマファイルのテスト

Google ChromeテーマのShiinotomoshibi
  1. 最初に作成したテーマフォルダと同じところにできたテーマファイル(拡張子はCRX)を Google Chromeのウィンドウにドラッグ・ドロップ、またはCRX拡張子をGoogle Chromeに関連付けてからダブルクリックし、最下部に表示される「続行」をクリックします。
  2. Google Chromeに反映されたテーマをチェックして、問題があれば画像・配色を修正して納得できるまでパッケージ化を繰り返します。
  3. Google Chromeテーマの完成です。

テーマの公開

  1. manifest.jsonとsourceフォルダが入ったフォルダを圧縮して、ZIPファイルを作成します。
  2. Chrome ウェブストア > デベロッパー ダッシュボード で、「新しいアイテムを追加するボタン」をクリックし、ZIPファイルをアップロードします。
  3. 編集フォームでアイテムの必要項目を入力します。

デフォルトのテーマ

Google Chrome 52.0.2743.116 m (64-bit)

設定 > デザイン > デフォルトのテーマに戻す で初期設定のテーマになります。

ページトップ

inserted by FC2 system