So senden Sie Informationen aus dem Fenster an das Devtool in Chrome-Erweiterung

Question

In meiner App habe ich eine Namespace-Anwendung und es gibt Informationen oder Metadaten myApp trägt auf, die Devpane nützlich sein könnte.

window.myApp = new App(); 

1. Wie kann ich die folgenden Informationen an die devtool.js Relais oder senden?

   window.myApp.metadata; // information 
   

2. Und kann ich eine Anfrage von der DevTool mit einer Funktion senden, die die Serialisierung dieser Metadaten passen?

Ich habe unten mit der Lösung ähnliche Beiträge gesehen, die null zurückkehrt, wenn ich es versucht.

chrome.devtools.inspectedWindow.eval("window.myApp", { 
    useContentScriptContext: true 
}) 

HINWEIS: Wenn eine Beispielvorlage bereitgestellt werden kann, wäre das wunderbar.

Answer 1

So habe ich das gelöst. Es fühlt sich komplizierter als nötig an, aber es funktioniert.

Im Rahmen des inspizierten Fenster

Basierend auf dieser question.

Hier haben Sie Zugriff auf window.myApp.metadata und können es in das Datenobjekt einfügen.

var event = new CustomEvent("RebroadcastExtensionMessage", {data: ""}); 
window.dispatchEvent(event); 

Im Content-Skript

Dieser leitet nur die Daten an die Hintergrundseite.

window.addEventListener("RebroadcastExtensionMessage", function(evt) { 
    chrome.runtime.sendMessage(evt) 
}, false); 

Im Hintergrund Seite

Basierend auf dem Chrome docs.

chrome.runtime.onConnect.addListener(function(devToolsConnection) { 
    chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) { 
     devToolsConnection.postMessage(request) 
    }); 
}) 

In devtools.js

var backgroundPageConnection = chrome.runtime.connect({ 
    name: "devtools-page" 
}); 

backgroundPageConnection.onMessage.addListener(function (message) { 
    // Data has arrived in devtools page!! 
});