DIY——chrome谷歌浏览器皮肤的manifest.json风格文件和打包

前言：以前都在用世界之窗极速，是基于Chrome内核的！

都由于被360收买了，从2012年开始就在没更新了。

由于种种需求跟不上，最近换了谷歌的Chrome浏览器。

换了浏览器，当然也得换个皮肤，找了个皮肤，非常喜欢的。

只是都是灰色调的，状态栏都是灰白色的，完全看不到显示的地址。（下图文字打错了，因该是状态栏！）

接下来，我决定DIY一下，重新打包！

CRX文件：(谷歌浏览器的皮肤文件)

需要的先找到这个皮肤文件的所在处，我谷歌了一下，没什么结果，我于是打开了应用中心搜索了这个主题的关键词，wolf , 可以看到URL有该皮肤的ID ：

ggmdcbjhjccinfjcalchgkhimfkgpmem

以前了解过一些，文件夹是与ID命名的，打开电脑搜索C盘，找到文件夹所在。

可以看到manifest.json 就是这个主题的配置文件

用记事本打开，内容如下：

{
"description": "Jurawa Design Motivational Wolf Google Chrome Theme - 1280x800px",
"key": "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQD20rCTrKS6fZPkLdWjlFuKM7y4FJEAAHG84GSXIXYrbefwDQwLuvd+w2ucnX93MN5kc2OwrHuww4yOd7y0kcuQDzkZ2TPcUuC7FCtCsmF4rzGCUon7g131frXxjEcrCLwHNxsnGv2uiLb1tdXqJ3FVz9wbHKDVVgcsULqXihixYQIDAQAB",
"name": "Jurawa Design Wolf 1280x800",
"theme": {
"colors": {
"bookmark_text": [ 62, 95, 125 ],
"button_background": [ 224, 224, 224, 0 ],
"frame": [ 247, 247, 247 ],
"frame_inactive": [ 232, 232, 232 ],
"frame_incognito": [ 247, 247, 247 ],
"frame_incognito_inactive": [ 232, 232, 232 ],
"ntp_background": [ 0, 0, 0 ],
"ntp_text": [ 255, 255, 255 ],
"tab_background_text": [ 62, 95, 125 ],
"tab_text": [ 255, 255, 255 ],
"toolbar": [ 223, 223, 223 ]
},
"images": {
"theme_ntp_background": "images/theme_ntp_background.png",
"theme_tab_background": "images/theme_tab_background.png",
"theme_toolbar": "images/theme_toolbar.png"
},
"properties": {
"ntp_background_alignment": "",
"ntp_background_repeat": "no-repeat"
},
"tints": {
"background_tab": [ 0, 0, 1 ],
"buttons": [ 0.59333333333333, 0.390625, 0.25098039215686 ],
"frame": [ 0, 0, 0.96862745098039 ],
"frame_inactive": [ 0, 0, 0.90980392156863 ],
"frame_incognito": [ 0, 0, 0.96862745098039 ],
"frame_incognito_inactive": [ 0, 0, 0.90980392156863 ]
}
},
"update_url": "http://clients2.google.com/service/update2/crx",
"version": "1"
}

把原有的manifest.json文件复制一份,下面需要用到

1.下面，开始制作一份新的manifest.json：

以上内容有一项是Colors的，是控制主题背景和文字颜色的，由于我不想破坏灰白色主题的风格，所以我们把这里的文字颜色值修改为黑色，可以显示出地址文字就可以了，所以这里修改xxxx_text后面的颜色值就可以了，颜色值是RGB值改黑色值是 0, 0, 0，修改为：

"colors": {

         "bookmark_text": [ 0, 0, 0 ],

         "button_background": [ 224, 224, 224, 0 ],

         "frame": [ 247, 247, 247 ],

         "frame_inactive": [ 232, 232, 232 ],

         "frame_incognito": [ 247, 247, 247 ],

         "frame_incognito_inactive": [ 232, 232, 232 ],

         "ntp_background": [ 0, 0, 0 ],

         "ntp_text": [ 0, 0, 0 ],

         "tab_background_text": [ 0, 0, 0 ],

         "tab_text": [ 0, 0, 0 ],

         "toolbar": [ 223, 223, 223 ]

然后把文件的KEY项去掉（这是打包后生成的加密值），

在接近末尾处添加"manifest_version": 2,

最终内容为，即可完成manifest风格文件的制作：

{
"description": "Jurawa Design Motivational Wolf Google Chrome Theme - 1280x800px",
"name": "Jurawa Design Wolf 1280x800",
"theme": {
"colors": {
"bookmark_text": [ 0, 0, 0 ],
"button_background": [ 224, 224, 224, 0 ],
"frame": [ 247, 247, 247 ],
"frame_inactive": [ 232, 232, 232 ],
"frame_incognito": [ 247, 247, 247 ],
"frame_incognito_inactive": [ 232, 232, 232 ],
"ntp_background": [ 0, 0, 0 ],
"ntp_text": [ 0, 0, 0 ],
"tab_background_text": [ 0, 0, 0 ],
"tab_text": [ 0, 0, 0 ],
"toolbar": [ 223, 223, 223 ]
},
"images": {
"theme_ntp_background": "images/theme_ntp_background.png",
"theme_tab_background": "images/theme_tab_background.png",
"theme_toolbar": "images/theme_toolbar.png"
},
"properties": {
"ntp_background_alignment": "",
"ntp_background_repeat": "no-repeat"
},
"tints": {
"background_tab": [ 0, 0, 1 ],
"buttons": [ 0.59333333333333, 0.390625, 0.25098039215686 ],
"frame": [ 0, 0, 0.96862745098039 ],
"frame_inactive": [ 0, 0, 0.90980392156863 ],
"frame_incognito": [ 0, 0, 0.96862745098039 ],
"frame_incognito_inactive": [ 0, 0, 0.90980392156863 ]
}
},
"update_url": "http://clients2.google.com/service/update2/crx",
"manifest_version": 2,
"version": "1"

}

2. 找出皮肤文件 ！接下来，我们再去把这个CRX的皮肤找到。通过下载这个皮肤，不过谷歌浏览器安装皮肤后会马上删除这个文件。

最简单的，我们写个Bat批处理监控CRX生成的目录。（该目录就是你谷歌下载东西的保存的那个目录）。

我们命名以下批处理代码到“Look.bat” ，然后执行它 ,他监控到会马上复制到C盘，这个办法不是最好的。因为要和浏览器比快。。

@echo off

:look

for %%i in (*.crx) do (

echo 发现目标

copy "%%i" c:\ /y

goto end

ping 127.0.0.1 -n 2

goto look

:end

pause

当然我们也可以通过HTTP嗅探工具嗅探出皮肤的地址。聪明的同学有更好的办法或是代码欢迎提供出来 o(∩_∩)o ~~

3.解包皮肤文件

我们得到皮肤文件后，我的是叫extension_1.crx，把后缀.crx改为.rar，用RAR解包工具进行解包，得到以下文件夹和皮肤的manifest文件：

把刚才修改好的manifest覆盖这个！

4.打包新的皮肤文件 ...

打开chrome浏览器，打开”设置“---“扩展程序”，勾选开发人员模式，点打包扩展

选择刚才的已被替换过的皮肤文件夹例如我的是：“extension_1” ，

点打包扩展程序按钮就完成啦！

当你可以看到提示，那么恭喜你，便在你那个刚才那个目录(或C:\)上看到新打包的extension_1.cxr 皮肤了!

拖入新皮肤文件到浏览器中，就会提示你是否安装的了。

安装后的状态栏效果：

后续~~很少写博客，博客功能不会用，已经修改了好几遍了，时间有限就不继续修改了，乱糟糟的，坚持看完的童鞋们真是有耐心的，谢谢你们(*^__^*) ^^^···祝你们成功！

DIY——chrome谷歌浏览器皮肤的manifest.json风格文件和打包相关推荐

谷歌浏览器扩展程序manifest.json参数详解
{// Required"manifest_version": 2, // manifest编写规范版本,目前主流2"name": "My Exten ...
谷歌浏览器插件开发之 manifest.json 配置说明
前言 {// Required// 必须的字段3个"manifest_version": 2, // manifest编写规范版本,目前主流2"name": & ...
Chrome谷歌浏览器，清除css或js文件缓存的方法
在写网站首页界面的时候,css文件中给新建的<div>增加了class类的样式,但是无论怎样刷新都没有这个样式的效果. F12打开开发模式,对比这个<div>与其他的区别,发现 ...
chrome扩展开发（2）- manifest.json文件简述
一.本文目标结合具体应用场景,让读者对manifest.json文件的写法和主要属性拥有初步认识. 二.目标读者 chrome扩展开发的初学者,想要先从宏观上了解一下chrome扩展能干哪些事情,而 ...
Chrome插件manifest.json文件详解
开发Chrome插件首先就是配置manifest.json文件了,利用它我们可以定义在什么时机以及在什么网页执行什么脚本,有一些什么行为,下面我一起来看看这个文件有哪些配置项以及有什么作用: {// ...
Chrome 谷歌浏览器设置系统皮肤UI 和视频画中画模式
浏览器要求:Chrome谷歌浏览器稳定版最低要68版本以上,开发版最低要69版本以上谷歌Chrome浏览器开启全新Material Design UI界面在地址栏中输入以下字符串,然后按Enter ...
DIY chrome浏览器漫画翻页插件
最近迷上了火影忍者,在爱漫画网站上看的漫画版.每看完一页都要用鼠标点一下翻页键,时间长了觉得有些不爽.要是按上下键看漫画时,按一下旁边的键,就可以翻到下一页,会舒服不少. 用的是chrome浏览器,装 ...
chrome谷歌浏览器插件制作简易教程
1.在磁盘上创建一个目录,用来放应用的代码和资源 2.在这个目录中,创建一个文本文件,命名为manifest.json,其内容为: {"manifest_version": 2,& ...
Manifest.json文档说明
Manifest.json文件是5+移动App的配置文件,用于指定应用的显示名称.图标.应用入口文件地址及需要使用的设备权限等信息.是扩展的配置文件,指明了扩展的各种信息. 一个manifest.js ...

DIY——chrome谷歌浏览器皮肤的manifest.json风格文件和打包

DIY——chrome谷歌浏览器皮肤的manifest.json风格文件和打包相关推荐

最新文章

热门文章