重新加载页面更改时的Chrome DevTools Extension侧边栏

Question

This may be a dupe of the question at Google Chrome DevTools Extension - Detect Page Change , but it's been sitting for over a year without a real answer, and maybe my question will provide some new insight into the problem.

I've written a Chrome Extension which inserts a sidebar panel into DevTools. The side panel lists the dataLayer events, a user can click on the desired event and then use the element picker to select another element on the page, and the plugin displays the path between the elements in dot notation.

Here's the link to the Github project: https://github.com/gruebleenagency/gtm-data-layer-sifter

It works as I'd like it to normally, but if you navigate to another page, the sidebar is not initialized again, so it displays the info from the previous page.

You can see that I have this in my background.js file:

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

function reloadExtension() {
     // ???
}

I'm wondering if there's any way to make the sidebar reload at this point? Or am I going about this in the wrong way? I've spent a lot of time messing around with this trying to get it to work, but nothing seems to do the trick.

Thanks for any and all help.

Answer 1

Here's my solution. It's very possible that this isn't the way it should be done, but I don't have the time to rewrite the whole plugin at the moment, so it'll have to do for now. Any suggestions for how I should have done it would be greatly appreciated. And maybe it will be helpful to someone in a different situation.

Essentially, listen to the tabs.onUpdated event waiting for the 'complete' status, which indicates we've navigated to a new page. Then send message to Devtools.js to refresh the side panel, by setting its page to 'panel.html' again.

In background.js:

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

function reloadExtension(port) {
    var message = {action: "reloadExtension"};
    port.postMessage(message);
}

In Devtools.js:

var sb;
createSidebar();

function createSidebar() {
    chrome.devtools.panels.elements.createSidebarPane("GTM dataLayer Sifter", function(sidebar) {
        sb = sidebar;
        sb.setPage("panel.html");
    });
}

var port = chrome.extension.connect({
    name: "Devtools.js Communication"
});

// Listen to messages from the background page
port.onMessage.addListener(function(message) {
    if(message.action == "reloadExtension"){
        sb.setPage("panel.html");
    }
});

Answer 2

You can do it by listen onNavigated event:

In Devtools.js

chrome.devtools.network.onNavigated.addListener(() => {
  console.log('Inspected page reloaded');
});