今天突然要解決一個bug，一個關于廣告的小問題，頁面元素不顯示了，查了半天完全不知道為什么。然后發現是廣告攔截插件引起的，知道廣告插件原理，我一下子有點懵。
先說明，今天主要是分享一下廣告插件的原理，不是深究插件的寫法下載東西發現廣告插件怎么弄，也不確定其他插件是否是這個原理，只是說一下 plus這個廣告攔截插件的原理。
先說一下過程，有個廣告創建的功能，里面有幾個選項，拿其中一個選項來說，標題，我給這個輸入框起的樣式class名字是ad-title，結果頁面這個輸入框顯示不了，看了一下樣式的，居然是none，再看一下設置none的，不知道是哪里來的樣式：
是注入的樣式，其中就有ad-title：
看見這個，我一下子明白了廣告攔截插件，原來是通過注入樣式給隱藏了，而且是一堆認為是廣告的單詞樣式，要是一些網站不是廣告，但是有這些樣式名稱的都會被隱藏。
廣告插件還支持自己添加：
嘗試了一下下載東西發現廣告插件怎么弄，生效了，這擴展性還真的是有點強大。
沒事做，就自己也弄了個簡單的插件，新建一個文件夾，名字隨便取，里面就三個文件：
.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": [""],
"js": ["coding.js"]
}]
}復制
.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都注入隱藏樣式：
這樣的插件太暴力了，應該是不建議的，然后下載了 plus源碼看了看，第一眼感覺有點復雜，于是就放棄了。