重新加載Chrome DevTools擴展補充工具欄上的頁面變化

這可能是在Google Chrome DevTools Extension - Detect Page Change的問題，但它已坐了一年沒有一個真正的答案，也許我的問題將提供一些新的洞察問題。重新加載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() { 
    // ??? 
}

我不知道是否有什麼辦法可以使在這一點上欄重裝？還是我以錯誤的方式解決這個問題？我花了很多時間搞這個試圖讓它工作，但似乎沒有辦法。

感謝您的幫助。

來源

2016-08-29 Danbleen

我沒有嘗試自己，但由〔文檔]判斷（https://developer.chrome。 com/extensions/devtools＃解決方案），您可以簡單地向您的面板發送消息。然後您的面板可以自行更新。不知道爲什麼需要重新加載。 UI的無縫更新更加便於用戶使用。無論如何，'location.reload（）'應該在面板中工作。 – wOxxOm

謝謝wOxxOm，這很有幫助。我想重新加載而不是進行UI的無縫更新的原因是由於某些原因，導航到新頁面後，頁面所需的某些腳本似乎不存在。這可能只是一個設計缺陷，但我不想重寫整個插件。感謝您的回覆！我將爲自己的問題提交一個答案，希望我的解決方案能夠幫助未來的人。 – Danbleen

這是我的解決方案。這很可能不是它應該完成的方式，但我現在沒有時間重寫整個插件，所以現在必須要做。任何建議，我應該如何做到這一點將不勝感激。也許這會對處於不同情況的人有所幫助。

本質上，請聽取等待「完成」狀態的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"); 
    } 
});

來源

2016-08-31 15:23:21 Danbleen

重新加載Chrome DevTools擴展補充工具欄上的頁面變化

回答

相關問題