突然发现浏览器广告拦截插件原理

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

突然发现浏览器广告拦截插件原理相关推荐

【插件】浏览器广告拦截插件| 浏览器搜索广告横飞怎么办
文章目录浏览器广告拦截插件| 浏览器搜索广告横飞怎么办一.效果二.安装浏览器广告拦截插件| 浏览器搜索广告横飞怎么办浏览器广告横飞怎么办?今天教你一招解决!很多小伙伴说自己用的浏览器总是有广 ...
搜狗浏览器广告拦截插件_拦截烦人的网页广告，增加上网体验
本号所有资源版权归原作者所有,如有侵权请加小编微信删除.本号免费分享,仅供学习交流,下载后24小时内请自觉删除,切勿用于商业用途,否则后果自负! 今天重新整理分享几大主流浏览器和IE浏览器拦截广告的方 ...
记一次被浏览器广告拦截插件坑死的经历：adp和ad插件把jsp页面中div显示的图片当作广告拦截！！
没有任何显示,也没有任何报错,f12中也已经加载了图片等内容,又把chrome换到firfox,但是还是没用,因为我都装了ad插件,我真想爆粗口,因为ad插件也显示没有拦截到广告.经过查错一次又一次重 ...
浏览器广告拦截_如何阻止广告拦截器
浏览器广告拦截我最近写了一篇文章,说明为什么选择不受广告拦截器无意阻止的文件名很重要 . 这些评论表明,广告拦截技术使许多网站所有者感到恼火. 如果他们无法获得收益,为什么还要生产优质内容? 无法检 ...
最强chrome、edge的广告拦截插件
最强chrome.edge的广告拦截插件对于浏览器的广告是非常烦人的,尤其是使用百度搜索引擎时,总会在右侧出现百度热搜这样的东西,有时不经意间就会被某些热搜吸引.本来想搜索一些内容,结果被热搜等耗费 ...
浏览器广告拦截_如何检测广告拦截器
浏览器广告拦截 One of the unspoken rules of the internet is that most content is "free"... at the ...
AdGuard广告拦截插件V3.6.6
介绍: AdGuard AdBlocker 是一款广告拦截插件,用以对抗各式广告与弹窗.可以拦截绝大部分常见网站的广告. 例如视频广告,插播广告和浮动广告.从而实现加速页面载入,节省带宽,屏蔽广告和弹 ...
Chrome上最好用的广告拦截插件：AdBlock
Chrome上最好用的广告拦截插件:AdBlock AdBlock,是一款广告拦截插件,自动拦截网页中广告.广告拦截并非100%准确,因此它提供了个性化设置的功能. 一个页面如果被"误伤&q ...
二、浏览器广告屏蔽插件_Adblock Plus
1.浏览器广告在浏览器浏览内容时,有广告无可厚非,但有些网页做的太过分了.如广告影响了正常网页的浏览:广告内容低俗恶心.特推荐以下浏览器广告屏蔽插件. 2.浏览器广告屏蔽插件 2.1.Adblock ...
chrome浏览器广告屏蔽插件adblock
chrome浏览器广告屏蔽插件adblock下载地址: https://downloads.adblockplus.org/devbuilds/adblockpluschrome/ 安装: chrom ...

突然发现浏览器广告拦截插件原理

突然发现浏览器广告拦截插件原理相关推荐

最新文章

热门文章