Question

I’m trying to write a Chrome extension that takes a URL and shows all the resources the browser needs to display the page that URL points to, along with their sizes over the network (compressed) and sizes on the client (decompressed).

I’ve been able to tap into required resources by adding a listener to chrome.experimental.webRequest.onCompleted. However, this callback doesn’t allow me to see the size of headers.

I think that adding a listener to chrome.experimental.devtools.network.onRequestFinished which calls chrome.experimental.devtools.network.getHAR would do the trick, but I’m not able to use anything in chrome.experimental.devtools.network as I get the error Uncaught TypeError: Cannot read property 'network' of undefined.

Any ideas?

Answer 1

If the compressed size is in the header, you can get it like this:

chrome.experimental.webRequest.onResponseStarted.addListener(
  function(details) {
    for (var i = 0; i < details.responseHeaders.length; ++i) {
      if (details.responseHeaders[i].name === 'Content-Length') {
        console.log(details.url + ': ' + details.responseHeaders[i].value +
                    'bytes');
      }
    }
  },
  {},
  ["responseHeaders"]);