List file sizes of all images on a page (Chrome Ex

Question

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.

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.

Answer 1

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