如何跟踪 chrome 扩展中的 DOM 变化？答案

【问题标题】：How to track DOM change in chrome extension?如何跟踪 chrome 扩展中的 DOM 变化？
【发布时间】：2012-01-16 15:51:39
【问题描述】：

我正在编写一个 chrome 扩展程序，我想在其中获取页面上存在的所有图像，但某些图像会在一段时间后加载（可能通过 ajax），一旦 DOM 空闲，我就无法获取这些图像。页面加载后有什么方法可以跟踪 DOM 的变化吗？

【问题讨论】：

标签： google-chrome-extension

【解决方案1】：

您可以将document.addEventListener 与DOMNodeInserted 事件一起使用。您的回调必须检查每个节点插入以查看它是否是您正在寻找的节点类型。像下面这样的东西应该可以工作。

function nodeInsertedCallback(event) {
    console.log(event);
};
document.addEventListener('DOMNodeInserted', nodeInsertedCallback);

【讨论】：

谢谢亚伯拉罕。有效。不知道的可以把上面的代码写进去：reminiscential.wordpress.com/2011/10/04/…
注意：此事件已弃用。现代方法是使用 DOM 变异观察者，this 是规范答案。

【解决方案2】：

2020 年更新：

现在推荐的方法是使用Mutation Observer API。

 let observer = new MutationObserver(mutations => {
    for(let mutation of mutations) {
         for(let addedNode of mutation.addedNodes) {
             if (addedNode.nodeName === "IMG") {
                 console.log("Inserted image", addedNode);
              }
          }
     }
 });
 observer.observe(document, { childList: true, subtree: true });

【讨论】：

这段代码应该加到background.js中？
这应该在内容脚本中。只有内容脚本可以访问 DOM。