突变观察者 - 未检测到添加的某些节点

MutationObservers - Some nodes added are not detected

本文关键字：节点 添加 观察者 检测 突变      更新时间：2023-09-26

我有一个内容脚本，可以监听某些网站上的文本节点的插入。它工作得很好，除了在Facebook上。脚本未检测到插入的某些文本节点。

脚本.js

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if (mutation.type  === "characterData") {
            console.log(mutation.target);
        } else {
            for (var x = 0; x < mutation.addedNodes.length; x++) {
                var node = mutation.addedNodes[x];
                if (node.nodeType === Node.TEXT_NODE) {
                    console.log(node);
                }
            }
        }
    });
});
observer.observe(document, { childList: true, subtree: true, characterData: true });

如果我允许记录所有节点类型，我可以在日志中看到这些文本节点的父节点。

谢谢。

这可能与这个问题是同一个问题。如果脚本在 DOM 外部"构建"元素，然后附加根，则只有根将报告为添加的节点。 TreeWalker可用于遍历添加节点的子树以查找文本。

for (const addedNode of mutation.addedNodes) {
    if (addedNode.nodeType === Node.TEXT_NODE) {
        console.log(addedNode);
    } else {
        // If added node is not a Text node, traverse subtree to find Text nodes
        const nodes = document.createTreeWalker(addedNode, NodeFilter.SHOW_TEXT);
        while (nodes.nextNode()) {
            console.log(nodes.currentNode);
        }
    }
}

Facebook有一种即使在网站上打开调试器时也能检测的方法。我猜他们也有办法检测突变观察者。他们可能只是阻止了您的内容脚本。此外，我不会真正使用整个文档作为我的对象。只需尝试使用document.querySelector监视您想要的内容即可。

相关文章：