How to track DOM change in chrome extension?
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);
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 });