Google Chrome DevTools Extension - Detect Page Change

Question

I am trying to detect when the webpage has changed from a Google Chrome DevTools Extension.

I currently have a devtools.html & devtools.js that detects if a condition is true and if it is, it adds the dev tool panel.

chrome.devtools.inspectedWindow.eval(/*my test*/, function (result, exception) {
    if ( exception === undefined && result === true ) {
        chrome.devtools.panels.create("My Panel", "", "panel.html", function (panel) {
            ...

The problem is, if I open up the dev tool, and then navigate to another page, it doesn't re-evaluate the condition and add the panel. I have to close and reopen the devtool again.

I think I could do this with a background page that I pass the tabId too, but not looked into how to do this yet, but I don't want to go down that route if there is a very simple technique I have overlooked.

Also, I have yet to find any information on Removing my panel once it has been created if the conditions were previously met, but no longer after a page navigation.

Answer 1

Yes. I think you can use chrome.tabs.onUpdated instead. Sample code to detect the state changes can be:

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    if (changeInfo.status == 'complete') {
     }
});