【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

【WP】Chrome主题diy相关推荐

WP免费主题，wordpress免费主题，WP建站主题
WP免费主题,对于网站站长来说,建立个人网站在线展示他们的网站非常重要,这能体现他们的专业性,给人留下深刻的印象.WordPress是个开源建站程序,不需要懂代码,就能轻松的搭建个人网站或博客,WP免 ...
下载或移除 Chrome 主题背景
下载或移除 Chrome 主题背景您可以在计算机上使用有趣的主题背景来对您的 Chrome 进行个性化设置.该主题背景会显示在浏览器的边框位置并会在您打开新的标签页时成为新标签页的背景.Chrome ...
保存chrome主题背景的图片
chrome主题背景的图怎样可以保存下来? 在chrome地址栏中输入: chrome://theme/IDR_THEME_NTP_BACKGROUND?npebkpkiddfadallfhefpip ...
Chrome主题下载网站安装简单教程
chrome主题站地址:https://www.themebeta.com/ 选中一个点击进去点击 Apply theme 即可下载并应用该主题.
Edge使用Chrome主题后按钮颜色显示有误的解决方法（WinMac）
在之前的一次更新后,Edge的按钮(前进,后退,刷新)不管什么情况都是灰色的,正常来讲只有当不可用时才会变灰.昨天闲着没事尝试解决了一下. Edge地址栏输入 edge://versi ...
chrome主题_谷歌Chrome将很快允许用户创建自定义主题
站长之家(ChinaZ.com) 7月31日消息:据9to5google报道,虽然用户可以通过Chrome Web Store定制主题,但用户要根据自己的独特喜好定制主题却不是一个简单的事.谷歌正寻 ...
计算机组装大赛主题,DIY装机大赛策划书
DIY装机大赛策划书相关内容: "风筝满天飞,歌声多张扬"活动策划书活动主题:风筝满天飞,歌声多张扬本次活动象征生命与青春.热情与活力,我们舞台有多大我们梦想有多高.... 文章 ...
Google Chrome 主题下载站分享
FreeChromeThemes 是一个专门提供 Google Chrome 浏览器主题的网站. 目前主要提供了三大类主题: 单纯修改了颜色仿其它浏览器(如Firefox.Opera) 其他主题安 ...
chrome修复_使用Google的新Chrome主题修复暗模式
chrome修复 Did you know Chrome has themes? Most people probably realized this at one point but since f ...

【WP】Chrome主题diy

【WP】Chrome主题diy相关推荐

最新文章

热门文章