主題 · Chrome 擴展開發文檔

# 主題 ## Contents 1. [Manifest](#manifest) 1. [colors](#colors) 2. [images](#images) 3. [properties](#properties) 4. [tints](#tints) 2. [Additional documentation](#moredoc) 主題是一種特殊的擴展,可以用來改變整個瀏覽器的外觀。主題和標準擴展的打包方式類似,但是主題中不能包含JavaScript或者HTML代碼。您可以更換主題在[主題畫廊](https://tools.google.com/chrome/intl/en/themes/)。 ![](https://box.kancloud.cn/2015-12-28_5680aaff28e44.gif)![](https://box.kancloud.cn/2015-12-28_5680aaff36e40.gif)![](https://box.kancloud.cn/2015-12-28_5680aaff447e0.gif) ## Manifest 下面是[manifest.json](manifest.html)的示例代碼，用來生成一個特定的主題。 ``` { ??"version": "2.6", ??"name": "camo theme", **??"theme": { ?? ?"[images](#images)" : { ?? ? ?"theme_frame" : "images/theme_frame_camo.png", ?? ? ?"theme_frame_overlay" : "images/theme_frame_stripe.png", ?? ? ?"theme_toolbar" : "images/theme_toolbar_camo.png", ?? ? ?"theme_ntp_background" : "images/theme_ntp_background_norepeat.png", ?? ? ?"theme_ntp_attribution" : "images/attribution.png" ?? ?}, ?? ?"[colors](#colors)" : { ?? ? ?"frame" : [71, 105, 91], ?? ? ?"toolbar" : [207, 221, 192], ?? ? ?"ntp_text" : [20, 40, 0], ?? ? ?"ntp_link" : [36, 70, 0], ?? ? ?"ntp_section" : [207, 221, 192], ?? ? ?"button_background" : [255, 255, 255] ?? ?}, ?? ?"[tints](#tints)" : { ?? ? ?"buttons" : [0.33, 0.5, 0.47] ?? ?}, ?? ?"[properties](#properties)" : { ?? ? ?"ntp_background_alignment" : "bottom" ?? ?} ??}** } ``` ### 顏色顏色采用 RGB格式。如果想了解更多顏色值，可以在 [theme_service.cc](http://src.chromium.org/viewvc/chrome/trunk/src/chrome/browser/themes/theme_service.cc?view=markup) 文件中查找 kDefaultColor* 。 ### 圖片圖片資源使用擴展的根目錄作為引用路徑。你可以通過 [theme_service.cc](http://src.chromium.org/viewvc/chrome/trunk/src/chrome/browser/themes/theme_service.cc?view=markup) .文件中的 kThemeableImages 修改任何圖片資源。刪除 "IDR_" 標識并將剩下的字符串修改為小寫字母。例如，將 IDR_THEME_NTP_BACKGROUND (表示kThemeableImages用來指定新標簽的背景) 修改為"theme_ntp_background"。 ### 屬性該字段允許您指定主題的屬性。例如背景對齊、背景重復和logo的輪換。更多的信息可以參考 [theme_service.cc](http://src.chromium.org/viewvc/chrome/trunk/src/chrome/browser/themes/theme_service.cc?view=markup) 。 ### tints 您可以將tints應用到按鈕、框架UI 、背景標簽等用戶界面。Google Chrome 支持tints，但是不支持圖片。因為圖片不能跨平臺工作，并且當添加一些新的按鈕時會變得很脆弱。如果想了解tints，在 [theme_service.cc](http://src.chromium.org/viewvc/chrome/trunk/src/chrome/browser/themes/theme_service.cc?view=markup) 文件 "tints" 字段中查找 kDefaultTint*。 Tints 采用Hue-Saturation-Lightness (HSL)格式, 浮點數范圍為0 - 1.0： * **Hue** 是一個絕對值，只包含0 和1 。 * **Saturation** 是相對于當前圖片的。0.5 表示不變，0表示完全稀釋，1表示全部飽和。 * **Lightness** 也是一個相對值。0.5 表示不變，0表示有像素是黑色，1表示所有像素是白色。你可以選擇-1。0表示任何 HSL的值都不變。 ## 附加文檔社區提供了一些文檔用來幫助開發主題。地址如下： > [http://code.google.com/p/chromium/wiki/ThemeCreationGuide](http://code.google.com/p/chromium/wiki/ThemeCreationGuide)