カスタムテーマ拡張の作り方

Turbo のスキン拡張は Chromium の テーマ拡張 です。ウィンドウの配色と背景画像だけを変え、スクリプトも権限も持ちません。形式は Chrome / Edge のテーマと同じです。フォルダを読み込んで試すことも、.crx にまとめて共有することもできます。

拡張を作らずに配色だけ変えたい場合は、タイトルバーの 外観 を使います。テーマ から Edge テーマストアも開けます。詳細は ワンクリックテーマ。

用意するもの

• Turbo が入った Windows または macOS
• manifest.json を編集するテキストエディタ
• 必要に応じた PNG（フレーム、ツールバー、新しいタブの背景）

例えば次のようなフォルダを作ります（my-turbo-theme/）：

my-turbo-theme/
  manifest.json
  images/
    frame.png
    toolbar.png
    ntp.png

画像は必須ではありません。無い項目は colors の単色で描画されます。

manifest.json を書く

中心は "theme" です。通常の拡張で使う background、content_scripts、permissions は書かないでください。

Manifest V3 の例です。値を書き換えて使えます：

{
  "manifest_version": 3,
  "name": "My Turbo theme",
  "version": "1.0.0",
  "description": "Custom frame, toolbar, and new-tab colors",
  "theme": {
    "images": {
      "theme_frame": "images/frame.png",
      "theme_toolbar": "images/toolbar.png",
      "theme_ntp_background": "images/ntp.png"
    },
    "colors": {
      "frame": [37, 99, 235],
      "frame_inactive": [100, 116, 139],
      "toolbar": [241, 245, 249],
      "tab_text": [15, 23, 42],
      "tab_background_text": [71, 85, 105],
      "bookmark_text": [30, 41, 59],
      "ntp_background": [248, 250, 252],
      "ntp_text": [15, 23, 42],
      "omnibox_background": [255, 255, 255],
      "omnibox_text": [15, 23, 42],
      "toolbar_button_icon": [51, 65, 85]
    },
    "properties": {
      "ntp_background_alignment": "center",
      "ntp_background_repeat": "no-repeat"
    }
  }
}

色は RGB 配列（0–255）です。ストアの古いテーマは Manifest V2 のことが多く、Turbo でも読み込めます。

よく使うフィールド

画像 theme.images

パスは拡張のルートからの相対パスです。PNG を推奨します。

キー	役割
theme_frame	タイトルバー / ウィンドウ枠（横方向にタイルされることが多い）
theme_toolbar	ツールバー、ブックマークバー、および選択中タブ付近
theme_tab_background	非選択タブの背景
theme_ntp_background	新しいタブの背景画像
theme_ntp_attribution	新しいタブのクレジット用の小さな画像（任意）

その他の画像キー（シークレット枠など）は省略して構いません。

色 theme.colors

キー	役割
frame / frame_inactive	アクティブ / 非アクティブの枠
toolbar	ツールバーの塗りで、選択中（アクティブ）タブの塗りでもある。選択中タブはツールバーとひと続きになります。Turbo ではアドレスバーもできるだけこの色に揃えます
tab_text	選択中タブ上の文字色
tab_background_text	非選択タブ上の文字色
bookmark_text	ブックマークバーの文字
ntp_background / ntp_text	新しいタブの塗りと文字
omnibox_background / omnibox_text	アドレスバーの塗りと文字
toolbar_button_icon	ツールバーアイコンの色

シークレット用に frame_incognito などを足せます。

プロパティ theme.properties

キー	よく使う値
ntp_background_alignment	center、top、bottom、left、right
ntp_background_repeat	no-repeat、repeat、repeat-x、repeat-y
ntp_logo_alternate	0 または 1（既定 NTP ロゴの濃淡）

ティント theme.tints（任意）

HSL の 0–1 を 3 つ指定してボタンや枠を染めます。最初は省略し、colors と画像だけで十分です。

Turbo で読み込んで確認する

1. chrome://extensions を開く（または メニュー → 拡張機能 → 拡張機能を管理）。
2. 右上の デベロッパーモード をオンにする。
3. パッケージ化されていない拡張機能を読み込む で my-turbo-theme を選ぶ。
4. すぐに外観が変わります。JSON や画像を直したら、その拡張の 再読み込み を押します。

TIP

テーマ拡張は一覧に出ますが、ツールバーアイコンはありません。拡張を削除または無効にすると以前の外観に戻ります。

開発者向けの操作は 拡張機能開発 も参照してください。

.crx にまとめる

拡張機能ページの 拡張機能をパッケージ化 でテーマフォルダを指定します。出力は次のとおりです。

• .crx — Turbo のウィンドウにドラッグしてインストール。他人に渡すこともできます
• .pem — 秘密鍵。同じテーマを後から更新するときに必要です。大切に保管してください

.crx の入れ方は通常の拡張と同じです。拡張機能 を参照してください。

作り方のコツ

• 先に toolbar を決める。 ツールバーと選択中タブの塗りの両方になり、アドレスバーにも影響します。画像の色を近づけ、tab_text のコントラストを確保してください。非選択タブは theme_tab_background / tab_background_text です。
• theme_frame は幅広でタイル向きに。 広いウィンドウでは継ぎ目が目立ちます。
• 新しいタブの画像は大きくしすぎない。 巨大な PNG は表示を遅くします。
• テーマは OS のダークモードに追従しません。
• 利用権限のある画像だけを使ってください。

よくある質問

読み込んでも見た目が変わらない
manifest.json がフォルダ直下にあるか、JSON の文法、"theme" の有無を確認してください。ページ上のエラーを直してから再読み込みします。

色だけ変えたい
images を削除し、colors だけ残します。

カスタムテーマを外すには
chrome://extensions で削除または無効にするか、設定 → 外観 で既定の配色に戻します。

Chrome ウェブストアに出せますか
ストアのルールに従えば提出できます。自分で使うだけならフォルダ読み込みか .crx で十分です。タイトルバーの テーマ は Edge テーマストア向けで、既存テーマを入れる用途です。

関連ガイド

• 拡張機能開発 — デベロッパーモード、パッケージ化、公開
• 拡張機能 — ストア、.crx、ワンクリック外観
• 内蔵生産性ツール → ワンクリックテーマ
• Chrome テーマのマニフェスト（フィールドは Turbo と同じ）