公司市面上有一套产品,且学校有对应教学教材,学校偶尔会用来做实操比赛,由于比赛系统是在产品外层包了一层壳(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);
进入浏览器的扩展程序,打开开发者模式,将目录拖到浏览器里即可。