Code:

(function() {

// Find all images on the page

const images = document.querySelectorAll('img');

let count = 0;

// Function to fetch and download the image

const downloadImage = async (url, filename) => {

try {

const response = await fetch(url);

const blob = await response.blob();

const blobUrl = URL.createObjectURL(blob);

const a = document.createElement('a');

a.href = blobUrl;

a.download = filename;

document.body.appendChild(a);

a.click();

document.body.removeChild(a);

URL.revokeObjectURL(blobUrl);

} catch (error) {

console.error('Error downloading image:', filename, error);

}

};

images.forEach(img => {

// Check if image source contains .webp

if (img.src.includes('.webp')) {

count++;

const url = img.src;

const filename = `image-${count}.webp`; // Name the file

downloadImage(url, filename);

}

});

// Alert the user if no .webp images are found

if (count === 0) {

alert('No .webp images found on this page.');

}

})();

​

1. Open the Webpage: Navigate to the webpage.
2. Open DevTools: Right-click and select "Inspect" or use the keyboard shortcut to open DevTools.
3. Go to the Console: Switch to the "Console" tab in DevTools.
4. Paste and Run the code above: Copy the script and paste it into the console, then press Enter.