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

wade

发布于 2021-07-08 15:38:54

2K0

发布于 2021-07-08 15:38:54

文章被收录于专栏：coding个人笔记

今天突然要解决一个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都注入隐藏样式：