列出页面上所有图像的文件大小(Chrome 扩展程序) [英] List file sizes of all images on a page (Chrome Extension)

问题描述

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

I want to write a Chrome Extension where you enter a page URL and it lists all the image filenames that appear on that page with the file sizes of those images e.g. "Page contains images: 1.jpg (65KB), 2.png (135KB)". How can this be done? I want to avoid making this a devtools extension as well.

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

I've tried using the webRequest API but I can see no way to access the body of the requests. The image size might be sent in the response header but this isn't guaranteed. I've tried using AJAX to grab the image data but the image data you get is the uncompressed version and this wouldn't be an accurate reflection of the actual file size.

推荐答案

可以调用document.images来获取document中的图片，使用fetch(), Response.blob() 返回图像的Blob响应，检查Blob的.size, 使用 URL() 构造函数

You can call document.images to get images in document, use fetch(), Response.blob() to return Blob response of image, check .size of Blob, get name of image with URL() constructor

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

这篇关于列出页面上所有图像的文件大小(Chrome 扩展程序)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！