Google Chrome Extensions 扩展程序 自定义网页样式

新建一个 styles 文件夹, 在 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 {
 width: 8px; /* 对应垂直滚动条 */
 height: 8px; /* 对应水平滚动条 */
}

/*—滚动条默认显示样式–*/
::-webkit-scrollbar-thumb {
 background-color: rgba(50, 50, 50, 0.3);
 -webkit-border-radius: 4px;
 border-radius: 4px;
 border: 1px solid #fff;
}

/*—滚动框背景样式–*/
::-webkit-scrollbar-track {
 background-color: rgba(50, 50, 50, 0.1);
 -webkit-border-radius: 4px;
 border-radius: 4px;
}

/*—鼠标悬浮滚动条显示样式–*/
::-webkit-scrollbar-thumb:hover {
 background-color: rgba(50, 50, 50, 0.5);
}

/*—鼠标点击滚动条显示样式–*/
::-webkit-scrollbar-thumb:active {
 background-color: rgba(50, 50, 50, 0.6);
}
/*—其他任何自定义样式–*/
/*
[selector] {
// your styles....
}
*/

打开 Google Chrome 扩展程序：chrome://extensions/

启用右上角的 开发者模式

选择左边的 加载已解压的扩展程序

选择 styles 文件夹

添加成功后(如下图)，重启浏览器：