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;

 

-