1

In my app I have a namespaced application and there's information or metadata myApp carries on it that might be useful to devpane.

window.myApp = new App();

  1. How can I relay or send the following information to the devtool.js?

    window.myApp.metadata; // information

  2. And can I send a request from the devtool with a function that customizes the serialization of that metadata?

I've seen similar posts with the solution below, which returns null when I tried it.

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

NOTE: If a sample template can be provided that would be wonderful.

wOxxOm
  • 65,848
  • 11
  • 132
  • 136
user2167582
  • 5,986
  • 13
  • 64
  • 121

1 Answers1

2

This is how I've solved this. It feels more complicated than necessary, but it does work.

In the context of the inspected window

Based on this question.

This is where you've got access to window.myApp.metadata and can put it into the data object.

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

In the content script

This just forwards the data to the background page.

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

In the background page

Based on the 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!!
});
Community
  • 1
  • 1
Matt Zeunert
  • 16,075
  • 6
  • 52
  • 78
  • The documentation for [Messaging from Injected Scripts to the DevTools Page](https://developer.chrome.com/extensions/devtools#evaluated-scripts-to-devtools) suggests the same technique, but uses the `window.postMessage` API instead of a `CustomEvent`. It also does suggest that you have to go via the content script and background page to do this, so IT IS necessary, given the current architecture. Good answer. – Gideon Pyzer Jul 17 '16 at 01:08
  • so put {data: window.myApp.metadata} in the event and this will show up on background? – user2167582 Jul 17 '16 at 01:15
  • @MattZeunert but can i use devtool.js to house the first script and sends window.myApp? or does the client application have to voluntarily build and send that event? – user2167582 Jul 17 '16 at 02:16
  • @MattZeunert nm, i guess you still have to inject code, thanks matty – user2167582 Jul 17 '16 at 02:35
  • Yeah, only code that's been injected into the page has access to the correct `window` object. – Matt Zeunert Jul 17 '16 at 16:57