Question

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

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

Answer 1

您可以致电$|以获取document.images中的图片，使用document，fetch()返回Response.blob()图片回复，然后检查Blob在.size中，使用Blob构造函数获取图像名称

＆＃13;

URL()

＆＃13;

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))

＆＃13;

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

1 个答案: