小编典典

列出页面上所有图像的文件大小(Chrome扩展程序)

ajax

我想编写一个Chrome扩展程序,在其中输入页面URL,它列出了该页面上显示的所有图像文件名以及这些图像的文件大小,例如“页面包含图像:1.jpg(65KB),2.png(135KB)
)”。如何才能做到这一点?我也想避免使它成为devtools扩展。

我尝试使用webRequest
API,但看不到任何访问请求正文的方法。图片大小可能会在响应标头中发送,但不能保证。我已经尝试过使用AJAX来获取图像数据,但是您获得的图像数据是未压缩的版本,这不能准确反映实际文件的大小。


阅读 278

收藏
2020-07-26

共1个答案

小编典典

您可以致电document.images获得图像document,使用fetch()Response.blob()以回报Blob图像的响应,检查.sizeBlob,以获取图像的名称URL()构造

let getImages = () => {

  let images = Array.from(document.images);

  return Promise.all(images.map(img => fetch(img.src)

    .then(response => response.blob())))

    .then(blobs => {

      return blobs.map((img, index) => {

        let name = new URL(images[index].src).pathname.split("/").pop();

        name = !/\./.test(name)

               ? name + "." + img.type.replace(/.+\/|;.+/g, "")

               : name;

        return {

          name: name,

          size: img.size

        }

      });

    })

}



getImages()

.then(images => console.log(JSON.stringify(images)))

.catch(e => console.log(e))


<img src="https://placehold.it/10x10">

<img src="https://placehold.it/20x20">
2020-07-26