Google Chroem の自分用テーマを超簡単に作成する方法

環境準備

とにかく、元となるようなテーマをインストールします。( 後でいろいろ変更すれば良いです )

インストールされたテーマデータを複写

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

に移動して、タイムスタンプよりインストールされたばかりのフォルダに入ります。



必要なのは、images フォルダ全てと、manifest.json です。これらをどこか好きなフォルダにコピーします。

テーマ用背景画像を images フォルダにコピー

jpg でも png でもどちらでもかまいません。そのファイル名を manifest.json の中の theme_ntp_background の値として変更します。

      "images": {
         "theme_button_background": "images/theme_button_background.png",
         "theme_frame": "images/theme_frame.png",
         "theme_frame_inactive": "images/theme_frame_inactive.png",
         "theme_frame_incognito": "images/theme_frame_incognito.png",
         "theme_ntp_background": "images/UrbanFuture4_1.jpg",
         "theme_tab_background": "images/theme_tab_background.png",
         "theme_tab_background_incognito": "images/theme_tab_background_incognito.png",
         "theme_tab_background_v": "images/theme_tab_background_v.png",
         "theme_toolbar": "images/theme_toolbar.png",
         "theme_window_control_background": "images/theme_window_control_background.png"
      },

他はとりあえずそのままにしておいて、他のファイルは自分用のパッケージを作成してからゆっくり変更して下さい。

manifest.json の変更

インストール済みの manifest.json には必要無い部分が含まれているので、以下のようなエントリのみにします( manifest_version が無い場合は追加して下さい )

{
   "manifest_version": 2,
   "name": "DAZ3D / sworc",
   "theme": {
      "colors": {
         "bookmark_text": [ 232, 232, 232 ],
         "button_background": [ 255, 9, 9 ],
         "control_background": [ 70, 0, 0 ],
         "frame": [ 4, 4, 4 ],
         "frame_inactive": [ 4, 4, 4 ],
         "frame_incognito": [ 4, 4, 4 ],
         "frame_incognito_inactive": [ 0, 0, 0 ],
         "ntp_background": [ 0, 0, 0 ],
         "ntp_header": [ 70, 0, 0 ],
         "ntp_link": [ 255, 9, 9 ],
         "ntp_link_underline": [ 255, 9, 9 ],
         "ntp_section": [ 70, 0, 0 ],
         "ntp_section_link": [ 255, 9, 9 ],
         "ntp_section_link_underline": [ 255, 9, 9 ],
         "ntp_section_text": [ 186, 186, 186 ],
         "ntp_text": [ 186, 186, 186 ],
         "tab_background_text": [ 4, 4, 4 ],
         "tab_text": [ 232, 232, 232 ],
         "toolbar": [ 56, 56, 56 ]
      },
      "images": {
         "theme_button_background": "images/theme_button_background.png",
         "theme_frame": "images/theme_frame.png",
         "theme_frame_inactive": "images/theme_frame_inactive.png",
         "theme_frame_incognito": "images/theme_frame_incognito.png",
         "theme_ntp_background": "images/UrbanFuture4_1.jpg",
         "theme_tab_background": "images/theme_tab_background.png",
         "theme_tab_background_incognito": "images/theme_tab_background_incognito.png",
         "theme_tab_background_v": "images/theme_tab_background_v.png",
         "theme_toolbar": "images/theme_toolbar.png",
         "theme_window_control_background": "images/theme_window_control_background.png"
      },
      "properties": {
         "ntp_background_alignment": "center",
         "ntp_background_repeat": "no-repeat",
         "ntp_logo_alternate": 1
      },
      "tints": {
         "background_tab": [ -1.0, 0.5, 0.75 ],
         "buttons": [ 1.0, 0.0, 1.0 ],
         "frame": [ -1.0, -1.0, -1.0 ],
         "frame_inactive": [ -1.0, -1.0, 0.75 ],
         "frame_incognito": [ -1.0, 0.2, 0.35 ],
         "frame_incognito_inactive": [ -1.0, 0.3, 0.6 ]
      }
   },
   "version": "1.0"
}

パッケージ作成とインストール

Google Chrome の chrome://extensions/ を開いて、デベロッパーモードをチェックして、拡張機能のパッケージ化で、パッケージを作成します。出来上がったパッケージは、拡張子が crx になります。出来上がったら、Google Chrome にドラッグ & ドロップするとインストール完了です。

細かいチューニング方法

オプションの詳細(英文)で細かい設定をチェックして、現在インストール済みのオプションを変更して状況を確かめます。

変更するには、Google Chrome を終了させて『C:\Users\ユーザ名\AppData\Local\Google\Chrome\User Data\Default\Preferences』を開いて manifest.json の内容がコピーされた部分を変更します。インストール先の manifest.json は変更しても状態は変化しません。Preferences の内容を変更したら、インストール先の Cached Theme.pak を削除して Google Chrome を起動すると変更されているばすです。(Cached Theme.pak は、Google Chrome 起動毎に作成されるので、この処理を繰り返して完成させます)

全ての変更が終わったら、パッケージ用の manifest.json に内容をコピーして再度パッケージ化すれば、オリジナルのテーマパッケージが完成します。