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

【问题标题】：Reload Chrome DevTools Extension Sidebar on Page Change在页面更改时重新加载 Chrome DevTools 扩展侧边栏
【发布时间】：2016-08-29 22:00:44
【问题描述】：

这可能是对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() {
     // ???
}

我想知道此时是否有任何方法可以让侧边栏重新加载？还是我以错误的方式解决这个问题？我花了很多时间来解决这个问题，试图让它发挥作用，但似乎没有任何作用。

感谢所有帮助。

【问题讨论】：

我自己没有尝试过，但根据the docs 判断，您可以简单地向您的面板发送消息。然后您的面板可以自行更新。不知道为什么需要重新加载。 UI 的无缝更新更加用户友好。无论如何，location.reload() 应该在面板内工作。
感谢 wOxxOm，这很有帮助。我想重新加载而不是无缝更新 UI 的原因是，由于某种原因，在导航到新页面后，页面所需的一些脚本似乎不存在。这可能只是一个设计缺陷，但我对重写整个插件不感兴趣。感谢您的回复！我将提交我自己问题的答案，希望我的解决方案将来能对某人有所帮助。

标签： javascript google-chrome google-chrome-extension google-chrome-devtools

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

你可以通过监听 onNavigated 事件来做到这一点：

在 Devtools.js 中

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

【讨论】：