Question

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

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

有办法做到这一点吗？

谢谢！

Answer 1

使用javascript可以通过多种方式确定页面大小。

您可以通过计算页面和脚本中的字符数来手动计算页面大小。下面的示例脚本计算ascii编码的html doc的大小（因此不包括图片，来自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?

您可以使用google＆＃39; pagespeed insights或pingdom等其他服务加载结果。您可以尝试在后台页面的iframe中加载服务，并使用内容脚本输入网址并提取网站的统计信息并将其发送到弹出窗口。我确信很多其他服务可以帮助你对ajax电话做同样的事情，虽然我不知道。
使用ajax和jquery，您可以确定页面中所有资产的大小并将它们一起添加：Get size of file requested via ajax。如果使用得当，这可以从catch中获取所有文件，因此它不会使用更多的网络。但对于包含大量非内联脚本，样式表和图像的页面，它可能会有点慢
使用chrome.webrequest api，您可以获得标题＆＃39; Content-Length＆＃39;确定文件大小。我还没有测试过这个脚本，请告诉我它是如何工作的。 如果标题丢失，请务必备注！

示例脚本：

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

Chrome webRequest onCompleted：页面大小

1 个答案: