Chrome webRequest onCompleted：页面大小

Question

我正在使用Chrome扩展程序，并且想知道是否有方法知道加载页面时下载的数据量。

例如，如果用户激活了扩展程序并继续Google.com，我想向他显示页面的大小：google.com。

有没有办法做到这一点？

谢谢！

Answer 1

有很多方法可以使用javascript来确定页面大小。

1. 你可以手动在页面和脚本中字符计数的ammount的计算网页的大小。下面的示例脚本将计算ascii编码的html文档的大小（因此不包括图片，来自url的脚本等）。我不太确定这是多么准确或快速，所以不要在此引用我的意见。

示例脚本：

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 

为了确定图像的尺寸，这个问题可能会有所帮助：Determining image file size + dimensions via Javascript?

你可以使用加载的结果另一项服务，如谷歌的pagespeed insights或pingdom。您可以尝试在后台页面中的iframe中加载服务，并使用内容脚本输入网址并提取网站统计信息并将其发送到弹出窗口。我相信很多其他服务可以帮助你做到与Ajax调用相同，虽然我不知道任何。

使用ajax和jquery，您可以确定页面中所有资产的大小并将它们加在一起：Get size of file requested via ajax。使用正确的话，这可以从catch获取所有文件，所以它不会使用更多的网络。但是，对于包含大量非内联脚本，样式表和图像的页面，它可能会有点慢。

使用chrome.webrequest API时，可以通过头部'Content-Length'来确定文件大小。我还没有测试过这个脚本，所以告诉我这是如何工作的。 如果标题丢失，请确保有回退功能！

示例脚本：

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"]);