Is there a JavaScript jQuery DOM change listener

Question

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

User · Answer

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

User · Answer

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

User · Answer

Many sites use AJAX XHR fetch to add  show  modify content dynamically and window history API instead of in-site navigation so current URL is changed programmatically  Such sites are called SPA  short for Single Page Application   Usual JS methods of detecting page changes  MutationObserver  docs  to literally detect DOM changes   How to change the HTML content as it s loading on the page  Performance of MutationObserver to detect nodes in entire DOM   Simple example  let lastUrl   location href   new MutationObserver      gt      const url   location href    if  url     lastUrl        lastUrl   url      onUrlChange           observe document   subtree  true  childList  true     function onUrlChange       console log  URL changed    location href         Event listener for sites that signal content change by sending a DOM event   pjax end on document used by many pjax-based sites e g  GitHub  see How to run jQuery before and after a pjax load  message on window used by e g  Google search in Chrome browser  see Chrome extension detect Google search refresh yt-navigate-finish used by Youtube  see How to detect page navigation on YouTube and modify its appearance seamlessly    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  let  pushState   History prototype pushState  History prototype pushState   function  state  title  url       pushState call this  state  title  url     console log  URL changed   url       Listening to hashchange  popstate events  window addEventListener  hashchange   e   gt      console log  URL hash changed   e     doSomething        window addEventListener  popstate   e   gt      console log  State changed   e     doSomething             Extensions-specific methods All above-mentioned methods can be used in a content script  Note that content scripts aren t automatically executed by the browser in case of programmatic navigation via window history in the web page because only the URL was changed but the page itself remained the same  the content scripts run automatically only once in page lifetime   Now let s look at the background script  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  quot tabs quot  permission   background js var rxLookfor     https       www    google   com  w w    w w            amp  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  msg  sender  sendResponse    gt      if  msg      url-update            doSomething

User · Answer

For a long time  DOM3 mutation events were the best available solution  but they have been deprecated for performance reasons  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

User · Answer

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

[javascript] Is there a JavaScript / jQuery DOM change listener?

Examples related to javascript

Examples related to jquery

Examples related to google-chrome-extension