Download all images from a webpage

downloadWebpageImages.js

const IMAGE_EXTENSIONS = [".jpg", ".png", ".svg", ".webp", ".gif"]
const getFileExtension = url => `.${url.split('?')[0].split('.').pop()}`
const imageUrls = 
Array.from(
  document.querySelectorAll('img')
).map(({ src }) => ({src}))
.filter(({ src }) => {
  return src && IMAGE_EXTENSIONS.includes(getFileExtension(src))
})
.map(({src}, idx) => ({ src, filename: `Image-${idx}${getFileExtension(src)}`}))

function downloadFile(url, name) {
  fetch(url).then(res => res.blob()).then(res => {
      const link = document.createElement('a');
      link.setAttribute('download', name);
      const href = URL.createObjectURL(res);
      console.log(href)
      link.href = href;
      link.setAttribute('target', '_blank')
      link.click();
      setTimeout(() => {
          URL.revokeObjectURL(href)
      }, 0)
  })
}

imageUrls.forEach((img) => {
  downloadFile(img.src, filename)
})

I forgot to mention the first time its run on the site, I do get a message saying do you want to download, but it doesnt appear a second or more times on the same page.

it giving me an error "filename is not defined" i copied the all of the code without affecting it , why it giving me like this ?

FIXED:
line 27 (missing img object):

imageUrls.forEach((img) => {
  downloadFile(img.src, img.filename)
})

To prevent browser blocking use (instead of code from line 27):

const IMGS_PER_BATCH = 10;
async function downloadBatches(imageUrls) {
  for (let i = 0; i < imageUrls.length; i += IMGS_PER_BATCH) {
    console.log("Lecimy z batch", i / IMGS_PER_BATCH + 1);
    const batch = imageUrls.slice(i, i + IMGS_PER_BATCH);
    batch.forEach((img) => {
      downloadFile(img.src, img.filename);
    });
    if (i + IMGS_PER_BATCH >= imageUrls.length) break; // Last batch
    await new Promise(resolve => setTimeout(resolve, 3000)); // Wait 3s
  }
  console.log("Downloaded all batches");
}

// Run
downloadBatches(imageUrls);

Code need to be pasted into browser console