Chrome Extension: How To Reload/re-execute Content Script On Ajax Request

I'm trying to execute a content script for a certain site (inject a button or change the link) however I would like to do this as the user browses the website. The problem is that

Solution 1:

There is no ajax listener that I am aware of, but it wouldn't help much anyway as you need to catch when page is modified, not ajax request is sent/received (page modification usually happens later and can be not tied to ajax request at all).

DOMSubtreeModified is the right way to go, just implement some protection from too frequent calls:

functionlistener()
{
    console.debug("listener fired.");
}

var timeout = null;
document.addEventListener("DOMSubtreeModified", function() {
    if(timeout) {
        clearTimeout(timeout);
    }
    timeout = setTimeout(listener, 500);
}, false);

This way it would trigger listener if there was no other events within 500ms.

Solution 2:

The best answer I found was a bit interesting and involved a bit of message passing in between the content scripts and the background.html file.

I'll post the code then explain:

Background.html

functionupdatePageAction(tabId)
  {
    chrome.tabs.sendRequest(tabId, {is_content_script: true}, function(response) {
      if (response.is_content_script)
        chrome.pageAction.show(tabId);
    });
  };

  chrome.tabs.onUpdated.addListener(function(tabId, change, tab) {
    if (change.status == "complete") {
      updatePageAction(tabId);
    }
  });

content_script.js

// The background page is asking us to find an address on the page.
if (window == top) {
  chrome.extension.onRequest.addListener(function(req, sender, sendResponse) {
        if (req.is_content_script)
            start_content_script();
            sendResponse({is_content_script: true});
  });
};

You want to solve updating or re-executing the script on DOM changes. Luckily the DOM changes involved a URL change (although it was AJAX DOM changes to update the page). The URL change however fires a onUpdated event. However every tab is firing these "events" and we want to make sure we only care about the one in which we have matched our content scripts too (you can specify a match in the manifest!).

By passing a messgae to the content_script being executed in the current tab, we are asking "Are you my content script? If so, please re-start."