Chrome DevToolsエクステンションサイドバーをページ更新時にリロードする

Question

これはGoogle Chrome DevTools Extension - Detect Page Changeの質問の欺瞞かもしれませんが、実際の答えがなくても1年以上座っていて、問題に新しい洞察を与えてくれます。

DevToolsにサイドバーパネルを挿入するChrome拡張機能を作成しました。サイドパネルには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イベントを待ち受けます。次に、Devtools.jsにメッセージを送信してサイドパネルを更新し、そのページを再び 'panel.html'に設定します。

background.jsで

：Devtools.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); 
} 

：

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