Chrome extension: How to modify elements created from an Ajax request in a webpage?

Question

I'm trying to make a chrome extension for this page http://jisho.org/kanji/radicals/ and I've got a problem.

The extension should modify the elements containing "kanji" found in the #found_kanji div , but those elements are not there when the page loads, rather, they are created after the user clicks a "radical"(a part of a kanji) which triggers an Ajax query that loads the kanji from the website database.

How can I modify those elements?

From what I've looked up, DOM manipulation events are now deprecated, so I can't watch for when the elements are created. I could try to replace the website javascript with a local version by using the webRequests API, I thought it would be ugly but it could work, but then I realized I have no way to communicate from a webpage script to a content script or the extension itself. Anyone got ideas?

Answer 1

You can use a MutationObserver to listen for DOM changes within a particular div, and perform your modifications whenever new elements are added to the div:

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if(mutation.addedNodes.length){
        var addedNodes = Array.prototype.slice.call(mutation.addedNodes);
        addedNodes.forEach(function(node){
            if(node.className == 'something'){
                // do stuff
            }
        });
    }
  });    
});

observer.observe(document.getElementById('found_kanji'), { subtree: true, childList: true, characterData: true });

jsFiddle demo