chrome.devtools.inspectedWindow change event

Question

The Google Chrome extension API provides info on the currently open window, using chrome.devtools.inspectedWindow, but it doesn't provide events for when it changes. I may refresh or redirect the page and I'd like the DevTools panel I'm adding to be notified. Is there a method for this?

Think of the Elements panel, it always stays up to date with the current DOM. This might be hard to implement in order to stay up to date like it does, whenever a DOM mutation happens, but I'd like at least to be notified when a new page is loaded (probably on the document.onload event, why not)

Any ideas on how to implement this, thanks?

Answer 1

Listen to one of the chrome.webNavigation events, and notify the devtools whenever an update occurs.

Another way to detect that the inspected page is being unloaded is to use the chrome.devtools.network.onNavigated event (only available within your devtools extension page).

Answer 2

I had the same challenge, and this was the only result I found in Google, so I wanted to answer with the solution I found. The key lies not in chrome.devtools.inspectedWindow, but in chrome.tabs.onUpdated. In fact, I've found chrome.tabs.* to be much more useful in general. Here's the code I'm using to watch state changes from my extension;

chrome.tabs.onUpdated.addListener(function (tabId, changes, tabObject) {
  console.log("Status of", tabId, "is", changes.status);
  if (changes.status == "complete") {
    console.log("Tab Load Complete");
  }
});

You could also use the chrome.tabs.* API to check whether the status change happened on the current tab or not.