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 皮肤了! 

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

安装后的状态栏效果：

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