By Fletcher Moore


2010-05-16 16:43:10 8 Comments

Essentially I want to have a script execute when the contents of a DIV change. Since the scripts are separate (content script in chrome extension & webpage script), I need a way simply observe changes in DOM state. I could set up polling but that seems sloppy.

5 comments

@Anurag 2010-05-16 17:25:59

Edit

This answer is now deprecated. See the answer by apsillers.

Since this is for a Chrome extension, you might as well use the standard DOM event - DOMSubtreeModified. See the support for this event across browsers. It has been supported in Chrome since 1.0.

$("#someDiv").bind("DOMSubtreeModified", function() {
    alert("tree changed");
});

See a working example here.

@Peder Rice 2011-07-25 21:48:56

I've noticed that this event can be fired even after certain selectors. I'm currently investigating.

@Maslow 2012-01-04 17:20:15

w3.org/TR/DOM-Level-3-Events/#event-type-DOMSubtreeModified says this event is deprecated, what would we use instead?

@Sam Rueby 2012-03-21 15:33:25

@Capi Etheriel 2012-10-01 19:20:33

There is github.com/joelpurra/jquery-mutation-summary which basically solves it for jquery users.

@concept47 2012-12-20 05:44:59

Still works if you're building chrome extensions. invaluable.

@s.krueger 2013-01-19 14:27:55

Still need the DOMSubtreeModified because apsillers answer only works in FF and Chrome uptil now ;/

@naugtur 2014-03-06 22:17:56

DOMwhatever events are harmful, because they make rendering engine check if there's an event handler on every DOM change. It slows down your dynamic content generation pretty bad in some cases. There are other solutions.

@Claudiu Creanga 2015-11-11 16:14:35

it is not deprecated...

@BG Bruno 2016-03-16 16:46:45

It still works but better stable solution is really MutationObserver.

@wOxxOm 2016-09-15 10:36:21

Many sites use AJAX to add/show/change content dynamically. Sometimes it's used instead of in-site navigation, so current URL is changed programmatically and content scripts aren't automatically executed by browser in this case since the page isn't fetched from remote server entirely.


Usual JS methods of detecting page changes available in a content script.

  • MutationObserver (docs) to literally detect DOM changes:

  • Event listener for sites that signal content change by sending a DOM event:

  • Periodic checking of DOM via setInterval:
    Obviously this will work only in cases when you wait for a specific element identified by its id/selector to appear, and it won't let you universally detect new dynamically added content unless you invent some kind of fingerprinting the existing contents.

  • Cloaking History API inside an injected DOM script:

    document.head.appendChild(document.createElement('script')).text = '(' +
        function() {
            // injected DOM script is not a content script anymore, 
            // it can modify objects and functions of the page
            var _pushState = history.pushState;
            history.pushState = function(state, title, url) {
                _pushState.call(this, state, title, url);
                window.dispatchEvent(new CustomEvent('state-changed', {detail: state}));
            };
            // repeat the above for replaceState too
        } + ')(); this.remove();'; // remove the DOM script element
    
    // And here content script listens to our DOM script custom events
    window.addEventListener('state-changed', function(e) {
        console.log('History state changed', e.detail, location.hash);
        doSomething();
    });
    
  • Listening to hashchange, popstate events:

    window.addEventListener('hashchange', function(e) {
        console.log('URL hash changed', e);
        doSomething();
    });
    window.addEventListener('popstate', function(e) {
        console.log('State changed', e);
        doSomething();
    });
    



Extensions-specific: detect URL changes in a background / event page.

There are advanced API to work with navigation: webNavigation, webRequest, but we'll use simple chrome.tabs.onUpdated event listener that sends a message to the content script:

  • manifest.json:
    declare background/event page
    declare content script
    add "tabs" permission.

  • background.js

    var rxLookfor = /^https?:\/\/(www\.)?google\.(com|\w\w(\.\w\w)?)\/.*?[?#&]q=/;
    chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
        if (rxLookfor.test(changeInfo.url)) {
            chrome.tabs.sendMessage(tabId, 'url-update');
        }
    });
    
  • content.js

    chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
        if (msg === 'url-update') {
            doSomething();
        }
    });
    

@Makyen 2017-01-19 22:21:29

This is a very comprehensive answer. Given its breadth, it might be a good idea to create a question like "How do I determine that the DOM or URL has changed". We could then use it as a duplicate target for many questions. As it is, it is a good answer for "How do I detect that the URL has changed" (and related website specific DOM/URL questions), but this Question is really only an appropriate dup target for DOM change questions.

@Xan 2016-05-10 12:00:26

In addition to the "raw" tools provided by MutationObserver API, there exist "convenience" libraries to work with DOM mutations.

Consider: MutationObserver represents each DOM change in terms of subtrees. So if you're, for instance, waiting for a certain element to be inserted, it may be deep inside the children of mutations.mutation[i].addedNodes[j].

Another problem is when your own code, in reaction to mutations, changes DOM - you often want to filter it out.

A good convenience library that solves such problems is mutation-summary (disclaimer: I'm not the author, just a satisfied user), which enables you to specify queries of what you're interested in, and get exactly that.

Basic usage example from the docs:

var observer = new MutationSummary({
  callback: updateWidgets,
  queries: [{
    element: '[data-widget]'
  }]
});

function updateWidgets(summaries) {
  var widgetSummary = summaries[0];
  widgetSummary.added.forEach(buildNewWidget);
  widgetSummary.removed.forEach(cleanupExistingWidget);
}

@apsillers 2012-07-18 16:39:10

Several years later, there is now officially a better solution. DOM4 Mutation Observers are the replacement for deprecated DOM3 mutation events. They are currently implemented in modern browsers as MutationObserver (or as the vendor-prefixed WebKitMutationObserver in old versions of Chrome):

MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

var observer = new MutationObserver(function(mutations, observer) {
    // fired when a mutation occurs
    console.log(mutations, observer);
    // ...
});

// define what element should be observed by the observer
// and what types of mutations trigger the callback
observer.observe(document, {
  subtree: true,
  attributes: true
  //...
});

This example listens for DOM changes on document and its entire subtree, and it will fire on changes to element attributes as well as structural changes. The draft spec has a full list of valid mutation listener properties:

childList

  • Set to true if mutations to target's children are to be observed.

attributes

  • Set to true if mutations to target's attributes are to be observed.

characterData

  • Set to true if mutations to target's data are to be observed.

subtree

  • Set to true if mutations to not just target, but also target's descendants are to be observed.

attributeOldValue

  • Set to true if attributes is set to true and target's attribute value before the mutation needs to be recorded.

characterDataOldValue

  • Set to true if characterData is set to true and target's data before the mutation needs to be recorded.

attributeFilter

  • Set to a list of attribute local names (without namespace) if not all attribute mutations need to be observed.

(This list is current as of April 2014; you may check the specification for any changes.)

@Ashraf Bashir 2013-03-25 11:52:35

This doesn't work on FF and IE, check this sample: jsfiddle.net/Lcybj

@apsillers 2013-03-25 15:20:17

@AshrafBashir I see the sample working fine in Firefox 19.0.2: I see ([{}]) logged to the console, which shows the expected MutationRecord when I click on it. Please check again, as it might have been a temporary technical failure in JSFiddle. I have not tested it in IE yet, since i don't have IE 10, which is currently the only version to support mutation events.

@naugtur 2014-03-06 22:22:05

I just posted an answer that works in IE10+ and mostly anything else.

@L S 2014-04-08 13:01:32

The specification doesn't seem to have a green box that lists the mutation observer options any longer. It does list the options in section 5.3.1 and describes them just a little further below that.

@apsillers 2014-04-08 14:27:54

@LS Thanks, I've updated the link, removed the bit about the green box, and edited the entire list into my answer (just in case of future link rot).

@bdesham 2014-07-08 14:47:31

@lulalala 2015-08-03 02:30:44

Is it possible to see what changed the dom? Like a backtrace or something

@grant 2015-11-16 16:17:50

Holy moley - awesome answer, thank you. I feel like this is a hidden part of javascript I never encountered until I started working w/ Chrome Extension content script trying to detect DOM changes. I really appreciate the detailed explanation you put in and the links to documentation, helped me move along in my project when I hit this "unknown" territory.

@Umair Hamid 2016-08-18 08:10:39

For me this works perfect on FF but not on Chrome :/

@Zac Imboden 2012-05-24 17:01:18

Another approach depending on how you are changing the div. If you are using JQuery to change a div's contents with its html() method, you can extend that method and call a registration function each time you put html into a div.

(function( $, oldHtmlMethod ){
    // Override the core html method in the jQuery object.
    $.fn.html = function(){
        // Execute the original HTML method using the
        // augmented arguments collection.

        var results = oldHtmlMethod.apply( this, arguments );
        com.invisibility.elements.findAndRegisterElements(this);
        return results;

    };
})( jQuery, jQuery.fn.html );

We just intercept the calls to html(), call a registration function with this, which in the context refers to the target element getting new content, then we pass on the call to the original jquery.html() function. Remember to return the results of the original html() method, because JQuery expects it for method chaining.

For more info on method overriding and extension, check out http://www.bennadel.com/blog/2009-Using-Self-Executing-Function-Arguments-To-Override-Core-jQuery-Methods.htm, which is where I cribbed the closure function. Also check out the plugins tutorial at JQuery's site.

Related Questions

Sponsored Content

37 Answered Questions

[SOLVED] How do I remove a property from a JavaScript object?

69 Answered Questions

[SOLVED] How do I remove a particular element from an array in JavaScript?

  • 2011-04-23 22:17:18
  • Walker
  • 5291361 View
  • 6588 Score
  • 69 Answer
  • Tags:   javascript arrays

25 Answered Questions

39 Answered Questions

[SOLVED] Setting "checked" for a checkbox with jQuery?

52 Answered Questions

[SOLVED] How do I include a JavaScript file in another JavaScript file?

86 Answered Questions

[SOLVED] How do JavaScript closures work?

15 Answered Questions

[SOLVED] "Thinking in AngularJS" if I have a jQuery background?

53 Answered Questions

[SOLVED] How do I check if an element is hidden in jQuery?

48 Answered Questions

Sponsored Content