重新加載頁面更改時的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');
});