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

Question

这可能是对Google Chrome DevTools扩展程序-检测页面更改中的问题的重复，但是已经存在了一年多，没有一个真实的答案，也许我的问题将为您提供对该问题的一些新见解。

我编写了一个Chrome扩展程序，它将侧边栏面板插入DevTools。 侧面板列出了dataLayer事件，用户可以单击所需的事件，然后使用元素选择器选择页面上的另一个元素，并且插件以点表示法显示元素之间的路径。

这是Github项目的链接： https : //github.com/gruebleenagency/gtm-data-layer-sifter

它可以正常运行，但是如果您导航到另一个页面，则侧栏不会再次初始化，因此它将显示上一页的信息。

您可以看到我的background.js文件中包含以下内容：

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

function reloadExtension() {
     // ???
}

我想知道此时是否有任何方法可以重新加载侧栏？ 还是我会以错误的方式处理此问题？ 我花了很多时间来解决这个问题，以使其正常工作，但似乎没有办法解决。

感谢您提供的所有帮助。

Answer 1

这是我的解决方案。 很有可能这不是应该完成的方式，但是我目前没有时间重写整个插件，因此现在必须这样做。 我应该怎么做的任何建议将不胜感激。 也许这对处于不同情况的人会有所帮助。

本质上，请听tabs.onUpdated事件等待“完成”状态，这表明我们已经导航到新页面。 然后通过再次将其页面设置为“ panel.html”，将消息发送至Devtools.js以刷新侧面板。

在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);
}

在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

您可以通过监听onNavigated事件来实现：

在Devtools.js中

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