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的下载、设置等页面无效，不知道这部分该怎么弄。

参考资料

[1]  http://blog.csdn.net/lyl_studio/article/details/21324605

[2]  http://xiedandan.com/google-chrome.html

[3]  http://weibo.com/p/1001603879439854606337?sudaref=mooc.guokr.com