如何跟踪chrome扩展中的DOM更改？

Question

我正在写一个chrome扩展,我想要获取页面上存在的所有图像,但是一些图像会在一段时间后加载(可能是通过ajax),一旦DOM空闲,我就无法获取.有没有办法在页面加载后跟踪DOM更改？

Answer 1

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

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

Answer 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 });