Skip to content
2010年10月4日 / island205

[译].Google Chrome extensions(实验室).界面.主题

主题

主题是一个改变浏览器外观的扩展。主题扩展像一般的扩展一样打包起来,但是其中不包含JavaScript和HTML代码。

你可以在主题展览馆里找到很多的主题。

themes-1 themes-2 themes-3

 

 

Manifest

这是一个定制主题扩展的manifest.json文件:

   1:  {
   2:    "version": "2.6",
   3:    "name": "camo theme",
   4:    "theme": {
   5:      "images" : {
   6:        "theme_frame" : "images/theme_frame_camo.png",
   7:        "theme_frame_overlay" : "images/theme_frame_stripe.png",
   8:        "theme_toolbar" : "images/theme_toolbar_camo.png",
   9:        "theme_ntp_background" : "images/theme_ntp_background_norepeat.png",
  10:        "theme_ntp_attribution" : "images/attribution.png"
  11:      },
  12:      "colors" : {
  13:        "frame" : [71, 105, 91],
  14:        "toolbar" : [207, 221, 192],
  15:        "ntp_text" : [20, 40, 0],
  16:        "ntp_link" : [36, 70, 0],
  17:        "ntp_section" : [207, 221, 192],
  18:        "button_background" : [255, 255, 255]
  19:      },
  20:      "tints" : {
  21:        "buttons" : [0.33, 0.5, 0.47]
  22:      },
  23:      "properties" : {
  24:        "ntp_background_alignment" : "bottom"
  25:      }
  26:    }
  27:  }

颜色

RGB格式。到browser_theme_provider.cc查看你可以用Color属性的里的字段。

图片

图片URL必须为到扩展目录的相对路径。你可以覆盖在任何在browser_theme_provider.cc中被kThemeableImages指定的图片。去掉“IDR_”将剩下的字母转化为小写就可以了。比如:IDR_THEME_NTP_BACKGROUND(被KThemeable用来指定新建标签的背景图片)转化为“theme_ntp_background”。

属性

可配置例如background的对齐、重复等方式,还有备用标识。browser_theme_provider.cc查看更多的属性及其可取值。

色彩(Tints)

你可以指定类似于按钮、框架、标签背景等等部分浏览器UI的色彩,Chrome可以支持色彩,不支持图片,毕竟图片在跨平台支持不好而且如果添加按钮的话会比较脆弱。到browser_theme_provider.cc 查看更多的可以用在这里的属性。

TintsHue-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://www.cnblogs.com/island205/archive/2010/03/17/1688261.html

原文链接:http://code.google.com/chrome/extensions/themes.html

Advertisements

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s

%d 博主赞过: