How to calculate webpage transferred size programmatically? Chrome extension

user_7023163 0
Viewed 239

I'm developing a chrome extension and I want to calculate this value(check screenshot) programmatically.

I've tried Performance API's methods but the values are different. I don't want to attach a debugger to a webpage or adding a custom dev panel

enter image description here 

const transferSize = performance.getEntriesByType('resource').map(item => item.transferSize).reduce((total, item) => total + item);
const encodedBodySize= performance.getEntriesByType('resource').map(item => item.encodedBodySize).reduce((total, item) => total + item);
const decodedBodySize= performance.getEntriesByType('resource').map(item => item.decodedBodySize).reduce((total, item) => total + item);

google-chrome-extension javascript
1 Answers

Your logic looks correct to me. But, there was one thing that looked weird in below code:

performance.getEntriesByType('resource').length;

The above gives me the length of request calls for only resource type, but what you actually might need is the transferSize for all the network calls and not only of resource type. This must be the reason that the transferSize is not getting matched.

I tried the following code and it seemed to me:

var count = 0;
performance.getEntries().map(item => item.transferSize).forEach(size => {
if (typeof size == 'number') {
count = count + size;
}
});

This code returns me the transferSize for all the network calls, and the length of request calls also matches up. I have provided a typeof check, as there were some undefined transfer sizes

user_77341000
Related