今天突然要解决一个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个人笔记
