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

Hi, I was trying to use this function to download some images for a page first it didnt work but after reviewing the video I saw the last few lines in youtube look like this and it worked

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

Now I was testing it on a page and there were 60 images. The first time I ran it it grabbed the first 18 and then stoped no error. I tried again and now it tries the first 10 and each images shows network error

I assume the site may think its getting a DDOS attack so I added some delays to the function but still not working

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')
setTimeout(() => { link.click(); }, 1000);
setTimeout(() => {
URL.revokeObjectURL(href)
}, 500)
})
}

Not sure what to do Im still learinging javascript

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