CODEWITHSUNDEEP
google-chrome-extension
Muna
Muna

Reputation: 71

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

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.

Chrome Devtool

Also checked webRequest API.

Upvotes: 1

Views: 312

Answers (1)

woxxom
woxxom

Reputation: 73736

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.

Upvotes: 1

Related Questions