A bookmarklet to download all images on a page, using the FileSystem API

downloa-all-images-bookmarklet.js

javascript:(function(){

  const run = async () => {
    const dirHandle = await window.showDirectoryPicker();
    const imgs = document.querySelectorAll("img");
    let i = 0;

    imgs.forEach(async (img) => {
      const url = img.src;
      const name = `img-${i}.png`;
      i++;

      try {
        console.log(`Fetching ${url}`);
        const response = await fetch(url);

        console.log(`Saving to ${name}`);

        const file = await dirHandle.getFileHandle(name, { create: true });
        const writable = await file.createWritable();
        await response.body.pipeTo(writable);
      } catch (err) {
        console.log(err);
      }
    });
  };

  run();
})();

removed my dumb comment which, being on the first line of code, turned the whole gist into a comment 🤦‍♂️

also, credit where credit is due, this code was shamelessly taken from

https://paul.kinlan.me/bookmarklet-to-download-all-images-on-a-page-with-the-file-system-api/

i had tried a multitude of approaches and plugins for this purpose, and this is the most elegant solution.

TODO: tweak the client side filepicker, filter by image size, so as not to download a gazillion tracker pixels along with actual images i want