Google Chromeテーマの作り方

先日Mixed BerryというGoogle Chromeのテーマを制作してストアに公開したので作り方をご紹介。

と言っても必要なファイルはmanifest.jsonだけ。
以下にMixed Berryのmanifest.jsonを記述しましたので改変してお使いください。
※色はRGBで指定します

manifest.json


{
    "manifest_version": 3,
    "version": "1.0",
    "name": "Mixed Berry",
    "theme": {
        "colors": {
            "background_tab": [32, 23, 47],
            "background_tab_inactive": [32, 23, 47],
            "background_tab_incognito": [32, 23, 47],
            "background_tab_incognito_inactive": [32, 23, 47],
            "bookmark_text": [232, 227, 238],
            "button_background": [242, 205, 7],
            "frame": [32, 23, 47],
            "frame_inactive": [32, 23, 47],
            "frame_incognito": [32, 23, 47],
            "frame_incognito_inactive": [32, 23, 47],
            "toolbar": [80, 60, 98],
            "toolbar_button_icon": [232, 227, 238],
            "tab_text": [232, 227, 238],
            "tab_background_text": [231, 50, 143],
            "tab_background_text_inactive": [231, 50, 143],
            "tab_background_text_incognito": [231, 50, 143],
            "tab_background_text_incognito_inactive": [231, 50, 143],
            "ntp_background": [32, 23, 47],
            "ntp_text": [231, 50, 143]
        }
    }
}

manifest.jsonの作成が完了したらchrome://extensions/にアクセスしてそのディレクトリごと拡張機能として読み込めば反映されます。
上記以外でも設定できる項目がありますので詳しくはkOverwritableColorTableをご覧ください。

Online Google Chrome Theme Creatorというオンラインサービスもあるのでプレビューしながら作りたい方はこちらを利用してみてください。

manifest.json

参考