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

Reload Chrome DevTools Extension Sidebar on Page Change

本文关键字：侧边栏 扩展 DevTools 新加载 加载 Chrome      更新时间：2023-09-26

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

我想知道是否有任何方法使侧边栏重载在这一点上?还是我做错了?我花了很多时间来摆弄这个，试图让它工作，但似乎没有什么奏效。

谢谢大家的帮助。

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

本质上，听制表符。onUpdated事件等待'complete'状态，这表明我们已经导航到一个新页面。然后发送消息到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");
    }
});

你可以通过监听onNavigated事件:

在Devtools.js 

chrome.devtools.network.onNavigated.addListener(() => {
  console.log('Inspected page reloaded');
});
相关文章：