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

Question

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

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

Answer 1

您可以致电document.images获得图像document，使用fetch()，Response.blob()以回报Blob图像的响应，检查.size的Blob，以获取图像的名称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">