如何跟踪Chrome扩展中的DOM更改？ [英] How to track DOM change in chrome extension?

问题描述

我正在编写一个Chrome扩展，我希望获取页面上存在的所有图像，但是一段时间后可能会加载一些图像（可能通过ajax），一旦DOM空闲，我无法获取这些图像。有没有什么方法可以在页面加载后跟踪DOM变化？

可以使用 document.addEventListener 与 DOMNodeInserted 事件。您的回调将不得不检查每个节点插入，以查看它是否是您正在查找的节点的类型。
$ b

  function nodeInsertedCallback（event）{
 console.log（event）; 
}; 
 document.addEventListener（'DOMNodeInserted'，nodeInsertedCallback）; 
  

I am writing a chrome extension where I want to fetch all the images exist on a page but some of the images load after some time (may be through ajax) which I could not fetch once the DOM is idle. Is there any way to track the DOM change after the page is loaded?

解决方案

You can use document.addEventListener with the DOMNodeInserted event. Your callback will have to check each node insertion to see if it is the type of node you are looking for. Something like the following should work.

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

这篇关于如何跟踪Chrome扩展中的DOM更改？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！