【WP】Chrome主题diy

经常使用的浏览器是chrome，但是在Chrome网上应用店（https://chrome.google.com/webstore/category/themes）下载安装的主题都不是很喜欢，故找了一些相关资料，diy一个主题，简单的自定义壁纸。

Chrome主题diy 效果截图

A theme is a special kind of extension that changes the way the browser looks. Themes are packaged like regular extensions, but they don’t contain JavaScript or HTML code.

可以看到，官网（https://developer.chrome.com/extensions/themes）是这么说的：主题是特殊的扩展，它改变浏览器的外观。主题的文件打包规则类似扩展的文件打包，但是不包含js或html代码。

只有一个Manifest文件和图片资源，而Manifest文件使用JSON格式保存数据。

Chrome扩展都包含一个Manifest文件——manifest.json，这个文件可以告诉Chrome关于这个扩展的相关信息，它是整个扩展的入口，也是Chrome扩展必不可少的部分。【引】

Here is an example manifest.json file for a theme:

{
  "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"
    }
  }
}

colors 颜色

Colors are in RGB format.

images 图片

Image resources use paths relative to the root of the extension.

properties 属性

This field lets you specify properties such as background alignment, background repeat, and an alternate logo.

tints 色彩

You can specify tints to be applied to parts of the UI such as buttons, the frame, and the background tab. Google Chrome supports tints, not images, because images don’t work across platforms and are brittle in the case of adding new buttons.

 

下面看个例子：

{
   "description": "devwang-theme【email：devwang.com@gmail.com】",
   "manifest_version": 2,
   "name": "devwang-theme",
   "short_name": "devwang",
   "theme": {
     "colors": {
       "bookmark_text": [0, 0, 0],
       "frame": [71, 105, 91],
       "ntp_background": [255, 255, 255],
       "ntp_link": [36, 70, 0],
       "ntp_section_link": [207, 221, 192],
       "ntp_section_text": [207, 221, 192],
       "ntp_text": [20, 40, 0],
       "tab_background_text": [ 102, 102, 102],
       "tab_text": [0, 0, 0],
       "toolbar": [207, 221, 192]
   },
   "images": {
     "theme_ntp_background": "images/bg.jpg",
     "theme_toolbar": "images/tb.png"
   },
   "properties": {
     "ntp_background_alignment": "center center",
     "ntp_background_repeat": "no-repeat"
   },
   "tints": {
     "background_tab": [ 0, 0, 0 ],
     "buttons": [0.33, 0.5, 0.47 ]
   }
 },
   "version": "1.0.0"
}

效果如上图。

源码：

GitHub下载：https://github.com/devwang-com/devwang-theme