This page provides two JavaScript snippets designed to be run in your web browser's developer console. Each script is tailored to extract and clean image links from a specific type of webpage, and then copies the resulting links to your clipboard for easy use.
How It Works
The scripts differ in how they target the images on a webpage:
Script 1: For Product Thumbnails
- Finds Images by Class: This script searches for all images on the page that have specific, hard-coded CSS class attributes (e.g., `pdp-mod-common-image`).
- Cleans a Specific Substring: It then looks for a fixed part of the image URL, like `_120x120q80.jpg_.webp`, and removes it to give you a link to the main, higher-quality image.
- Logs and Copies: All the cleaned links are logged to the console and automatically copied to your clipboard.
Script 2: For Product Details
- Finds Images by Container: This more dynamic script first locates a specific section of the webpage using the CSS ID `#module_product_detail` to focus on the product image gallery.
- Uses a Dynamic Regex: It then uses a regular expression to intelligently remove the size and quality parameters (e.g., `_2200x2200q80.jpg_.webp`) from the URL. This makes it adaptable to different image sizes and file extensions like `.jpg` or `.png`.
- Logs and Copies: All the cleaned links are logged to the console and automatically copied to your clipboard.
How to Use
- Navigate to the Webpage: Open the webpage from which you want to extract image links in your browser.
-
Open Developer Tools:
- Chrome/Firefox/Edge: Right-click anywhere and select "Inspect," then go to the "Console" tab.
- Safari: Enable the Develop menu (`Preferences > Advanced`), then select `Develop > Show JavaScript Console`.
- Copy & Paste the Code: Go to "The Code" tab, select the script you need, copy it using the "Copy Code" button, and paste it into the console's input area.
- Run the Script: Press `Enter`. The script will execute, showing logs in the console.
- Download Images: Open IDM. Click "Task" on the top left corner. Select "Add batch download from clipboard". Click "Check all". Select "Main Download Queue" and click "Ok". Lastly click on "Start the queue" button and all images will be downloded.
Note on Functionality
This script focuses on extracting and copying image links. It does not automatically download images due to browser security limitations that require user interaction for each download.
Below are two versions of the image extractor script, each tailored for a different page structure. Select the one that matches the page you are on.
Script 1: For Product Thumbnails
// This script targets image elements on the currently loaded webpage with specific class attributes.
// Select all img tags with specific classes for product thumbnails.
const imgElements = document.querySelectorAll('img.pdp-mod-common-image.item-gallery__thumbnail-image');
const cleanedSrcLinks = [];
// Iterate over each img element to extract and clean its src attribute.
imgElements.forEach(img => {
let src = img.getAttribute('src');
if (src) {
// Define a regular expression to match the dynamic substring.
// This pattern looks for "_xq._.webp"
// The (?:...) creates a non-capturing group for the file extension.
// It matches .jpg, .jpeg, .png, .gif, .bmp, .svg, .webp (and others if needed)
const substringPattern = /_\d+x\d+q\d+\.(?:jpg|jpeg|png|gif|bmp|svg|webp)_.webp/i;
// Replace the matched pattern if it exists to get the main image link.
if (substringPattern.test(src)) {
src = src.replace(substringPattern, "");
}
cleanedSrcLinks.push(src);
}
});
// Log the cleaned links to the console for verification.
console.log("Cleaned Image Source Links from Current Page:");
if (cleanedSrcLinks.length > 0) {
cleanedSrcLinks.forEach(link => console.log(link));
// --- Feature: Copy links to clipboard ---
const linksToCopy = cleanedSrcLinks.join('\n');
const tempTextArea = document.createElement('textarea');
tempTextArea.value = linksToCopy;
tempTextArea.style.position = 'fixed';
tempTextArea.style.left = '-9999px';
document.body.appendChild(tempTextArea);
tempTextArea.focus();
tempTextArea.select();
try {
const successful = document.execCommand('copy');
const msg = successful ? 'successfully' : 'unsuccessfully';
console.log(`Links copied to clipboard ${msg}!`);
} catch (err) {
console.error('Oops, unable to copy links to clipboard:', err);
console.log('You can manually copy the links from the console output above.');
} finally {
document.body.removeChild(tempTextArea);
}
} else {
console.log("No matching image links found with the specified pattern.");
}
Script 2: For Product Detail Image
// Dynamically targets detailed images and cleans URLs.
const selector = '#module_product_detail';
const container = document.querySelector(selector);
if (container) {
const imgElements = container.querySelectorAll('img');
const cleanedSrcLinks = [];
const regexToRemove = /_\d+x\d+q\d+\.(jpg|png)_\.webp/g;
imgElements.forEach(img => {
let src = img.getAttribute('src');
if (src) {
const cleanedSrc = src.replace(regexToRemove, "");
cleanedSrcLinks.push(cleanedSrc);
}
});
console.log("Cleaned Image Links:");
if (cleanedSrcLinks.length > 0) {
cleanedSrcLinks.forEach(link => console.log(link));
const linksToCopy = cleanedSrcLinks.join('\n');
const tempTextArea = document.createElement('textarea');
tempTextArea.value = linksToCopy;
tempTextArea.style.position = 'fixed';
tempTextArea.style.left = '-9999px';
document.body.appendChild(tempTextArea);
tempTextArea.select();
document.execCommand('copy');
document.body.removeChild(tempTextArea);
console.log("Links copied to clipboard!");
} else {
console.log("No matching images found.");
}
} else {
console.log("Container not found:", selector);
}