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 扩展程序 自定义样式_第1张图片

 


 

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

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

 

-

你可能感兴趣的:(Google Chrome 扩展程序 自定义样式)