Is there way to monitor websocket traffic via dev-tools extension API?

[Robby]

I have been searching through the docs, but I can't seem to find anything. I can monitor HTTP traffic like so:

 

    chrome.devtools.network.onRequestFinished.addListener(

        function(request) {

 

        });

 

But I can't seem to find an API for sockets. If you go into dev-tools, navigate to the network tab, you can see there is support for websockets. I just can’t find any hooks at the moment. A nudge in the right direction would be greatly appreciated.

 

Thanks!

[Andrey Kosyakov]

Hi Robby,

We do not expose WebSocket frames in the extension API at the moment -- you can file a request on crbug.com if you need this.

A somewhat fragile solution for the time being would be to use inspectedWindow.eval() to inject a code into the inspected page that wraps WebSocket constructor and hooks send() method as well as adding an onmessage listener, then marshalls the intercepted data to the front-end component with the help of content script and background page (or just keeps the data for later collection with the help of another call to eval()).

Best regards,

Andrey.

--
You received this message because you are subscribed to the Google Groups "Google Chrome Developer Tools" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-develo...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-chrome-developer-tools/6b6b5cd1-92cd-4702-ba02-eaf3ace65ea6%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Robby]

Andrey,

Thank you very much, I was able monitor the WebSocket traffic given the advice above, but I am hitting another wall. I have read the Message Passing documentation, but I can't seem to send messages from inside the inspected window back to the panel. I have tried a couple variations of background scripts and content scripts but I can't seem to get a round trip. For example:

Invoked from chrome.devtools.inspectedWindow.eval:

WebSocket.prototype.send = function(data) {

        

        .

        .

        .

    this.addEventListener('message', function(msg) {

        /* Send message back to Panel.html in order to update the UI */

       chrome.runtime.sendMessage({bar: 'bar'});

    }, false);

    this.send = function(data) {

        this._send(data);

        /* Send message back to Panel.html in order to update the UI */

       chrome.runtime.sendMessage({foo: 'foo'});

    };

}

As a test, I have a background script that is ultimately listening for both internal and external messages via chrome.runtime.onMessage.addListener && chrome.runtime.onMessageExternal.addListener. In either case I cannot seem to receive the data back from the wrapper. In the end, the goal is to update my dev-tools panel every time a socket request is made. Any help would be greatly appreciated. 

Thanks!

[Andrey Kosyakov]

Hi Robby,

yeah, messaging in DevTools extensions is messy at the moment, sorry about that! The problem is, you can only use chrome.runtime from a content script, not from the code you inject in the main page. So you need to get the data to the content script first, which can be done by sending a DOM message (i.e. window.postMessage()), then doing it the way you do from 'message' event listener on window in the content script.

A convenient way to inject a content script into the inspected page is to pass { useContentScriptContext: true } as an option to chrome.devtools.inspectedPage.eval().

Best regards,

Andrey.

--

You received this message because you are subscribed to the Google Groups "Google Chrome Developer Tools" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-develo...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-chrome-developer-tools/70382570-101e-4354-9cc8-c82eb194e6a2%40googlegroups.com.

[Rodrigo Gomes]

Hello,

Coming back to this older topic as I am doing some research on the same problem.

Do we have any news on this in the most recent versions? Can we use the devtools API to monitor websocket traffic? Or some hook in the internal api used by the Network panel?

I'm not sure if this topic has even become a feature request.

This is another workaround I have tried, intercepting the NetworkDispatcher from devtools-frontend:

const origImpl = SDK.NetworkDispatcher.prototype.webSocketFrameReceived
SDK.NetworkDispatcher.prototype.webSocketFrameReceived = function (requestId, time, response) {
   // send the data to my panel
   origImpl.bind(this)(requestId, time, response)  // flow to original function
}

But it does not work because the whole SDK namespace is not visible from my devtools window code - although it can be called from a "console over console - ctrl+shift+J"

If there are no official ways - can I do something to make the workaround above work?