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?
Add a comment |
2 Answers
Updated for 2020:
The recommended way nowadays is to use the 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 }); 3 Comments
Vikalp Jain
This code should be added to background.js?
Jeril Sebastian
This should be in a content script. Only content scripts can access the DOM.
Matt Montag
You mean content scripts can only access the DOM. Right?
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); 
2 Comments
codef0rmer
Thanks abraham. It worked. For those who do not know were to put the above code: reminiscential.wordpress.com/2011/10/04/…
