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

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(() => {
      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 => {
    console.log('URL hash changed', e);
    doSomething();
  });
  window.addEventListener('popstate', e => {
    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 "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((msg, sender, sendResponse) => {
    if (msg === 'url-update') {
      // doSomething();
    }
  });