☰

Export Shopify Fullsize File URLs

Export all fullsize file URLs from Shopify to clipboard and log them in console (bulk export with pagination)

  1. // ==UserScript==
  2. // @name         Export Shopify Fullsize File URLs
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.8
  5. // @description  Export all fullsize file URLs from Shopify to clipboard and log them in console (bulk export with pagination)
  6. // @author       sharmanhall
  7. // @match        https://admin.shopify.com/store/*/content/files?limit=*&selectedView=all
  8. // @match        https://admin.shopify.com/store/*/content/files*
  9. // @grant        GM_setClipboard
  10. // @grant        GM_log
  11. // @run-at       document-end
  12. // @license      MIT
  13. // @icon         https://www.google.com/s2/favicons?sz=64&domain=shopify.com
  14. // @compatible   chrome
  15. // @compatible   edge
  16. // @compatible   firefox
  17. // @compatible   safari
  18. // @compatible   brave
  19. // ==/UserScript==
  20.  
  21. (function() {
  22.     'use strict';
  23.  
  24.     let accumulatedUrls = [];
  25.     let consoleMessages = [];
  26.  
  27.     // Function to extract file URLs
  28.     function extractFileUrls() {
  29.         const fileElements = document.querySelectorAll('td._ThumbnailCell_b1ynd_1.Polaris-IndexTable__TableCell div > div > button > span img');
  30.         const fileUrls = Array.from(fileElements).map(el => el.src.replace('_60x60', ''));
  31.         console.log('Fullsize File URLs:', fileUrls);
  32.         GM_setClipboard(fileUrls.join('\n'));
  33.         GM_log('Fullsize file URLs copied to clipboard.');
  34.         showNotification(`${fileUrls.length} links copied to clipboard.`);
  35.         logToExpandableConsole(`Fullsize File URLs: ${fileUrls.join(', ')}`);
  36.     }
  37.  
  38.     // Function to accumulate file URLs and copy to clipboard
  39.     function accumulateFileUrls() {
  40.         const fileElements = document.querySelectorAll('td._ThumbnailCell_b1ynd_1.Polaris-IndexTable__TableCell div > div > button > span img');
  41.         const fileUrls = Array.from(fileElements).map(el => el.src.replace('_60x60', ''));
  42.         accumulatedUrls = accumulatedUrls.concat(fileUrls);
  43.         console.log('Accumulated Fullsize File URLs:', accumulatedUrls);
  44.         GM_setClipboard(accumulatedUrls.join('\n'));
  45.         GM_log('Accumulated fullsize file URLs copied to clipboard.');
  46.         showNotification(`${accumulatedUrls.length} total links accumulated and copied to clipboard.`);
  47.         logToExpandableConsole(`Accumulated Fullsize File URLs: ${accumulatedUrls.join(', ')}`);
  48.     }
  49.  
  50.     // Function to create a floating button for extracting URLs
  51.     function createFloatingButton() {
  52.         const button = document.createElement('button');
  53.         button.innerText = 'Export File URLs';
  54.         button.style.position = 'fixed';
  55.         button.style.bottom = '10px';
  56.         button.style.right = '10px';
  57.         button.style.zIndex = '1000';
  58.         button.style.padding = '10px';
  59.         button.style.backgroundColor = '#008CBA';
  60.         button.style.color = 'white';
  61.         button.style.border = 'none';
  62.         button.style.borderRadius = '5px';
  63.         button.style.cursor = 'pointer';
  64.         button.addEventListener('click', extractFileUrls);
  65.         document.body.appendChild(button);
  66.     }
  67.  
  68.     // Function to create a floating button for accumulating URLs
  69.     function createAccumulateButton() {
  70.         const button = document.createElement('button');
  71.         button.innerText = 'Accumulate URLs';
  72.         button.style.position = 'fixed';
  73.         button.style.bottom = '10px';
  74.         button.style.right = '150px';
  75.         button.style.zIndex = '1000';
  76.         button.style.padding = '10px';
  77.         button.style.backgroundColor = '#FFA500';
  78.         button.style.color = 'white';
  79.         button.style.border = 'none';
  80.         button.style.borderRadius = '5px';
  81.         button.style.cursor = 'pointer';
  82.         button.addEventListener('click', accumulateFileUrls);
  83.         document.body.appendChild(button);
  84.     }
  85.  
  86.     // Function to create a floating input area for changing the limit parameter
  87.     function createLimitInput() {
  88.         const container = document.createElement('div');
  89.         container.style.position = 'fixed';
  90.         container.style.bottom = '50px';
  91.         container.style.right = '10px';
  92.         container.style.zIndex = '1000';
  93.         container.style.padding = '10px';
  94.         container.style.backgroundColor = '#fff';
  95.         container.style.border = '1px solid #ccc';
  96.         container.style.borderRadius = '5px';
  97.  
  98.         const label = document.createElement('label');
  99.         label.innerText = 'Set Limit: ';
  100.         label.style.marginRight = '5px';
  101.  
  102.         const input = document.createElement('input');
  103.         input.type = 'number';
  104.         input.value = 10;
  105.         input.style.marginRight = '5px';
  106.         input.style.width = '50px';
  107.  
  108.         const setButton = document.createElement('button');
  109.         setButton.innerText = 'Set';
  110.         setButton.style.padding = '5px';
  111.         setButton.style.backgroundColor = '#008CBA';
  112.         setButton.style.color = 'white';
  113.         setButton.style.border = 'none';
  114.         setButton.style.borderRadius = '5px';
  115.         setButton.style.cursor = 'pointer';
  116.  
  117.         setButton.addEventListener('click', () => {
  118.             const limit = input.value;
  119.             const currentUrl = new URL(window.location.href);
  120.             currentUrl.searchParams.set('limit', limit);
  121.             window.location.href = currentUrl.toString();
  122.         });
  123.  
  124.         container.appendChild(label);
  125.         container.appendChild(input);
  126.         container.appendChild(setButton);
  127.  
  128.         document.body.appendChild(container);
  129.     }
  130.  
  131.     // Function to create quick change buttons
  132.     function createQuickChangeButtons() {
  133.         const limits = [10, 50, 100, 200, 250];
  134.         const container = document.createElement('div');
  135.         container.style.position = 'fixed';
  136.         container.style.bottom = '110px';
  137.         container.style.right = '10px';
  138.         container.style.zIndex = '1000';
  139.         container.style.padding = '10px';
  140.         container.style.backgroundColor = '#fff';
  141.         container.style.border = '1px solid #ccc';
  142.         container.style.borderRadius = '5px';
  143.         container.style.display = 'flex';
  144.         container.style.flexDirection = 'column';
  145.         container.style.gap = '5px';
  146.  
  147.         limits.forEach(limit => {
  148.             const button = document.createElement('button');
  149.             button.innerText = `Set Limit ${limit}`;
  150.             button.style.padding = '5px';
  151.             button.style.backgroundColor = '#008CBA';
  152.             button.style.color = 'white';
  153.             button.style.border = 'none';
  154.             button.style.borderRadius = '5px';
  155.             button.style.cursor = 'pointer';
  156.  
  157.             button.addEventListener('click', () => {
  158.                 const currentUrl = new URL(window.location.href);
  159.                 currentUrl.searchParams.set('limit', limit);
  160.                 window.location.href = currentUrl.toString();
  161.                 showNotification(`Limit set to ${limit}.`);
  162.                 logToExpandableConsole(`Limit set to ${limit}`);
  163.             });
  164.  
  165.             container.appendChild(button);
  166.         });
  167.  
  168.         document.body.appendChild(container);
  169.     }
  170.  
  171.     // Function to show notification
  172.     function showNotification(message) {
  173.         const notification = document.createElement('div');
  174.         notification.innerText = message;
  175.         notification.style.position = 'fixed';
  176.         notification.style.bottom = '20px';
  177.         notification.style.left = '50%';
  178.         notification.style.transform = 'translateX(-50%)';
  179.         notification.style.zIndex = '1000';
  180.         notification.style.padding = '10px';
  181.         notification.style.backgroundColor = '#333';
  182.         notification.style.color = 'white';
  183.         notification.style.borderRadius = '5px';
  184.         notification.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.5)';
  185.         notification.style.transition = 'opacity 0.5s';
  186.         notification.style.opacity = '1';
  187.         document.body.appendChild(notification);
  188.  
  189.         setTimeout(() => {
  190.             notification.style.opacity = '0';
  191.             setTimeout(() => {
  192.                 notification.remove();
  193.             }, 500);
  194.         }, 3000);
  195.     }
  196.  
  197.     // Function to create an expandable console log area
  198.     function createExpandableConsole() {
  199.         const container = document.createElement('div');
  200.         container.style.position = 'fixed';
  201.         container.style.bottom = '10px';
  202.         container.style.left = '10px';
  203.         container.style.zIndex = '1000';
  204.         container.style.width = '300px';
  205.         container.style.maxHeight = '200px';
  206.         container.style.overflowY = 'auto';
  207.         container.style.backgroundColor = '#fff';
  208.         container.style.border = '1px solid #ccc';
  209.         container.style.borderRadius = '5px';
  210.         container.style.padding = '10px';
  211.         container.style.display = 'none';
  212.  
  213.         const toggleButton = document.createElement('button');
  214.         toggleButton.innerText = 'Show Console';
  215.         toggleButton.style.position = 'fixed';
  216.         toggleButton.style.bottom = '10px';
  217.         toggleButton.style.left = '320px';
  218.         toggleButton.style.zIndex = '1001';
  219.         toggleButton.style.padding = '10px';
  220.         toggleButton.style.backgroundColor = '#008CBA';
  221.         toggleButton.style.color = 'white';
  222.         toggleButton.style.border = 'none';
  223.         toggleButton.style.borderRadius = '5px';
  224.         toggleButton.style.cursor = 'pointer';
  225.  
  226.         toggleButton.addEventListener('click', () => {
  227.             container.style.display = container.style.display === 'none' ? 'block' : 'none';
  228.             toggleButton.innerText = container.style.display === 'none' ? 'Show Console' : 'Hide Console';
  229.         });
  230.  
  231.         document.body.appendChild(toggleButton);
  232.         document.body.appendChild(container);
  233.  
  234.         return container;
  235.     }
  236.  
  237.     // Function to log messages to the expandable console
  238.     function logToExpandableConsole(message) {
  239.         consoleMessages.push(message);
  240.         const consoleContainer = document.querySelector('.expandable-console');
  241.         if (consoleContainer) {
  242.             consoleContainer.innerHTML = consoleMessages.join('<br>');
  243.         }
  244.     }
  245.  
  246.     // Wait for the page to fully load
  247.     window.addEventListener('load', () => {
  248.         createFloatingButton();
  249.         createAccumulateButton();
  250.         createLimitInput();
  251.         createQuickChangeButtons();
  252.         const expandableConsole = createExpandableConsole();
  253.         expandableConsole.classList.add('expandable-console');
  254.     });
  255.  
  256. })();