Tampermonkey油猴 跨域请求下载图片示例

本文主要是介绍Tampermonkey油猴 跨域请求下载图片示例，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言

需要用油猴采集并下载一个网站的图片，直接下下不了，搜了一下，是禁止跨域，使用CORS Unblock也不行，所以使用油猴自带的GM_xmlhttpRequest发送跨域请求。

项目

目标网站

代码编写

代码仅作为学习使用，禁止商用。

// ==UserScript==
// @name         ***** Image Downloader and Zipper with GM_xmlhttpRequest
// @namespace    http://tampermonkey.net/
// @version      1.7
// @description  Download all matching product images as a zip file from the **** product page using GM_xmlhttpRequest (For learning purposes only)
// @author       slowfeather@163.com
// @match        
// @icon         
// @grant        GM_xmlhttpRequest
// @grant        GM_download
// @require      https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js
// @require      https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js
// ==/UserScript==(function() {'use strict';// List to store image URLslet imageUrls = new Set();// Function to periodically collect image URLsfunction collectImageUrls() {const imageElements = document.querySelectorAll('img');const regex1 = /*****\.com\/package-screenshot\/.+?_scaled\.jpg$/;const regex2 = /*****\.****\.com\/key-image\/.+?\.jpg$/;imageElements.forEach((img) => {const url = img.src;if ((regex1.test(url) || regex2.test(url)) && !imageUrls.has(url)) {imageUrls.add(url);showNotification('捕获了一张图片地址 :'+url);}});}// Function to show notificationfunction showNotification(message) {const notification = document.createElement('div');notification.innerText = message;notification.style.position = 'fixed';notification.style.top = '50px';notification.style.right = '10px';notification.style.zIndex = 1000;notification.style.backgroundColor = 'lightgreen';notification.style.padding = '5px';notification.style.border = '1px solid green';notification.style.borderRadius = '5px';document.body.appendChild(notification);setTimeout(() => {document.body.removeChild(notification);}, 1000);}// Set an interval to collect image URLs every secondsetInterval(collectImageUrls, 300);// Function to download all images in the list and zip themasync function downloadAndZipImages() {const zip = new JSZip();let count = 0;const fetchImage = (url, filename) => {return new Promise((resolve, reject) => {GM_xmlhttpRequest({method: 'GET',url: url,responseType: 'blob',onload: function(response) {if (response.status === 200) {zip.file(filename, response.response);count++;resolve();} else {reject(`HTTP error! status: ${response.status}`);}},onerror: function(error) {reject(`Failed to fetch image ${url}: ${error}`);}});});};const fetchPromises = Array.from(imageUrls).map((url, index) => {const filename = `image_${index + 1}.jpg`;return fetchImage(url, filename);});try {await Promise.all(fetchPromises);if (count > 0) {const content = await zip.generateAsync({ type: "blob" });saveAs(content, "images.zip");} else {alert("No matching images found.");}} catch (error) {console.error(error);}}// Wait for the page to fully loadwindow.addEventListener('load', () => {// Create a button to trigger the downloadconst button = document.createElement('button');button.innerText = 'Download All Images as Zip';button.style.position = 'fixed';button.style.top = '10px';button.style.right = '10px';button.style.zIndex = 1000;button.addEventListener('click', downloadAndZipImages);document.body.appendChild(button);});
})();

运行效果

这篇关于Tampermonkey油猴 跨域请求下载图片示例的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---