明天就是1024程式猿節了，過節嘛，搞點活動是好事，但CSDN卻給整了這么個廣告出來：

這就讓人很不爽，在博客主頁、文章界面、搜索頁等所有界面都會彈出來，關掉也不行，重繪一下就自動跳出來了，極其影響使用體驗，這是在是可惡，于是我琢磨著寫個簡單的chrome插件把它屏蔽掉，

首先檢查網頁元素，我們可以找到該元素的class：toolbar-advert，我們要做的是用 CSS 把它給設為不顯示，以達到屏蔽的效果：
class
話不多說直接上代碼：
檔案樹

manifest.json：

{
    // 清單檔案的版本
    "manifest_version": 2,
    // 插件名稱
    "name":"No Advertisements(csdn)",
    // 插件描述
    "description":"去掉CSDN頂部的廣告內容", 
    // 版本號
    "version":"1.0.0", 
    // 插件作者
    "author":"Cresyeal", 
    // 需要直接注入界面的js，但其實可以注入js、css檔案
    "content_scripts": [
        {
          "matches": ["https://*.csdn.net/*"], //匹配網址
          "css": ["index.css"], //要注入的代碼檔案
          "run_at": "document_end" //表示注入的時間
        }
      ]
}

其中：

manifest_version
清單檔案版本，必須為2，否則瀏覽器無法讀取，
matches
Xpath 匹配 url，在打開一個網頁時自動匹配，若匹配成功則自動注入，
可以匹配多個 url，如：
```
"matches": ["https://blog.csdn.net/*", "https://so.csdn.net/*"]
```
以下方式可匹配所有地址：
```
"matches": ["<all_urls>"]
```
run_at
表示注入的時間：
- document_start：網頁加載前；
- document_end：網頁加載完成后；
- document_idle：頁面空閑時（默認），

index.css：

css 的代碼非常簡單：

/*選擇class為 toolbar-advert 的元素*/
.toolbar-advert {
	display: none; /*將顯示狀態設為不顯示*/
}

加載擴展

進入chrome的擴展界面，點擊 “加載已解壓的擴展程式”，然后選擇我們的檔案夾，然后稍微等待一下，就加載成功了，
請添加圖片描述
接下來重繪一下CSDN博客界面，看看效果：

我們可以看到，1024 的廣告已經消失了，看著暢快許多！

– the End –

好啦，這篇文章就到這里了，
以上就是我分享的全部內容，感謝閱讀！

后記：開學之后要上學，可能更文會變得少了，甚至幾乎不更了，因為面臨著中考的壓力，也許等到放假之后會繼續更新，謝謝大家的支持！

本文收錄于專欄：前端實體
關注作者，持續閱讀作者的文章，學習更多知識！
https://blog.csdn.net/weixin_52132159

2021/10/23

推薦閱讀

前端
學習筆記 | HTML 基本結構和基本標簽 ——前端學習第一步！
學習筆記 | HTML（2）——關于HTML的head標簽（404界面示例）

Python
Python爬蟲 | 爬取b站北京奧運會開幕式彈幕，有多少人從東京奧運會跑過來的？
絕密！Python爬蟲告訴你刷分機器人背后的原理！這篇文章差點沒過審
【爬蟲】用Python爬取豆瓣電影分類排行榜
【Python爬蟲】爬蟲利器 requests 庫小結（建議收藏！）
沒想到我連五年級的題目都解不出來？可不能被人小看，讓萬能的Python登場
女朋友讓我深夜十二點催她睡覺，我有Python我就不干
Python：程式猿怎么追女生？教你用Python做一個表白神器，告別表白尷尬！
Python標準庫：datetime 時間和日期模塊 —— 時間的獲取和操作詳解

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/333614.html

標籤：其他

上一篇：看完騰訊微信團隊的Flutter筆記，我從床上爬起來，連夜把Fluteer專案擼了個遍

下一篇：大資料方向Python培訓（持續更新中）

【chrome插件開發】程式猿節來臨，我卻被這廣告給氣到了

manifest.json：

index.css：

加載擴展

– the End –