Question

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

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

看起来不像document.ready实际上正在等待所有元素出现。有解决方案吗？

Answer 1

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

E.g：

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(<selectorForElem1>);
            if (node1) {
                node1.parentNode.removeChild(node1);
                elem1removed = true;
            }

            var node2 = mutation.target.querySelector(<selectorForElem2>);
            if (node2) {
                node2.parentNode.removeChild(node2);
                elem2removed = true;
            }

            if (elem1removed && elem2removed) {
                observer.disconnect();
            }
        }
    });
});

observer.observe(elemParent, {
    childList: true,
    subtree: true
});

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

Answer 2

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

使用内容脚本删除dom元素

2 个答案: