How to detect changes to dom with no distinguishable ids or classes

Question

I am working on fixing a bug to my google chrome extension for Gmail. I need to detect when the Rich Format bar is displayed, but all of the ids and classes are obfuscated and I presume unreliable.

To detect the message canvas

this.canvas_frame_document.evaluate("//iframe[contains(@class, 'editable')]",
   this.canvas_frame_document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
   null);

and to detect the Rich Text bar

this.canvas_frame_document.evaluate("//img[@command='+underline']",
    this.canvas_frame_document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
    null);

This works well for composing new emails or the like because the canvas dom exists and thus detectable.

However, when clicking reply, reply to all, or forward doesn't work because the dom is dynamically changed and chrome.tabs.onSelectionChanged.addListener can't detect a change in page as I do for Compose.

Answer 1

The easy solution would be to use jQuery.live() for this.

If you want to stay hardcore then you can bind your check to DOMNodeInserted event that fires when a new element is added to the dom, or if that doesn't catch it then more general DOMSubtreeModified event which fires when dom is modified in any way. More about events can be found here.