Chrome webRequest onCompleted: Size of the page

问题

I am working on a Chrome Extension, and I wanted to know if there was a way to know the amount of data which has been downloaded while loading a page.

For example, if the user activates the extension, and goes on Google.com, I want to show him the size of the page: google.com.

Is there a way to do this?

Thanks!

回答1:

There are a multitude of ways you could determine the size of a page using just javascript.

You could manually calculate the size of the page by counting the ammount of characters in the page and in scripts. The example script bellow calculates the size of an ascii encoded html doc (so not including pictures, scripts from urls, ect). I'm not too sure how accurate or fast this is, so don't quote me on it.

Example script:

var html=document.getElementsByTagName('HTML')[0].outerHTML,//get all html as string
    sizeKB=a.length/1024;//assuming the page is encoded in ascii, each char is one byte, 1024 bytes = 1 kb

For determining size of images, this question could help: Determining image file size + dimensions via Javascript?

You could load the results using another service like google's pagespeed insights or pingdom. You could try to load the services in an iframe in your background page and use content scripts to input the url and extract the site's statistics and send them to the popup. I'm sure plenty of other services could help you do the same with ajax calls although I don't know of any.
Using ajax and jquery, you could determine the size of all the assets in the page and add them together: Get size of file requested via ajax . Used correctly, this could fetch all of the files from the catch, so it wouldn't use more of the network. But it might be a bit slow for pages with a lot of non-inline scripts, stylesheets, and images
Using the chrome.webrequest api, you could get the header 'Content-Length' to determine the file size. I haven't tested this script also, so tell me how this works. Make sure to have a fallback if the header is missing!

Example script:

chrome.webRequest.onHeadersReceived.addListener(
function(details){
    var fileSize;
    details.responseHeaders.forEach(function(v,i,a){
        if(v.name == 'Content-Length')
            fileSize = v.value;
    });
    if(!fileSize)//if Content-Length header is missing fall back to another method of calculating file size
        fallBackGetFileSize(details);
},
{urls: ["http://*/*"]},["responseHeaders"]);

来源：https://stackoverflow.com/questions/38038450/chrome-webrequest-oncompleted-size-of-the-page

标签

javascript

google-chrome

google-chrome-extension