博主初衷:常用的网站上经常有广告影响浏览网页,所以自定义样式,屏蔽掉这些广告。当然也可以直接装 AdBlock 插件屏蔽广告。
1.新建一个 styles 文件夹
2.在 styles 文件夹下新建两个文件:
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 }
Custom.css
/*—滚动条默认显示样式–*/ ::-webkit-scrollbar-thumb { background-color: #018ee8; height: 50px; outline-offset: -2px; outline: 2px solid #fff; border-radius: 4px; -webkit-border-radius: 4px; border: 2px solid #fff; } /*—鼠标点击滚动条显示样式–*/ ::-webkit-scrollbar-thumb:hover { background-color: #fb4446; height: 50px; border-radius: 4px; -webkit-border-radius: 4px; } /*—滚动条大小–*/ ::-webkit-scrollbar { width: 8px; height: 8px; } /*—滚动框背景样式–*/ ::-webkit-scrollbar-track-piece { background-color: #fff; border-radius: 0; -webkit-border-radius: 0; }
3.打开Google Chrome扩展程序:chrome://extensions/
启用右上角的 开发者模式
选择左边的 加载已解压的扩展程序
选择 styles 文件夹
添加成功后:
上面自定义了Google Chrome浏览器的滚动条样式。
当然也可以自定义其他样式,比如 为某个广告元素 设置样式 display: none !important;
-