Chrome DevTools 확장 사이드 바 다시로드 페이지 변경

Question

이것은 Google Chrome DevTools Extension - Detect Page Change의 질문에 속한 사람 일지 모르지만 실제 답변이없는 한 1 년 넘게 앉아 있었고 문제에 대한 새로운 통찰력을 제공 할 것입니다.

DevTools에 사이드 바 패널을 삽입하는 Chrome 확장 프로그램을 작성했습니다. 사이드 패널은 dataLayer 이벤트를 나열하고 사용자가 원하는 이벤트를 클릭 한 다음 요소 선택기를 사용하여 페이지의 다른 요소를 선택할 수 있으며 플러그인은 요소 사이의 경로를 점 표기법으로 표시합니다. 나는 일반적으로 그것을 원하는만큼 https://github.com/gruebleenagency/gtm-data-layer-sifter

그것은 작동하지만, 다른 페이지로 이동하는 경우가에서 정보를 표시하므로, 사이드 바는 다시 초기화되지 않은 : 여기

는 Github에서 프로젝트에 대한 링크입니다 이전 페이지.

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