Bookmarklet to download some images on a page

bookmarklet_image_dwl.js

// as one-liner for bookmarklet
javascript:;(function(){var images=document.querySelector('#background.player').children;try{for (let img of images) {downloadResource(img.src)}}catch(e){alert("Download failed.");console.log('Download failed.',e)}function forceDownload(blob,filename){var a=document.createElement('a');a.download=filename;a.href=blob;a.click()}function downloadResource(url,filename){if(!filename)filename=url.split('\\').pop().split('/').pop();fetch(url,{headers:new Headers({'Origin':location.origin}),mode:'cors'}).then(response=>response.blob()).then(blob=>{let blobUrl=window.URL.createObjectURL(blob);forceDownload(blobUrl,filename)}).catch(e=>console.error(e))}}).call(window);

directory_and_file_api_saver.js

// From https://paul.kinlan.me/bookmarklet-to-download-all-images-on-a-page-with-the-file-system-api/
// Doesn't work on firefox (2022-10-26) see: https://developer.mozilla.org/en-US/docs/Web/API/Window/showDirectoryPicker#browser_compatibility

const run = async () => {
  const dirHandle = await window.showDirectoryPicker();
  const imgs = [].slice.call(document.querySelector('#background.player').children);
  
  imgs.forEach(async (img) => {
    const url = img.src;
    const name = url.split('\\').pop().split('/').pop();
    
    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();

dwlImagesFromPage.js

/*
Bookmarklet to download all images in the current page, including images from other origins.

Sources:
    https://gist.github.com/sfrdmn/8834747 by sfrdmn, unlicenced but I hope you won't sue me :3
	  https://stackoverflow.com/a/49500465/2550406 by Leeroy, CC-BY-SA
*/
;(function() {
  var images = document.querySelector('#background.player').children;
  try {
    for (let img of images) {
      downloadResource(img.src);
    }
  } catch (e) {
      alert("Download failed.");
      console.log('Download failed.', e);
  }
  
  function forceDownload(blob, filename) {
  var a = document.createElement('a');
  a.download = filename;
  a.href = blob;
  a.click();
}

// Current blob size limit is around 500MB for browsers
function downloadResource(	url, filename) {
  if (!filename) filename = url.split('\\').pop().split('/').pop();
  fetch(url, {
      headers: new Headers({
        'Origin': location.origin
      }),
      mode: 'cors'
    })
    .then(response => response.blob())
    .then(blob => {
      let blobUrl = window.URL.createObjectURL(blob);
      forceDownload(blobUrl, filename);
    })
    .catch(e => console.error(e));
}
}).call(window);

preview_to_actual.js

// if the images are only thumbnails and contained directly within an <a/> element, run this first to replace the images with their quality versions... or edit the code above to call
//downloadResource(img.parentElement.href)
// instead of img.src
var images = [].slice.call(document.querySelectorAll('img'));
images.forEach(function(img){img.src = img.parentElement.href;}