使用内容脚本删除dom元素

我正在创建一个相当简单的chrome扩展。 所有它需要做的是每当我访问一个特定的网站时删除两个dom元素。

问题是我的脚本在$（document）.ready时运行并检查我正在寻找的两个元素是否存在。 这两个元素不存在，然后我的脚本不执行它的必需任务。 脚本运行之后是网站实际将元素插入到html中。 所以我的脚本基本上太早了。

它似乎不像document.ready实际上正在等待所有元素出现。 这个问题有方法解决吗？

Answer 1

最好的方法（imo）是使用MutationObserver来“观察”DOM（例如，身体或更好，你要删除的两个元素的直接父元素 – 如果你事先知道的话），直到插入这些元素。 一旦检测到每个元素，就可以将其删除（当检测到（并删除）时，您可以取消（“断开”）观察者以节省资源）。

例如：

 var elem1removed = false; var elem2removed = false; var elemParent = document.body; /* or whatever */ var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { if (mutation.addedNodes && (mutation.addedNodes.length > 0)) { var node1 = mutation.target.querySelector(); if (node1) { node1.parentNode.removeChild(node1); elem1removed = true; } var node2 = mutation.target.querySelector(); if (node2) { node2.parentNode.removeChild(node2); elem2removed = true; } if (elem1removed && elem2removed) { observer.disconnect(); } } }); }); observer.observe(elemParent, { childList: true, subtree: true }); 

有关操纵动态添加元素的相当复杂的示例（以及如何将该技术合并到Chrome扩展中），请参阅其他答案 。

Answer 2

如果您只想要一个快速的解决方案而不需要处理观察者，那么只需使用setTimeout，以便稍后运行代码。 更安全使用setInerval，直到找到dom并隐藏/删除它们。