Question

这可能是Google Chrome DevTools Extension - Detect Page Change问题的一个问题，但它已经坐了一年多没有真正的答案，也许我的问题会提供一些新的见解。

我写了一个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');
});

在页面更改时重新加载Chrome DevTools扩展侧栏

2 个答案: