阅读 179

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

今天突然要解决一个bug,一个关于广告的小问题,页面元素不显示了,查了半天完全不知道为什么。然后发现是广告拦截插件引起的,知道广告插件原理,我一下子有点懵。

先说明,今天主要是分享一下广告插件的原理,不是深究插件的写法,也不确定其他插件是否是这个原理,只是说一下Adblock plus这个广告拦截插件的原理。

先说一下过程,有个广告创建的功能,里面有几个选项,拿其中一个选项来说,标题,我给这个输入框起的样式class名字是ad-title,结果页面这个输入框显示不了,看了一下样式的display,居然是none,再看一下设置none的,不知道是哪里来的样式:

图片1.png

图片2.png

是注入的样式,其中就有ad-title:

图片3.png

看见这个,我一下子明白了广告拦截插件,原来是通过注入样式给隐藏了,而且是一堆认为是广告的单词样式,要是一些网站不是广告,但是有这些样式名称的都会被隐藏。

广告插件还支持自己添加:

图片4.png

尝试了一下,生效了,这扩展性还真的是有点强大。

没事做,就自己也弄了个简单的插件,新建一个文件夹,名字随便取,里面就三个文件:

图片5.png 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都注入隐藏样式:

图片6.png

图片7.png

这样的插件太暴力了,应该是不建议的,然后下载了Adblock plus源码看了看,第一眼感觉有点复杂,于是就放弃了。

欢迎关注个人公众号 coding个人笔记

文章分类
前端
文章标签