☰

Greasy Fork is available in English.

Ripper

Cleverly download all images on a webpage

  1. // ==UserScript==
  2. // @name         Ripper
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.3
  5. // @description  Cleverly download all images on a webpage
  6. // @author       TetteDev
  7. // @match        *://*/*
  8. // @icon         https://icons.duckduckgo.com/ip2/tampermonkey.net.ico
  9. // @license      MIT
  10. // @grant        GM_cookie
  11. // @grant        GM_xmlhttpRequest
  12. // @grant        GM.xmlHttpRequest
  13. // @grant        GM_registerMenuCommand
  14. // @grant        GM_getValue
  15. // @grant        GM_deleteValue
  16. // @grant        GM_setValue
  17. // @run-at       document-idle
  18. // @noframes
  19. // ==/UserScript==
  20.  
  21. const RenderGui = (selector = '') => {
  22.     const highlightSelector = '4px dashed purple';
  23.  
  24.     const highlightElement = (element) => {
  25.         element.style.border = highlightSelector;
  26.     };
  27.     const unhighlightElement = (element) => {
  28.         element.style.border = '';
  29.     }
  30.  
  31.     let container = null;
  32.     const guiClassName = 'gui-container';
  33.     if ((container = document.querySelector(`.${guiClassName}`))) {
  34.         container.remove();
  35.     }
  36.     else {
  37.         const style = document.createElement('style');
  38.         style.textContent = `
  39.             .gui-container {
  40.                 font-family: 'Segoe UI', Arial, sans-serif;
  41.                 max-width: 750px;
  42.                 margin: 20px auto;
  43.                 padding: 10px;
  44.                 background: white;
  45.                 border-radius: 8px;
  46.                 box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  47.  
  48.                 position: fixed;
  49.                 z-index: 9999;
  50.                 width: auto;
  51.                 height: auto;
  52.                 top: 15px;
  53.                 right: 15px;
  54.  
  55.                 border: 1px solid black;
  56.             }
  57.             .input-group {
  58.                 display: flex;
  59.                 gap: 5px;
  60.                 margin-bottom: 10px;
  61.             }
  62.             .input-text {
  63.                 flex: 1;
  64.                 padding: 8px 12px;
  65.                 border: 1px solid #ddd;
  66.                 border-radius: 4px;
  67.                 font-size: 14px;
  68.                 color: black !important;
  69.             }
  70.             .btn {
  71.                 padding: 8px 16px;
  72.                 background:rgb(250, 0, 0);
  73.                 color: white;
  74.                 border: none;
  75.                 border-radius: 4px;
  76.                 cursor: pointer;
  77.                 font-size: 14px;
  78.             }
  79.             .item-list {
  80.                 list-style: none;
  81.                 padding: 0;
  82.                 margin: 0 0 20px 0;
  83.                 max-height: 450px;
  84.                 overflow-y: auto;
  85.                 overflow-x: hidden;
  86.             }
  87.             .item-list li {
  88.                 display: flex;
  89.                 align-items: center;
  90.                 padding: 3px;
  91.                 border-bottom: 1px solid #eee;
  92.  
  93.                 -webkit-user-select: none !important;
  94.                 -khtml-user-select: none !important;
  95.                 -moz-user-select: -moz-none !important;
  96.                 -o-user-select: none !important;
  97.                 user-select: none !important;
  98.             }
  99.             .item-list li:hover {
  100.                 background-color: yellow;
  101.             }
  102.             .checkbox-group {
  103.                 margin-bottom: 10px;
  104.             }
  105.             .checkbox-label {
  106.                 display: inline-flex;
  107.                 align-items: center;
  108.                 margin-right: 20px;
  109.                 cursor: pointer;
  110.                 color: black !important;
  111.             }
  112.             .download-btn {
  113.                 width: 100%;
  114.                 padding: 12px;
  115.                 background: rgb(250, 0, 0);
  116.                 color: white;
  117.                 font-weight: bold;
  118.             }
  119.         `;
  120.         document.body.appendChild(style);
  121.     }
  122.  
  123.     // Create GUI elements
  124.     container = document.createElement('div');
  125.     container.className = guiClassName;
  126.  
  127.     // Add dragging functionality
  128.     let isDragging = false;
  129.     let currentX;
  130.     let currentY;
  131.     let initialX;
  132.     let initialY;
  133.     let xOffset = 0;
  134.     let yOffset = 0;
  135.  
  136.     const dragStart = (e) => {
  137.         if (e.target !== container) return; // Only drag from container itself
  138.         
  139.         initialX = e.clientX - xOffset;
  140.         initialY = e.clientY - yOffset;
  141.  
  142.         if (e.target === container) {
  143.             isDragging = true;
  144.             container.style.cursor = 'move';
  145.         }
  146.     };
  147.  
  148.     const dragEnd = () => {
  149.         initialX = currentX;
  150.         initialY = currentY;
  151.         isDragging = false;
  152.         container.style.cursor = '';
  153.     };
  154.  
  155.     const drag = (e) => {
  156.         if (!isDragging) return;
  157.         
  158.         e.preventDefault();
  159.         currentX = e.clientX - initialX;
  160.         currentY = e.clientY - initialY;
  161.         xOffset = currentX;
  162.         yOffset = currentY;
  163.  
  164.         container.style.transform = `translate(${currentX}px, ${currentY}px)`;
  165.     };
  166.  
  167.     container.removeEventListener('mousedown', dragStart);
  168.     document.removeEventListener('mousemove', drag);
  169.     document.removeEventListener('mouseup', dragEnd);
  170.  
  171.     container.addEventListener('mousedown', dragStart);
  172.     document.addEventListener('mousemove', drag);
  173.     document.addEventListener('mouseup', dragEnd);
  174.  
  175.     // Input group
  176.     const inputGroup = document.createElement('div');
  177.     inputGroup.className = 'input-group';
  178.     
  179.     const textbox = document.createElement('input');
  180.     textbox.type = 'text';
  181.     textbox.className = 'input-text';
  182.     textbox.placeholder = 'Enter a valid CSS selector';
  183.     if (selector && typeof selector === 'string') textbox.value = selector;
  184.     
  185.     const getMatchesButton = document.createElement('button');
  186.     getMatchesButton.className = 'btn';
  187.     getMatchesButton.textContent = '⟳';
  188.     getMatchesButton.style.fontWeight = 'bold';
  189.     getMatchesButton.title = 'Execute the CSS Selector (or just press enter)';
  190.  
  191.     let matchedElements = [];
  192.  
  193.     textbox.addEventListener('keyup', (e) => {
  194.         if (e.key !== 'Enter') return;
  195.         getMatchesButton.dispatchEvent(new Event('click', { 'bubbles': true }));
  196.     });
  197.     getMatchesButton.onclick = () => {
  198.         matchedElements.forEach(match => { unhighlightElement(match); });
  199.         matchedElements = [];
  200.         Array.from(document.querySelectorAll('.item-list > li')).forEach(li => { li.remove(); });
  201.         const selector = textbox.value;
  202.         if (!selector) return;
  203.  
  204.         try {
  205.             const matches = Array.from(document.querySelectorAll(selector));
  206.             matches.forEach((match, index) => {
  207.                 addListItem(`Match ${index + 1}`, match,
  208.                     () => { 
  209.                         matchedElements.forEach(match => { unhighlightElement(match); });
  210.                         highlightElement(match);
  211.                         match.scrollIntoView();
  212.  
  213.                         setTimeout(() => {
  214.                             unhighlightElement(match);
  215.                         }, 4000);
  216.                     });
  217.                 matchedElements.push(match);
  218.             });
  219.  
  220.             const lis = Array.from(document.querySelectorAll('.item-list > li'));
  221.             const selected = matches.filter(match => {
  222.                 const cb = lis.find(li => li.ref.isEqualNode(match)).querySelector('input[type="checkbox"]');
  223.                 cb.onchange = () => {
  224.                     const dlbtn = document.querySelector('.download-btn');
  225.                     const lis = Array.from(document.querySelectorAll('.item-list > li'));
  226.                     const selected = matches.filter(match => {
  227.                         const cb = lis.find(li => li.ref.isEqualNode(match)).querySelector('input[type="checkbox"]');
  228.                         return cb.checked;
  229.                     });
  230.                     dlbtn.textContent = `Download ${selected.length} Item(s)`;
  231.                 };
  232.                 return cb.checked;
  233.             });
  234.             document.querySelector('.download-btn').textContent = `Download ${selected.length} Item(s)`;
  235.  
  236.         } catch (err) { }
  237.     };
  238.  
  239.     // List
  240.     const itemList = document.createElement('ul');
  241.     itemList.className = 'item-list';
  242.  
  243.     // Checkbox group
  244.     const checkboxGroup = document.createElement('div');
  245.     checkboxGroup.className = 'checkbox-group';
  246.     
  247.     const options = [['Humanize', 'checked'], ['Inherit HTTP Only Cookies', 'checked'], ['Preserve Original Filename'], ['(WIP) Support Video Elements'], 'Placeholder Normal'];
  248.     options.forEach(opt => {
  249.         const label = document.createElement('label');
  250.         label.className = 'checkbox-label';
  251.         const checkbox = document.createElement('input');
  252.         checkbox.type = 'checkbox';
  253.  
  254.         label.style.display = 'block';
  255.         label.appendChild(checkbox);
  256.  
  257.         if (typeof opt === 'object') {
  258.             const text = opt[0];
  259.             label.appendChild(document.createTextNode(`  ${text}`));
  260.             
  261.             opt.slice(1).forEach(o => {
  262.                 switch (o) {
  263.                     case 'checked':
  264.                         checkbox.checked = true;
  265.                         break;
  266.                     case 'disabled':
  267.                         checkbox.disabled = true;
  268.                         break;
  269.                     default:
  270.                         console.warn(`Unrecognized checkbox opt: '${o}'`);
  271.                         break;
  272.                 }
  273.             })
  274.         } else {
  275.             label.appendChild(document.createTextNode(`  ${opt}`));
  276.         }
  277.         checkboxGroup.appendChild(label);
  278.     });
  279.  
  280.     // Download button
  281.     const downloadBtn = document.createElement('button');
  282.     downloadBtn.className = 'btn download-btn';
  283.     downloadBtn.textContent = 'Download 0 Item(s)';
  284.  
  285.     downloadBtn.onclick = async () => {
  286.         if (matchedElements.length === 0) return;
  287.  
  288.         const ResolveMediaElementUrl = (img) => {
  289.             const lazyAttributes = [
  290.                 'data-src', 'data-pagespeed-lazy-src', 'srcset', 'src', 'zoomfile', 'file', 'original', 'load-src', '_src', 'imgsrc', 'real_src', 'src2', 'origin-src',
  291.                 'data-lazyload', 'data-lazyload-src', 'data-lazy-load-src',
  292.                 'data-ks-lazyload', 'data-ks-lazyload-custom', 'loading',
  293.                 'data-defer-src', 'data-actualsrc',
  294.                 'data-cover', 'data-original', 'data-thumb', 'data-imageurl', 'data-placeholder',
  295.             ];
  296.             const IsUrl = (url) => {
  297.                 // TODO: needs support for relative file paths also?
  298.                 const pattern = new RegExp(
  299.                     '^(https?:\\/\\/)?'+ // protocol
  300.                     '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|'+ // domain name
  301.                     '((\\d{1,3}\\.){3}\\d{1,3}))'+ // OR ip (v4) address
  302.                     '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // port and path
  303.                     '(\\?[;&a-z\\d%_.~+=-]*)?'+ // query string
  304.                     '(\\#[-a-z\\d_]*)?$','i');
  305.                 const isUrl = !!pattern.test(url);
  306.                 if (!isUrl) {
  307.                     try {
  308.                         new URL(url);
  309.                         return true;
  310.                     } catch(err) {
  311.                         return false;
  312.                     }
  313.                 }
  314.                 return true;
  315.             };
  316.  
  317.             let possibleImageUrls = lazyAttributes.filter(attr => {
  318.                 let attributeValue = img.getAttribute(attr);
  319.                 if (!attributeValue) return false;
  320.                 attributeValue = attributeValue.replaceAll('\t', '').replaceAll('\n','');
  321.                 let ok = IsUrl(attributeValue.trim());
  322.                 if (!ok && attr === 'srcset') { 
  323.                     // srcset usually contains a comma delimited string that is formatted like
  324.                     // <URL1>, <WIDTH>w, <URL2>, <WIDTH>w, <URL3>, <WIDTH>w,
  325.                     // TODO: handle this case
  326.                     const srcsetItems = attributeValue.split(',').map(attr => attr.trim()).map(item => item.split(' '));
  327.                     if (srcsetItems.length > 0) {
  328.                         img.setAttribute('srcset', srcsetItems[srcsetItems.length - 1][0]);
  329.                         ok = IsUrl(img.getAttribute('srcset'));
  330.                     }
  331.                 }
  332.                 return ok;
  333.             }).map(validAttr => img.getAttribute(validAttr).trim());
  334.  
  335.             if (!possibleImageUrls || possibleImageUrls.length < 1) {
  336.                 if (img.hasAttribute('src')) return img.src.trim();
  337.                 console.error('Could not resolve the image source URL from the image object', img);
  338.                 return '';
  339.             }
  340.             return possibleImageUrls.length > 1 ? [...new Set(possibleImageUrls)][0] : possibleImageUrls[0];
  341.         };
  342.  
  343.         const lis = Array.from(document.querySelectorAll('.item-list > li'));
  344.         let urls = matchedElements.map(match => {
  345.             const matchCb = lis.find(li => li.ref.isEqualNode(match)).querySelector('input[type="checkbox"]');
  346.             if (!(matchCb?.checked ?? true)) {
  347.                 console.warn('Skipping match ', match, ' cause it was unchecked in the match list');
  348.                 return '';
  349.             }
  350.  
  351.             const opts = Array.from(document.querySelector('.checkbox-group').querySelectorAll('input[type="checkbox"]'));
  352.             const optSupportVideoElements = opts.find(_ => _.parentElement.textContent.includes("Support Video Elements"))?.checked ?? false;
  353.  
  354.             const supportedTypes = optSupportVideoElements ? [[HTMLImageElement,"IMG"],[HTMLVideoElement,"VIDEO"]] : [[HTMLImageElement,"IMG"]];
  355.             let actualMatch = 
  356.                 supportedTypes.some(supportedType => { const typeName = supportedType[0]; return match instanceof typeName; }) 
  357.                     ? match 
  358.                     : supportedTypes.map(supportedType => { const nodeName = supportedType[1]; return match.querySelector(nodeName); }).filter(res => res)[0];
  359.                 
  360.             if (!actualMatch) {
  361.                 console.warn('Failed to find supported element type for parent match element: ', match);
  362.                 return '';
  363.             }
  364.  
  365.             const src = ResolveMediaElementUrl(actualMatch);
  366.             return src;
  367.         }).filter(url => {
  368.             return url.length > 0;
  369.         });
  370.  
  371.         // TODO: filter out duplicates?
  372.         await Download(urls);
  373.     };
  374.  
  375.     // Add elements to container
  376.     inputGroup.appendChild(textbox);
  377.     inputGroup.appendChild(getMatchesButton);
  378.     container.appendChild(inputGroup);
  379.     //container.appendChild(itemListHeader);
  380.     container.appendChild(itemList);
  381.     container.appendChild(checkboxGroup);
  382.     container.appendChild(downloadBtn);
  383.  
  384.     // Add to document
  385.     document.body.appendChild(container);
  386.  
  387.     // Function to add new item to list
  388.     function addListItem(text, elemRef, itemClickCallback = null) {
  389.         const li = document.createElement('li');
  390.         li.style.cssText = 'cursor: pointer; padding: 0px; color: black !important;'
  391.         if (itemClickCallback && typeof itemClickCallback === 'function') {
  392.             li.ondblclick = itemClickCallback;
  393.         }
  394.         if (elemRef) {
  395.             li.ref = elemRef;
  396.         }
  397.  
  398.         li.title = 'Double click an entry to scroll to it and highlight it';
  399.         
  400.         const checkbox = document.createElement('input');
  401.         checkbox.type = 'checkbox';
  402.         checkbox.checked = true;
  403.         if (!elemRef && !itemClickCallback) checkbox.disabled = true;
  404.         checkbox.style.marginRight = '10px';
  405.         const textNode = document.createTextNode(text);
  406.         li.appendChild(checkbox);
  407.         li.appendChild(textNode);
  408.         itemList.appendChild(li);
  409.     }
  410.  
  411.     //addListItem('No matches', null, null);
  412. };
  413.  
  414. const SleepRange = (min, max) => {
  415.     const _min = Math.min(min, max);
  416.     const _max = Math.max(min, max);
  417.     const ms = Math.floor(Math.random() * (_max - _min + 1) + _min);
  418.     if (ms <= 0) return;
  419.     return new Promise(r => setTimeout(r, ms));
  420. };
  421.  
  422. const GetBlob = (url, inheritHttpOnlyCookies = true) => {
  423.     return new Promise(async (resolve, reject) => {
  424.         // TODO: Handle blob urls?
  425.         // const isBlobUrl = url.startsWith('blob:');
  426.         // console.warn('Encountered a blob url but implementation is missing');
  427.         // if (isBlobUrl) {
  428.         //     try {
  429.         //         const _res = await GM.xmlHttpRequest({method:'GET',url:url});
  430.         //         debugger;
  431.         //     } catch (err) { debugger; return reject(err); }
  432.         // }
  433.  
  434.         const res = await GM.xmlHttpRequest({
  435.             method: 'GET',
  436.             url: url,
  437.             headers: {
  438.                 'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7',
  439.                 'Accept-Language': 'en-US,en;q=0.9',
  440.                 'Accept-Encoding': 'gzip, deflate, br, zstd',
  441.                 'DNT': `${window.navigator.doNotTrack || '1'}`,
  442.  
  443.                 'Referer':  document.location.href || url,
  444.                 'Origin': document.location.origin || url,
  445.  
  446.                 'Host': window.location.host || window.location.hostname,
  447.                 'User-Agent': window.navigator.userAgent,
  448.                 'Priority': 'u=0, i',
  449.                 'Upgrade-Insecure-Requests': '1',
  450.                 'Connection': 'keep-alive',
  451.                 //'Cache-Control': 'no-cache',
  452.                 'Cache-Control': 'max-age=0',
  453.  
  454.                 'Sec-Fetch-Dest': 'document',
  455.                 'Sec-Fetch-Mode': 'navigate',
  456.                 'Sec-Fetch-User': '?1',
  457.                 'Sec-GPC': '1',
  458.             },
  459.             responseType: 'blob',
  460.             cookiePartition: {
  461.                 topLevelSite: inheritHttpOnlyCookies ? location.origin : null
  462.             }
  463.         })
  464.         .catch((error) => { debugger; return reject(error); });
  465.  
  466.         const allowedImageTypes = ['webp','png','jpg','jpeg','gif','bmp','webm'];
  467.         const HTTP_OK_CODE = 200;
  468.         const ok =
  469.                 res.readyState == res['DONE'] &&
  470.                 res.status === HTTP_OK_CODE &&
  471.                 //res.response && ['webp','image'].some(t => res.response.type.includes(t))
  472.                 res.response && (res.response.type.startsWith('image/') && allowedImageTypes.includes(res.response.type.split('/')[1].toLowerCase()));
  473.  
  474.         if (!ok) {
  475.             debugger;
  476.             return reject(error);
  477.         }
  478.  
  479.         return resolve({
  480.             blob: res.response,
  481.             filetype: res.response.type.split('/')[1],
  482.         });
  483.     });
  484. };
  485. const SaveBlob = async (blob, fileName) => {
  486.     const MakeAndClickATagAsync = async (blobUrl, fileName) => {
  487.         try {
  488.             let link;
  489.             
  490.             // Reuse existing element for sequential downloads
  491.             if (!window._downloadLink) {
  492.                 window._downloadLink = document.createElement('a');
  493.                 window._downloadLink.style.cssText = 'display: none !important;';
  494.                 try {
  495.                     document.body.appendChild(window._downloadLink);
  496.                 } catch (err) {
  497.                     // Handle Trusted Types policy
  498.                     if (window.trustedTypes && window.trustedTypes.createPolicy) {
  499.                         const policy = window.trustedTypes.createPolicy('default', {
  500.                             createHTML: (string) => string
  501.                         });
  502.                     }
  503.                     document.body.appendChild(window._downloadLink);
  504.                 }
  505.             }
  506.             link = window._downloadLink;
  507.     
  508.             // Set attributes and trigger download
  509.             link.href = blobUrl;
  510.             link.download = fileName;
  511.             await Promise.resolve(link.click());
  512.     
  513.             return true;
  514.         } catch (error) {
  515.             console.error('Download failed:', error);
  516.             await Promise.reject([false, error]);
  517.         }
  518.     };
  519.  
  520.     const blobUrl = window.URL.createObjectURL(blob)
  521.  
  522.     await MakeAndClickATagAsync(blobUrl, fileName)
  523.     .catch(([state, errorMessage]) => { window.URL.revokeObjectURL(blobUrl); console.error(errorMessage); debugger; return reject([false, errorMessage, res]); });
  524.     window.URL.revokeObjectURL(blobUrl);
  525. };
  526.  
  527. const cancelSignal = {cancelled:false};
  528. async function Download(urls) {
  529.     if (urls.length === 0) return;
  530.     if (typeof urls === 'string') urls = [urls];
  531.     cancelSignal.cancelled = false;
  532.  
  533.     const progressbar = document.createElement('div');
  534.     progressbar.style.cssText = `position:fixed;z-index:9999;bottom:0px;right:0px;width:100%;max-height:30px;background-color:white;`;
  535.     progressbar.innerHTML = `
  536.         <span class="text" style="color:black;padding-right:5px;"></span>
  537.         <button class="cancel">Stop</button
  538.     `;
  539.     document.body.appendChild(progressbar);
  540.  
  541.     const text = progressbar.querySelector('.text');
  542.     const btn = progressbar.querySelector('.cancel');
  543.  
  544.     btn.onclick = () => { cancelSignal.cancelled = true; text.textContent = 'Aborting download, please wait ...'; };
  545.  
  546.     const opts = Array.from(document.querySelector('.checkbox-group').querySelectorAll('input[type="checkbox"]'));
  547.     const optHttpOnlyCookies = opts.find(_ => _.parentElement.textContent.includes("Inherit HTTP Only Cookies"))?.checked ?? true;
  548.     const optHumanize = opts.find(_ => _.parentElement.textContent.includes('Humanize'))?.checked ?? true;
  549.     const optPreserveOriginalFilename = opts.find(_ => _.parentElement.textContent.includes('Preserve Original Filename'))?.checked ?? false;
  550.  
  551.     for (let i = 0; i < urls.length; i++) {
  552.         if (cancelSignal.cancelled) break;
  553.  
  554.         const url = urls[i];
  555.         text.textContent = `Downloading ${url} ... (${i+1}/${urls.length})`;
  556.  
  557.         try {
  558.             const {blob, filetype} = await GetBlob(url, optHttpOnlyCookies);
  559.             const filename = optPreserveOriginalFilename ? url.split('/').pop() : `${i}.${filetype}`;
  560.             await SaveBlob(blob, filename);
  561.         } catch (err) {
  562.             console.error('Something went wrong downloading from url ', url);
  563.             console.error(err);
  564.         }
  565.  
  566.         if (optHumanize) await SleepRange(650, 850);
  567.     }
  568.  
  569.     progressbar.remove();
  570. }
  571.  
  572. const defaultSelector = GM_getValue(document.location.host, undefined);
  573. if (typeof defaultSelector === 'undefined') {
  574.     GM_registerMenuCommand('Show GUI', () => {
  575.         RenderGui();
  576.     });
  577.     GM_registerMenuCommand(`Always show GUI for ${location.host}`, () => {
  578.         GM_setValue(location.host, true);
  579.         RenderGui();
  580.     });
  581.     // GM_registerMenuCommand(`Always show GUI for ${location.host} and save current selector`, () => {
  582.     //     const selector = document.querySelector('.input-text')?.value ?? true;
  583.     //     GM_setValue(selector);
  584.     //     RenderGui();
  585.     // });
  586. }
  587. else {
  588.     RenderGui(typeof defaultSelector === 'string' ? defaultSelector : '');
  589.     GM_registerMenuCommand(`Dont show GUI for ${location.host}`, () => {
  590.         GM_deleteValue(location.host);
  591.         // TODO: Remove the GUI
  592.     });
  593. }