List File Sizes Of All Images On A Page (chrome Extension)

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

Solution 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

letgetImages = () => {
  let images = Array.from(document.images);
  returnPromise.all(images.map(img =>fetch(img.src)
    .then(response => response.blob())))
    .then(blobs => {
      return blobs.map((img, index) => {
        let name = newURL(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))

<imgsrc="https://placehold.it/10x10"><imgsrc="https://placehold.it/20x20">