1

I'm working on an extension that intercepts network requests using the chrome.devtools.network API.

The extension is written with React.

Currently, the interception is done on the devTools panel, so the interception started only when the user enter my extension.

I can move the interception logic to the devTools but I wonder how to pass the data to the panel dynamically, so the React component on the panel will be updated with the new data and can show it.

Any suggestion?

Shlomy Z
  • 301
  • 2
  • 14

1 Answers1

2

I've solved it by doing something similar to this answer like this:

devTools.tsx:

chrome.devtools.panels.create('Apex Network', "", 'panel.html', function (extensionPanel) {
var _window; // Going to hold the reference to panel.html's `window`
let reqs = [];

const requestHandler = request => {
        reqs.push(request);
};

chrome.devtools.network.onRequestFinished.addListener(requestHandler)
extensionPanel.onShown.addListener(function tmp(panelWindow) {
    extensionPanel.onShown.removeListener(tmp); // Run once only
    chrome.devtools.network.onRequestFinished.removeListener(requestHandler)
    _window = panelWindow;
    _window.INITIAL_DATA = reqs;

})  })

Panel.tsx

declare global {
interface Window { INITIAL_DATA: any; }
}
window.INITIAL_DATA = window.INITIAL_DATA || {};

const Panel = () => {

    const requestHandler = (request) => {...}

    useEffect(()=>{                                                               
    window.INITIAL_DATA?.forEach(requestHandler)
    window.INITIAL_DATA = [];
    chrome.devtools.network.onRequestFinished.addListener(requestHandler)
});
}

So in the end, it's done by doing that:

  1. When the devtools is open, the devtools register to the network requests and store them in an array.
  2. When the devtools extension is open, the devtools unregister for the network requests and the requests is passed to the panel and the devtools stop capturing requests
  3. The panel handle the request that captured at the devtools
  4. The panel register to the network requests

Thanks

Shlomy Z
  • 301
  • 2
  • 14