Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Bookmarklet to download all images on a page
// as one-liner for bookmarklet
javascript:;(function(){var images=[].slice.call(document.querySelectorAll('img'));try{images.forEach(function(img){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);
/*
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 = [].slice.call(document.querySelectorAll('img'));
try {
images.forEach(function(img) {
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);
// 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;}
@iyanriana

This comment has been minimized.

Copy link

iyanriana commented Jun 22, 2018

@lucidBrot How to execute this .js file on popup.html?

@mkanet

This comment has been minimized.

Copy link

mkanet commented Jul 5, 2018

Thank you for this bookmarklet! This seems to be the best solution for web browsers like Edge that don't have an extension for this yet. I'm using your bookmarklet code with img.parentElement.href to avoid thumbnails.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.