主题

优质
小牛编辑
126浏览
2023-12-01

主题

Contents

  1. Manifest
    1. colors
    2. images
    3. properties
    4. tints
  2. Additional documentation

主题是一种特殊的扩展,可以用来改变整个浏览器的外观。主题和标准扩展的打包方式类似,但是主题中不能包含JavaScript或者HTML代码。

您可以更换主题在主题画廊

Manifest

下面是manifest.json的示例代码,用来生成一个特定的主题。

{
  "version": "2.6",
  "name": "camo theme",
  "theme": {
    "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" : {
      "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" : {
      "buttons" : [0.33, 0.5, 0.47]
    },
    "properties" : {
      "ntp_background_alignment" : "bottom"
    }
  }
}

颜色

颜色采用 RGB格式。 如果想了解更多颜色值,可以在 theme_service.cc 文件中查找 kDefaultColor* 。

图片

图片资源使用扩展的根目录作为引用路径。你可以通过 theme_service.cc .文件中的 kThemeableImages 修改任何图片资源。删除 "IDR_" 标识并将剩下的字符串修改为小写字母。例如, 将 IDR_THEME_NTP_BACKGROUND (表示kThemeableImages用来指定新标签的背景) 修改为"theme_ntp_background"。

属性

该字段允许您指定主题的属性。例如背景对齐、背景重复和logo的轮换。更多的信息可以参考 theme_service.cc

tints

您可以将tints应用到按钮、框架UI 、背景标签等用户界面。Google Chrome 支持tints,但是不支持图片。因为图片不能跨平台工作,并且当添加一些新的按钮时会变得很脆弱。 如果想了解tints,在 theme_service.cc 文件 "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