今天突然要解決一個bug，一個關于廣告的小問題，頁面元素不顯示了，查了半天完全不知道為什么。然后發現是廣告攔截插件引起的，知道廣告插件原理，我一下子有點懵。

先說明，今天主要是分享一下廣告插件的原理，不是深究插件的寫法，也不確定其他插件是否是這個原理，只是說一下Adblock plus這個廣告攔截插件的原理。

先說一下過程，有個廣告創建的功能，里面有幾個選項，拿其中一個選項來說，標題，我給這個輸入框起的樣式class名字是ad-title，結果頁面這個輸入框顯示不了，看了一下樣式的display，居然是none，再看一下設置none的，不知道是哪里來的樣式：

是注入的樣式，其中就有ad-title：

看見這個，我一下子明白了廣告攔截插件，原來是通過注入樣式給隱藏了，而且是一堆認為是廣告的單詞樣式，要是一些網站不是廣告，但是有這些樣式名稱的都會被隱藏。

廣告插件還支持自己添加：

嘗試了一下，生效了，這擴展性還真的是有點強大。

沒事做，就自己也弄了個簡單的插件，新建一個文件夾，名字隨便取，里面就三個文件：

manifest.json里面的代碼：

{"name": "coding個人筆記去廣告插件","manifest_version": 2,"version": "1.0","description": "coding個人筆記去廣告插件","browser_action":{"default_icon": "icon.png","default_title": "coding個人筆記去廣告插件"},"icons":{"48": "icon.png"},"content_scripts": [{"matches": ["<all_urls>"],"js": ["coding.js"]}] }

coding.js里面的代碼：

var list = ["[class*=\"ad\"]","[class*=\"advertising\"]","[class*=\"adver\"]"]for (let i = 0; i < list.length; i++) {let elList = document.querySelectorAll(list[i]);for (let j = 0; j < elList.length; j++) {elList[j].setAttribute('style', 'display:none !important');}}

然后點擊加載已解壓的擴展程序選中這個文件夾就行了。

效果就是會給匹配的class都注入隱藏樣式：

這樣的插件太暴力了，應該是不建議的，然后下載了Adblock plus源碼看了看，第一眼感覺有點復雜，于是就放棄了。

歡迎關注個人公眾號 coding個人筆記

總結

以上是生活随笔為你收集整理的突然发现浏览器广告拦截插件原理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。