热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

前言:以前都在用世界之窗极速,是基于Chrome内核的!都由于被360收买了,从2012年开始就在没更新了。由于种种需求跟不上,最近换了谷歌的Chrome浏览器。换了浏览器,当然也得换个皮肤,找了个皮

前言:以前都在用世界之窗极速,是基于Chrome内核的!

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

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


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

只是都是灰色调的,状态栏都是灰白色的,完全看不到显示的地址。(下图文字打错了,因该是状态栏!)

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

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

安装后的状态栏效果:



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

 




推荐阅读
  • 本文提供了一个详尽的前端开发资源列表,涵盖了从基础入门到高级应用的各个方面,包括HTML5、CSS3、JavaScript框架及库、移动开发、API接口、工具与插件等。 ... [详细]
  • JavaScript 跨域解决方案详解
    本文详细介绍了JavaScript在不同域之间进行数据传输或通信的技术,包括使用JSONP、修改document.domain、利用window.name以及HTML5的postMessage方法等跨域解决方案。 ... [详细]
  • 本文探讨了如何在Docker构建过程中使用动态环境变量,特别是针对Docker v1.9及以上版本的用户。我们将介绍如何声明和使用构建参数,以及这些参数对构建缓存的影响。 ... [详细]
  • 本文探讨了如何通过优化 DOM 操作来提升 JavaScript 的性能,包括使用 `createElement` 函数、动画元素、理解重绘事件及处理鼠标滚动事件等关键主题。 ... [详细]
  • Requests库的基本使用方法
    本文介绍了Python中Requests库的基础用法,包括如何安装、GET和POST请求的实现、如何处理Cookies和Headers,以及如何解析JSON响应。相比urllib库,Requests库提供了更为简洁高效的接口来处理HTTP请求。 ... [详细]
  • 如何在不损失质量的情况下压缩MP4视频的大小
    本文介绍了几种有效的方法来压缩MP4视频文件的大小,同时确保视频的质量不受影响。 ... [详细]
  • Python3爬虫入门:pyspider的基本使用[python爬虫入门]
    Python学习网有大量免费的Python入门教程,欢迎大家来学习。本文主要通过爬取去哪儿网的旅游攻略来给大家介绍pyspid ... [详细]
  • Vue CLI 基础入门指南
    本文详细介绍了 Vue CLI 的基础使用方法,包括环境搭建、项目创建、常见配置及路由管理等内容,适合初学者快速掌握 Vue 开发环境。 ... [详细]
  • 本文探讨了如何在 Spring MVC 框架下,通过自定义注解和拦截器机制来实现细粒度的权限管理功能。 ... [详细]
  • 利用Node.js实现PSD文件的高效切图
    本文介绍了如何通过Node.js及其psd2json模块,快速实现PSD文件的自动化切图过程,以适应项目中频繁的界面更新需求。此方法不仅提高了工作效率,还简化了从设计稿到实际应用的转换流程。 ... [详细]
  • 本文探讨了如何将Python对象转换为字节流,以实现文件保存、数据库存储或网络传输的需求。主要介绍了利用pickle模块进行序列化的具体方法。 ... [详细]
  • 函子(Functor)是函数式编程中的一个重要概念,它不仅是一个特殊的容器,还提供了一种优雅的方式来处理值和函数。本文将详细介绍函子的基本概念及其在函数式编程中的应用,包括如何通过函子控制副作用、处理异常以及进行异步操作。 ... [详细]
  • CSS Border 属性:solid 边框的使用详解
    本文详细介绍了如何在CSS中使用solid边框属性,包括其基本语法、应用场景及高级技巧,适合初学者和进阶用户参考。 ... [详细]
  • 本文介绍了SELinux的两种主要工作模式——强制模式和宽容模式,并提供了如何在CentOS 7中正确启用和配置SELinux的方法,以及在遇到登录问题时的解决策略。 ... [详细]
  • OBS Studio自动化实践:利用脚本批量生成录制场景
    本文探讨了如何利用OBS Studio进行高效录屏,并通过脚本实现场景的自动生成。适合对自动化办公感兴趣的读者。 ... [详细]
author-avatar
个信2502857367
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有