如何製作自訂皮膚擴充功能
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": "我的 Turbo 皮膚",
"version": "1.0.0",
"description": "自訂標題列、工具列與新分頁配色",
"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，切換新分頁預設標誌深淺 |
著色 theme.tints（選用）
用 HSL 三個 0–1 的小數給按鈕、外框等做整體染色。不熟悉可先不寫，只靠 colors 和圖片就夠做出完整皮膚。
在 Turbo 裡載入預覽
- 開啟
chrome://extensions（或 選單 → 擴充功能 → 管理擴充功能）。 - 開啟右上角 開發人員模式。
- 點擊 載入已解壓縮的擴充功能，選取
my-turbo-theme資料夾。 - 安裝成功後外觀會立刻切換。改 JSON 或換圖後，回到管理頁點該擴充功能的 重新整理。
TIP
佈景主題擴充功能會出現在列表裡，但沒有工具列圖示，這是正常的。移除或停用該擴充功能即恢復先前的外觀。
更完整的開發者入口說明見 擴充功能開發。
打包成 .crx
除錯滿意後，可在擴充功能管理頁點擊 打包擴充功能，選擇主題資料夾。成功後得到：
.crx— 安裝包，可拖進 Turbo 視窗安裝，或傳給別人.pem— 私鑰，請妥善保存，以後升級同一皮膚要用同一把鑰匙
安裝 .crx 的方式與一般擴充功能相同，見 擴充功能生態與翻譯。
製作建議
- 先定
toolbar色。 它同時決定工具列和目前分頁的底色，也會帶動網址列；圖的主色盡量貼近該 RGB，並保證tab_text對比度夠。未選取分頁另用theme_tab_background/tab_background_text。 - 標題列圖宜偏寬、可鋪排。
theme_frame在寬視窗上會重複，接縫處不要有明顯色差。 - 新分頁圖不要過大。 過大的 PNG 會拖慢開啟速度。
- 同時看淺色 / 深色系統。 皮膚不會自動跟隨系統深色模式。
- 版權。 只使用你有權使用的圖片。
常見問題
載入後沒有變化？
確認 manifest.json 在資料夾根目錄、JSON 無語法錯誤，且 "theme" 欄位存在。管理頁若顯示錯誤，依提示改後再重新整理。
只想改顏色、不想做圖？
刪掉 images 整段，只保留 colors 即可做成純色皮膚。
如何卸下自訂皮膚？
在 chrome://extensions 中移除或停用該佈景主題擴充功能；或開啟 設定 → 外觀，恢復預設配色。
能上架 Chrome 商店嗎？
可以依商店規則提交佈景主題。日常在 Turbo 裡用，載入資料夾或安裝 .crx 即可。標題列 佈景主題 入口面向 Edge 佈景主題商店，適合直接安裝現成主題。
延伸閱讀
- 擴充功能開發 — 開發人員模式、打包與發布
- 擴充功能生態與翻譯 — 商店、
.crx與一鍵換膚入口 - 內建效率工具 → 一鍵換膚
- Chrome 佈景主題清單說明（Google 文件，欄位與 Turbo 相同）