Chrome自定义CSS样式的方法

声明:本文参考几篇来自网络的教程整理完善而成,如需转载请保持文章完整并注明出处(http://blog.csdn.net/u010281174/article/details/52145291)。

Chrome自V33以后不允许自定义CSS样式了,但是仍然可以通过插件的方式实现自定义样式。因此本文主要完成如下3个工作:

  1. 介绍ChromeV33+自定义CSS样式的方法
  2. 介绍Chrome自定义滚动条样式的代码
  3. 介绍Chrome插件添加白名单的方法

ChromeV33+自定义CSS样式

参考[1]。
首先新建一个文件夹,其中包括.css文件和manifest.json两个文件。
manifest.json内容如下:
{  
   "content_scripts": [ {  
      "css": ["Custom.css"],  
      "all_frames": true,  
      "matches": [ "http://*/*", "https://*/*" ]  
   } ],  
   "description": "Custom.css",  
   "name": "Custom CSS",  
   "version": "1.0",  
   "manifest_version": 2  
}  
而.css则是自己定义的css样式文件。
然后打开Chrome浏览器->扩展管理->打包扩展程序,根目录选择新建的文件夹,密钥不用管。打包。
将打包后生成的.crx文件拖入扩展管理安装即可。

Chrome自定义滚动条样式

这部分主要是用来设定一个css样式以便测试第一步中的方法能够生效。参考[2]。只不过[2]中的css设定方法不适用于ChromeV33+。
css代码如下:
/*—滚动条默认显示样式–*/  
::-webkit-scrollbar-thumb{   
    background-color:#018EE8;   
    height:50px;   
    outline-offset:-2px;   
    outline:2px solid #fff;   
    -webkit-border-radius:4px;   
    border: 2px solid #fff;   
}   
  
/*—鼠标点击滚动条显示样式–*/  
::-webkit-scrollbar-thumb:hover{   
    background-color:#FB4446;   
    height:50px;   
    -webkit-border-radius:4px;   
}   
  
/*—滚动条大小–*/  
::-webkit-scrollbar{   
    width:8px;   
    height:8px;   
}   
  
/*—滚动框背景样式–*/  
::-webkit-scrollbar-track-piece{   
    background-color:#fff;   
    -webkit-border-radius:0;   
}   
如果想进一步设置鼠标点击时的颜色,可以增加如下代码:
::-webkit-scrollbar-thumb:active{   
    height:50px;   
    background-color:#000;   
    -webkit-border-radius:4px;   
}
修改后的样式是这样的:

对比修改前:

Chrome插件添加白名单

对插件添加白名单的方法来源自之前配置 时空隧道 时的教程[3]。
没有在Chrome应用商店上架的插件,如果没有添加到白名单里,下一次重启Chrome就会被禁用,而且无法手动启用,除非删掉重新添加。这样就太繁琐了。添加白名单可以一劳永逸地解决这个问题。
1、Win+R、或者打开运行 输入 gpedit.msc
2、本地计算机策略 > 计算机配置 > 管理模板,右键管理模板,选择添加/删除模板。
  
3、点击添加,将下载的chrome.adm(下载地址: http://download.csdn.net/detail/u010281174/9597569)添加进来。
  
4、添加模板完成后,找到经典管理模板(ADM),点击进入,选择Google > Google Chrome
  
5、打开后如下图所示,选择扩展程序,点击进入,配置扩展程序安装白名单

 6、点击下图中的显示按钮,将我们安装插件后的ID添加到那个值列表中,点击确定返回即可。

  ID可以在如下位置找到

完成后Chrome就不会禁用这个插件了。

下一步的工作

  1. 如果css样式发生了更改,重新载入的方法只有将以上步骤重新来过,比较繁琐。不知道有没有实时刷新的方法。
  2. 自定义的滚动条只适用于网页,对于Chrome的下载、设置等页面无效,不知道这部分该怎么弄。

参考资料



已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页