How to get content-transfer [size] information like in devtools network tab?

Question

I want to get the content-transfer size like in chrome devtool network tab through chrome extension API but it doesn't have events for this.

Also checked webRequest API.

Answer 1

Low-level precise approach

DevTools itself uses CDP (Chrome DevTools Protocol) events like Network.responseReceived and its encodedDataLength field (source).

It can be used in an extension via chrome.debugger API:

• attach the debugger to the tab
• navigate it to the URL or call chrome.tabs.reload()
• send debugger command Network.enable
• register an event listener for Network.responseReceived
• detect the moment the page is loaded by using a sliding timeout aka debounce

An annoying side-effect is that Chrome shows a warning in all tabs when the debugger is used by an extension. If you need more info, search for chrome.debugger examples yourself (here's a few official ones) and inspect the source code of devtools.

Content-Length approach

Another approach is to use Content-Length HTTP header but it's not guaranteed to be present on all responses: here's an example that you can further enhance with a check for fromCache field that's provided in a separate onCompleted event.