☰

Greasy Fork is available in English.

下载天猫主图和详情图

在天猫详情页添加浮动按钮，一键下载天猫的主图和详情页。

// ==UserScript==
// @name         下载天猫主图和详情图
// @namespace    http://your-namespace.com
// @version      1.3
// @description  在天猫详情页添加浮动按钮，一键下载天猫的主图和详情页。
// @author       Kailous
// @match        https://detail.tmall.com/*
// @match        https://*.detail.tmall.com/*
// @grant        GM_download
// @license MIT
// ==/UserScript==

(function() {
    'use strict';

    // 创建下载按钮容器
    const downloadButtonContainer = document.createElement('div');
    downloadButtonContainer.className = 'downloadImgButton';
    document.body.appendChild(downloadButtonContainer);

    // 创建下载按钮
    function createDownloadButtons() {
        // 创建下载主图按钮
        const thumbnailButton = document.createElement('button');
        thumbnailButton.innerHTML = `
            <svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M44 24C44 22.8954 43.1046 22 42 22C40.8954 22 40 22.8954 40 24H44ZM24 8C25.1046 8 26 7.10457 26 6C26 4.89543 25.1046 4 24 4V8ZM39 40H9V44H39V40ZM8 39V9H4V39H8ZM40 24V39H44V24H40ZM9 8H24V4H9V8ZM9 40C8.44772 40 8 39.5523 8 39H4C4 41.7614 6.23857 44 9 44V40ZM39 44C41.7614 44 44 41.7614 44 39H40C40 39.5523 39.5523 40 39 40V44ZM8 9C8 8.44772 8.44771 8 9 8V4C6.23858 4 4 6.23857 4 9H8Z" fill="#333"/><path d="M6 35L16.6931 25.198C17.4389 24.5143 18.5779 24.4953 19.3461 25.1538L32 36" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M28 31L32.7735 26.2265C33.4772 25.5228 34.5914 25.4436 35.3877 26.0408L42 31" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M32 13L37 18L42 13" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M37 6L37 18" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
            下载主图`;
        thumbnailButton.addEventListener('click', () => {
            downloadThumbnails();
        });
        downloadButtonContainer.appendChild(thumbnailButton);

        // 创建下载详情页图片按钮
        const detailButton = document.createElement('button');
        detailButton.innerHTML = `
            <svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M27 40H7C5.34315 40 4 38.6569 4 37V11C4 9.34315 5.34315 8 7 8H41C42.6569 8 44 9.34315 44 11V24" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M34 36L39 41L44 36" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M39 29L39 41" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 11C4 9.34315 5.34315 8 7 8H41C42.6569 8 44 9.34315 44 11V20H4V11Z" fill="none" stroke="#333" stroke-width="4"/><circle r="2" transform="matrix(-1.31134e-07 -1 -1 1.31134e-07 10 14)" fill="#333"/><circle r="2" transform="matrix(-1.31134e-07 -1 -1 1.31134e-07 16 14)" fill="#333"/></svg>
            下载详情`;
        detailButton.addEventListener('click', () => {
            downloadImages();
        });
        downloadButtonContainer.appendChild(detailButton);
    }

    // 获取商品主标题
    function getMainTitle() {
        const mainTitleElement = document.querySelector('h1[class^="ItemHeader--mainTitle"]');
        if (mainTitleElement) {
            return mainTitleElement.innerText;
        }
        return '';
    }

    // 下载主图函数
function downloadThumbnails() {
    const mainTitle = getMainTitle();
    const thumbnailsContainer = document.querySelector('ul[class^="PicGallery--thumbnails"]'); // 选择主图缩略图容器
    if (!thumbnailsContainer) {
        console.log('Thumbnails container not found.');
        return;
    }

    const thumbnails = thumbnailsContainer.querySelectorAll('img'); // 选择缩略图图片

    let imageCount = 0;

    thumbnails.forEach((thumbnail, index) => {
        const imageUrl = thumbnail.getAttribute('src');

        // 过滤掉图片链接中的 "_110x10000Q75.jpg_.webp"
        const filteredImageUrl = imageUrl.replace(/_\w*\.jpg_\w*\.webp/g, '');

        // 只下载以 '//gw.alicdn.com' 开头的图片
        if (filteredImageUrl && filteredImageUrl.startsWith('//gw.alicdn.com')) {
            imageCount++;
            const fileExtension = imageUrl.split('.').pop();
            const paddedIndex = String(imageCount).padStart(2, '0');
            const fileName = `${mainTitle}_主图_${paddedIndex}.${fileExtension}`;

            // 使用 GM_download 下载图片
            GM_download({
                url: 'https:' + filteredImageUrl,
                name: fileName,
                saveAs: true
            });
        }
    });

    if (imageCount === 0) {
        console.log('No images found for download.');
    }
}


    // 下载详情页图片函数
    function downloadImages() {
        const mainTitle = getMainTitle();

        const descRoot = document.querySelector('div.desc-root'); // 选择详情页图片容器
        if (!descRoot) return;

        const images = descRoot.querySelectorAll('img[data-src], img[src]'); // 选择带有 data-src 或 src 属性的图片

        images.forEach((image, index) => {
            let imageUrl = image.getAttribute('data-src');
            if (!imageUrl) {
                imageUrl = image.getAttribute('src');
            }

            // 只下载以 'https://img.alicdn.com' 开头的图片
            if (imageUrl && imageUrl.startsWith('https://img.alicdn.com')) {
                const fileExtension = imageUrl.substring(imageUrl.lastIndexOf('.') + 1);
                const paddedIndex = String(index).padStart(2, '0');
                const fileName = `${mainTitle}_${paddedIndex}.${fileExtension}`;

                // 使用 GM_download 下载图片
                GM_download({
                    url: imageUrl,
                    name: fileName,
                    saveAs: true
                });
            }
        });
    }

    // 调用函数创建下载按钮
    createDownloadButtons();
})();

// 添加样式
const style = document.createElement('style');
style.textContent = `
.downloadImgButton {
    position: fixed;
    bottom: 50%;
    left: 0;
    z-index: 9999;
    padding: 26px 0;
    display: flex;
    flex-direction: column;
    border-radius: 0 18px 18px 0;
    overflow: hidden;
        -webkit-transform: translateY(50%);
    -moz-transform: translateY(50%);
    -ms-transform: translateY(50%);
    -o-transform: translateY(50%);
    transform: translateY(50%);
    z-index: 999;
    background-color: #F7F9FA;
    -webkit-box-shadow: -2px 0 30px 2px rgba(97, 105, 119, 0.18);
    -moz-box-shadow: -2px 0 30px 2px rgba(97, 105, 119, 0.18);
    box-shadow: -2px 0 30px 2px rgba(97, 105, 119, 0.18);
}

.downloadImgButton button {
    border: none;
    background: none;
    width: 60px;
    height: 60px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #333;
    text-decoration: none;
    justify-content: center;
}
.downloadImgButton button:hover {
    background-color: #fff;
}
`;
document.head.appendChild(style);