DOMNodeInserted Not Working Properly

Question

I have a problem ..

The "DOMNodeInserted" is not working as it supposed to. I am not sure if I am using it properly.

Any ideas ?

Answer 1

_{EDIT: Scroll further down for an better approach using a MutationObserver.}

---

When constructing the DOM at page-loading, no DOMNodeInserted events are fired. I don't think there is a way to have the HTML pass through your filter before being rendered (or if there is I don't know it).

Filtering on DOMContentLoaded instead, might be quick enough for the user not to notice the difference (or at least not to bother too much).

Of course, you have to listen for dynamic changes in the DOM (e.g. content loaded via AJAX etc) and filter it dynamicaly. A MutationObserver might come in handy for that.

Take a look at this demo code, to get you started on this approach:

manifest.json
(Note that for this to work you don't need any of the following:
browser_action, page_action, background, permissions)

...
"content_scripts": [
    {
        "matches": [
            "http://stackoverflow.com/*",
            "http://www.stackoverflow.com/*"
        ],
        "js":         ["content.js"],
        "run_at":     "document_start",
        "all_frames": true
    }
],
...

content.js

// Implement your filtering mechanism
// Good luck trying not to break the HTML :)
var doFilter = function(elem) {
    // Demo filtering: highlighting links 
    // (and possibly breaking HTML in many pages)
    elem.innerHTML = elem.innerHTML.replace(
        /(<a[^>]*)(>[^<]*<\/a>)/ig,
        "$1 style=\"background-color: yellow;\"$2");
};

window.addEventListener("DOMContentLoaded", function() {
    doFilter(document.body);
});

---

UPDATE

Here is a different approach using a MutationObserver, which is even more quick. Using this approach the changes should be virtualy "transparent" to the user.
(This still needs twicking, e.g. to handle dynamic node updates.)

content.js

// Highligth the element by giving it a yellow background
var doFilter = function(link) {
    link.style.backgroundColor = "yellow";
}

// Create a MutationObserver to handle events (i.e. filtering <a> elements)
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if (mutation.addedNodes) {
            for (var i = 0; i < mutation.addedNodes.length; i++) {
                var node = mutation.addedNodes[i];
                if (node.nodeName == "A") {
                    doFilter(node);
                }
            }
        }
    });
});

// Start observing "childList" events in document and its descendants
observer.observe(document, {
    childList:     true,
    subtree:       true
});

If you decide to go for the MutationObserver approach, there is this JS library that is supposed to make your life easier: mutation-summary