谷歌插件屏蔽百度广告

  1. 前言
  2. 目标
  3. 思路
    1. 分析广告出现的位置特征和出现的时机特征
    2. 方案
  4. 代码
    1. 目录结构
    2. manifest.json
    3. content_scripts.js
  5. 结果

前言

不知你是否存在着这样的困扰,当你在百度上搜寻某急切问题的答案时,发现全是广告,该相信还是不该相信,这是一个值得困惑的问题。当你看到某莆田系医院通过广告治死了某大学生时,心中蒙上了一层阴影,在你下一次通过百度搜索时,想起了当初被广告支配时的心理阴影。在你学习javascript语言后的某天,你收到来自过去的一封信,信中写了…

目标

制作一款插件将百度搜索结果中的广告过滤掉,包括左侧搜索结果和右侧推荐结果。

思路

分析广告出现的位置特征和出现的时机特征

位置:通过多次搜索,总结出如果某个span或者a标签的文本内容是”广告”,那么该标签祖先节点且该祖先节点位于#content_left>div#content_right>div位置时,可以确定该祖先节点是广告节点。
时机:一般在页面加载后约1s左右。

方案

  1. baidu域名下的标签页写一个定时器,每隔1s执行一次去广告方法。
  2. 该方法会寻找并删除符合上面分析结果的节点。

代码

目录结构

manifest.json

{
  "name": "百度去广告",
  "version": "1.0",
  "manifest_version": 3,
  "description": "百度去广告",
  "icons": {
    "16": "images/icon-16.png",
    "48": "images/icon-48.png",
    "128": "images/icon-128.png"
  },
  "content_scripts": [
    {
      "js": [
        "content_scripts.js"
      ],
      "matches": [
        "*://www.baidu.com/*"
      ],
      "run_at": "document_end" //表示页面加载完后执行
    }
  ]
}  

content_scripts.js

function clearAD() {
    let list = document.querySelectorAll("#content_left>div,#content_right>div");
    for (let i = 0; i < list.length; i++) {
        let item = list[i];
        [].forEach.call(item.querySelectorAll("span,a"), function (span) {
            if (span && span.innerHTML === "广告") {
                item && item.remove(); //在调用remove方法前最好保证下item存在再执行,否则会报undefined没有remove属性
            }
        })
    }
}

setInterval(clearAD, 1000);

console.log('content has injected')  

结果

世界一片清净,万物本该如此。

谷歌应用市场已上传,搜索百度去广告,找到下图所示图标安装。


转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达,如有问题请邮件至2454612285@qq.com。
跃迁主页