自己写油猴脚本屏蔽广告，有什么办法在出现后删除元素吗？

[LeeReamond]

如题，通过 js 控制页面，比如 csdn 看文章时候把各种乱七八糟占用页面位置的元素删除。

我目前用过两种做法，一种是等页面加载完成的 api 回调，然后再调用删除事件。这种的缺点是慢。

另一种是每隔 0.1 秒检测一下页面是否出现某元素，然后调用删除，会略微占用资源，而且感觉不太优雅。

目前 js 的 api 里有办法注册一个事件比如某某元素加载完成后调用回调之类的吗？

[wjfz]

https://greasyfork.org/zh-CN/scripts/378351

[LeeReamond]

@wjfz 我的问题偏向实现细节，而不是解决 CSDN 广告问题

[wjfz]

@LeeReamond 可以参考下这个脚本有没有你想要的解决方案嘛

[mxT52CRuqR6o5]

监听 dom 添加事件

[wxf666]

这个？

https://zh.javascript.info/mutation-observer

[Track13]

display:none 不就好了，为什么要删除。这样就不用管它什么时候出现。

[Trim21]

MutationObserver

[flyhaozi]

看看元素是怎么插入的，重写对应的原生方法进行过滤，比如 appendChild ，虽然是比较糟糕的实践，用在用户脚本里也不是不行

[Puteulanus]

https://github.com/muicss/sentineljs
虽然挺久没更新了，但很好用

[yunyuyuan]

MutationObserver ，或者劫持 appendChild,insertBefore 这类方法

[wdssmq]

MutationObserver

const fnElChange = (el, fn = () => { }, onetime = true) => {
const observer = new MutationObserver((mutationRecord, mutationObserver) => {
// _log('mutationRecord = ', mutationRecord);
// _log('mutationObserver === observer', mutationObserver === observer);
fn(mutationRecord, mutationObserver);
if (onetime) {
mutationObserver.disconnect(); // 取消监听，正常应该在回调函数中根据条件决定是否取消
}
});
observer.observe(el, {
// attributes: false,
// attributeFilter: ["class"],
childList: true,
// characterData: false,
subtree: true,
});
};

[f0rger]

同#11

https://github.com/luoweihua7/TamperMonkey/blob/master/user/Outlook-AD-Remover.user.js

[lisongeee]

监听 dom 树结构的变动一般用 `MutationObserver` 即可，不过某些广告也会通过 `MutationObserver` 自我判断是否显示，结果就是一直循环添加删除，这种比较有难度，csdn 应该不会有。
另外要开发油猴脚本可以用 [vite-plugin-monkey.git]( https://github.com/lisonge/vite-plugin-monkey.git)