MutationObservers - 未检测到添加的某些节点

Posted 2023-02-19

【中文标题】MutationObservers - 未检测到添加的某些节点

【英文标题】：MutationObservers - Some nodes added are not detected

【发布时间】：2013-11-12 21:00:09

【问题描述】：

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

script.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 );

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

谢谢。

【问题讨论】：

在控制台上的 Facebook 页面脚本有效（Chrome 34）。你如何运行这个脚本？附言我认为这个问题与今天（5 月 14 日）无关。

【参考方案1】：

这可能与this question 是同一个问题。如果脚本在 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);
        
    

【参考方案2】：

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