谷歌浏览器插件实现拦截处理网页内容

公司市面上有一套产品，且学校有对应教学教材，学校偶尔会用来做实操比赛，由于比赛系统是在产品外层包了一层壳（iframe嵌入产品）来实现实操，内部产品直接使用的线上正式版，产品经常做一些营销活动，会弹出一些花里胡哨的广告，如果在学校里比赛场景中弹广告有损赛场纪律和严肃性，但与开发团队沟通去掉广告也很难做到，各部门之间也是你不情我不愿的。

作为程序员，遇到这类问题时首先想到了是不是可以通过技术解决？于是乎查资料，试验，最终找到了解决问题的方法。那就是通过谷歌浏览器的插件（Extension）来实现删除广告DOM。

 

程序会在页面加载完后利用元素选择器获取元素后调用remove()函数直接删除广告元素。

 

 

按以下目录结构建目录或文件：

RemoveDOM

　　+ src  // 源代码目录

　　　　+ images

　　　　　　+ icon.png // 扩展程序的图标

　　　　+ js

　　　　　　+ main.js // 主程序，可随意命名，需要配置到manifest.json中

　　+ manifest.json  // 配置文件

 

mainfest.json配置代码：

{
  "manifest_version": 2,
  "name": "RemoveDOM",
  "version": "1.0.0",
  "description" : "删除DOM",
  "icons": {
    "128": "src/images/logo.jpeg",
    "48": "src/images/logo.jpeg",
    "16": "src/images/logo.jpeg"
  },
  "permissions": [
    "*://*/*"
  ],
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"], // 作用于任何域名
      "js": ["src/js/main.js"],
      "all_frames": true // 包括框架内网页也适用
    }
  ]
}

main.js:

setTimeout(() => {
    console.log('REMOVE DOM');
    document.querySelector('.chanjet-nova-ui-base-dialog').remove();
}, 6000);

 

进入浏览器的扩展程序，打开开发者模式，将目录拖到浏览器里即可。