Google Chrome 扩展程序 自定义样式

博主初衷：常用的网站上经常有广告影响浏览网页，所以自定义样式，屏蔽掉这些广告。当然也可以直接装 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 {
  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);
}

 

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

启用右上角的 开发者模式

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

选择 styles 文件夹

添加成功后：

 

---

 

上面自定义了Google Chrome浏览器的滚动条样式。

当然也可以自定义其他样式，比如 为某个广告元素 设置样式 display: none !important;

 

-