☰

图片下载器 (修复版)

支持进度显示和选择序号的图片批量下载工具（修复 zip 损坏问题）

// ==UserScript==
// @name         图片下载器 (修复版)
// @namespace    http://tampermonkey.net/
// @version      3.3
// @description  支持进度显示和选择序号的图片批量下载工具（修复 zip 损坏问题）
// @author       陈粥子
// @license      MIT
// @match        *://*/*
// @grant        GM_xmlhttpRequest
// @grant        GM_addStyle
// @grant        GM_download
// @connect      *
// @run-at       document-end
// @require      https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js
/*　　　　　　　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　■■　　　　　　　　　■　　
　■■■■■■■■　　　■■　　　　■■■■■■■　
　　　　　　■■　　　　■■　　　　　　　　　■■　
　　　　　　■■　■　　■■　　■■　　　　　■■　
　　　　　　■■　■■　■■　　■　　　　　　■■　
　　　　　　■■　　■　■■　■■　　　　　　■■　
　　　　　　■■　　■　■■　■　　　　　　　■■　
　　■■■■■■　　■　■■　■　　　■■■■■■　
　　■■　　■■　　　　■■　　　　■■　　　■　　
　　■■　　　　　　　　■■　　■　■■　　　　　　
　　■■　　　　　■■■■■■■■■■■　　　　　　
　　■　　　　　　　　　■■　　　　■■　　　　　　
　■■　　　■■　　　■■■　　　　■■　　　■■　
　■■■■■■■■　　■■■■　　　■■■■■■■　
　　　　　　■■　　　■■■　■■　　　　　　■■　
　　　　　　■■　　■■■■　■■　　　　　　■■　
　　　　　　■■　　■　■■　　■■　　　　　■■　
　　　　　　■■　　■　■■　　■　　　　　　■　　
　　　　　　■■　■　　■■　　　　　　　　　■　　
　　　　　　■■■　　　■■　　　　　　　　■■　　
　　　　　　■■　　　　■■　　　　　　　　■■　　
　　　　　■■　　　　　■■　　　　　　　　■■　　
　　■■■■■　　　　　■■　　　　　■■■■　　　
　　　　■■　　　　　　　■　　　　　　■■　　　　
*/
// ==/UserScript==

(function() {
    'use strict';

    // 全局变量
    let imageUrls = new Set();
    let selectedItems = [];
    const isMobile = window.innerWidth <= 768;

    /* -------------------- UI 创建 & 样式（与之前相同） -------------------- */
    function createUI() {
        const downloadBtn = document.createElement('div');
        downloadBtn.id = 'img-dl-btn';
        downloadBtn.innerHTML = '↓';
        downloadBtn.style.cssText = `
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 2147483647;
            width: ${isMobile ? '40px' : '50px'};
            height: ${isMobile ? '40px' : '50px'};
            background: #2196F3;
            color: white;
            font-size: ${isMobile ? '20px' : '24px'};
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            box-shadow: 0 2px 10px rgba(0,0,0,0.3);
            cursor: pointer;
            user-select: none;
        `;

        const modal = document.createElement('div');
        modal.id = 'img-dl-modal';
        modal.innerHTML = `
            <div class="modal-header">
                <span>图片预览</span>
                <span class="close-btn">×</span>
            </div>
            <div class="image-grid"></div>
            <div class="modal-footer">
                <button class="select-btn">全选</button>
                <span class="count">0张</span>
                <button class="download-btn" disabled>下载</button>
            </div>
        `;
        modal.style.cssText = `
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2147483646;
            width: ${isMobile ? '95vw' : '80vw'};
            height: ${isMobile ? '85vh' : '75vh'};
            background: white;
            border-radius: ${isMobile ? '8px' : '12px'};
            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
            flex-direction: column;
            overflow: hidden;
        `;

        const progressModal = document.createElement('div');
        progressModal.id = 'progress-modal';
        progressModal.innerHTML = `
            <div class="progress-header">
                <span>下载进度</span>
            </div>
            <div class="progress-container">
                <div class="progress-bar">
                    <div class="progress-fill"></div>
                </div>
                <div class="progress-text">准备开始下载...</div>
                <div class="progress-stats">
                    <span class="success-count">成功: 0</span>
                    <span class="fail-count">失败: 0</span>
                </div>
            </div>
            <div class="progress-footer">
                <button class="cancel-btn">取消</button>
            </div>
        `;
        progressModal.style.cssText = `
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2147483646;
            width: ${isMobile ? '80vw' : '400px'};
            background: white;
            border-radius: ${isMobile ? '8px' : '12px'};
            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
            flex-direction: column;
            overflow: hidden;
        `;

        const overlay = document.createElement('div');
        overlay.id = 'img-dl-overlay';
        overlay.style.cssText = `
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.6);
            z-index: 2147483645;
        `;

        document.body.appendChild(downloadBtn);
        document.body.appendChild(modal);
        document.body.appendChild(progressModal);
        document.body.appendChild(overlay);
    }

    function addStyles() {
        const css = `
            #img-dl-modal { display:flex; flex-direction: column; }
            #img-dl-modal .modal-header { padding: 12px 16px; border-bottom: 1px solid #eee; display:flex; justify-content:space-between; align-items:center; font-size:${isMobile?'16px':'18px'}; background:#f8f8f8; flex-shrink:0; }
            #img-dl-modal .close-btn { font-size:24px; cursor:pointer; width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:50%; }
            #img-dl-modal .image-grid { flex:1; padding:10px; overflow-y:auto; display:grid; grid-template-columns:repeat(auto-fill, minmax(${isMobile?'100px':'120px'}, 1fr)); grid-auto-rows:min-content; gap:12px; background:#fff; }
            .image-item { position:relative; border:2px solid #eee; border-radius:8px; overflow:hidden; aspect-ratio:1/1; background:#f5f5f5; display:flex; align-items:center; justify-content:center; box-sizing:border-box; }
            .image-item.selected { border-color:#2196F3; box-shadow:0 0 0 2px rgba(33,150,243,0.3); }
            .image-item img { max-width:100%; max-height:100%; object-fit:contain; display:block; background:#fff; padding:4px; box-sizing:border-box; }
            #img-dl-modal .modal-footer { padding:12px 16px; border-top:1px solid #eee; display:flex; justify-content:space-between; align-items:center; background:#f8f8f8; flex-shrink:0; }
            #img-dl-modal button { padding:8px 16px; border:none; border-radius:4px; background:#2196F3; color:white; cursor:pointer; font-size:${isMobile?'14px':'16px'}; display:flex; align-items:center; justify-content:center; }
            #img-dl-modal .refresh-btn { background:#4CAF50; margin-left:8px; }
            #img-dl-modal .download-btn:disabled { background:#ccc; cursor:not-allowed; }
            #progress-modal { display:flex; flex-direction:column; }
            #progress-modal .progress-header { padding:16px; background:#2196F3; color:white; font-size:18px; text-align:center; }
            #progress-modal .progress-container { padding:20px; }
            #progress-modal .progress-bar { height:20px; background:#eee; border-radius:10px; overflow:hidden; margin-bottom:10px; }
            #progress-modal .progress-fill { height:100%; background:#4CAF50; width:0%; transition:width 0.3s; }
            #progress-modal .progress-text { text-align:center; margin-bottom:10px; font-size:14px; color:#555; }
            #progress-modal .progress-stats { display:flex; justify-content:space-around; font-size:14px; color:#555; }
            #progress-modal .progress-footer { padding:16px; display:flex; justify-content:center; border-top:1px solid #eee; }
            #progress-modal .cancel-btn { padding:8px 24px; background:#f44336; color:white; border:none; border-radius:4px; cursor:pointer; font-size:16px; }
            .image-index { position:absolute; top:0; right:0; background:rgba(33,150,243,0.85); color:white; font-size:14px; width:22px; height:22px; border-radius:0 0 0 12px; display:flex; align-items:center; justify-content:center; font-weight:bold; z-index:1; }
            @media (max-width:480px) {
                #img-dl-modal .image-grid { grid-template-columns:repeat(auto-fill, minmax(80px, 1fr)); gap:10px; padding:8px; }
                .image-item { border-radius:6px; border-width:1px; }
                #img-dl-modal .modal-footer { flex-wrap:wrap; gap:8px; }
                #img-dl-modal .count { order:3; width:100%; text-align:center; }
                #progress-modal { width:90vw; }
                .image-index { width:18px; height:18px; font-size:10px; border-radius:0 0 0 8px; }
                #img-dl-modal button { padding:6px 12px; font-size:13px; }
            }
        `;
        GM_addStyle(css);
    }

    /* -------------------- 获取页面图片（保持原逻辑） -------------------- */
    function getPageImages() {
        const images = new Set();

        document.querySelectorAll('img').forEach(img => {
            if (!img) return;
            const srcs = new Set([
                img.src,
                img.dataset.src,
                img.dataset.original,
                img.dataset.srcset,
                img.dataset.lazySrc,
                img.dataset.lazyload,
                img.dataset.thumb,
                img.getAttribute('data-src'),
                img.getAttribute('data-original'),
                img.getAttribute('data-srcset'),
                img.getAttribute('data-lazy'),
                img.getAttribute('data-lazy-src')
            ].filter(Boolean));

            srcs.forEach(src => {
                if (src.includes(',')) {
                    src.split(',').forEach(part => {
                        const url = part.trim().split(' ')[0];
                        if (url) images.add(cleanImageUrl(url));
                    });
                } else {
                    images.add(cleanImageUrl(src));
                }
            });
        });

        document.querySelectorAll('picture source').forEach(source => {
            if (!source) return;
            const srcset = source.srcset;
            if (!srcset) return;
            srcset.split(',').forEach(part => {
                const url = part.trim().split(' ')[0];
                if (url) images.add(cleanImageUrl(url));
            });
        });

        document.querySelectorAll('*').forEach(el => {
            try {
                const style = window.getComputedStyle(el);
                const bgImages = [];
                if (style.backgroundImage && style.backgroundImage !== 'none') bgImages.push(style.backgroundImage);
                if (style.background && style.background !== 'none') bgImages.push(style.background);
                bgImages.forEach(bg => {
                    const urls = bg.match(/url\(['"]?(.*?)['"]?\)/g);
                    if (urls) {
                        urls.forEach(u => {
                            const clean = u.replace(/^url\(['"]?/, '').replace(/['"]?\)$/, '');
                            images.add(cleanImageUrl(clean));
                        });
                    }
                    const imageSetMatches = bg.match(/image-set\((.*?)\)/g);
                    if (imageSetMatches) {
                        imageSetMatches.forEach(set => {
                            const items = set.match(/url\(['"]?(.*?)['"]?\)/g);
                            if (items) {
                                items.forEach(u => {
                                    const clean = u.replace(/^url\(['"]?/, '').replace(/['"]?\)$/, '');
                                    images.add(cleanImageUrl(clean));
                                });
                            }
                        });
                    }
                });
            } catch (e) {}
        });

        document.querySelectorAll('canvas').forEach(canvas => {
            try {
                const dataURL = canvas.toDataURL('image/png');
                images.add(dataURL);
            } catch (e) {}
        });

        document.querySelectorAll('svg').forEach(svg => {
            try {
                const serializer = new XMLSerializer();
                const svgStr = serializer.serializeToString(svg);
                const blob = new Blob([svgStr], { type: 'image/svg+xml' });
                const url = URL.createObjectURL(blob);
                images.add(url);
            } catch (e) {}
        });

        document.querySelectorAll('video').forEach(video => {
            if (video.poster) images.add(cleanImageUrl(video.poster));
        });

        return Array.from(images);
    }

    function cleanImageUrl(url) {
        if (!url) return '';
        const [baseUrl] = url.split(/[?#]/);
        if (baseUrl.startsWith('//')) return location.protocol + baseUrl;
        if (baseUrl.startsWith('/')) return location.origin + baseUrl;
        if (baseUrl.startsWith('./') || baseUrl.startsWith('../')) return new URL(baseUrl, location.href).href;
        return baseUrl;
    }

    /* -------------------- —— 关键：扩展名相关函数（替换/修复版） —— -------------------- */

    // 1. 仅从 URL 提取扩展名（回退使用）
    function getImageExtension(url) {
        try {
            let cleanUrl = (url || '').split('?')[0].split('#')[0];
            const match = cleanUrl.match(/\.([a-z0-9]{2,5})$/i);
            if (match) {
                const ext = match[1].toLowerCase();
                if (['jpg','jpeg','png','gif','webp','bmp','svg','ico'].includes(ext)) {
                    return ext === 'jpeg' ? 'jpg' : ext;
                }
            }
            return 'jpg';
        } catch (e) {
            return 'jpg';
        }
    }

    // 2. 根据远程响应判断扩展名（支持 GM_xmlhttpRequest 返回的 arraybuffer）
    async function getImageExtensionFromResponse(respObj, url) {
        try {
            // 先从响应头中找 Content-Type（respObj.headers 可能是字符串）
            const headersStr = respObj.responseHeaders || respObj.headers || '';
            const ctMatch = headersStr.match(/content-type:\s*([^\r\n;]+)/i);
            if (ctMatch) {
                const ct = ctMatch[1].toLowerCase();
                if (ct.includes('jpeg') || ct.includes('jpg')) return 'jpg';
                if (ct.includes('png')) return 'png';
                if (ct.includes('gif')) return 'gif';
                if (ct.includes('webp')) return 'webp';
                if (ct.includes('bmp')) return 'bmp';
                if (ct.includes('svg')) return 'svg';
                if (ct.includes('x-icon') || ct.includes('ico')) return 'ico';
            }

            // 再用前几个字节判断（respObj.arrayBuffer 是 ArrayBuffer）
            const arrayBuffer = respObj.arrayBuffer;
            if (arrayBuffer && arrayBuffer.byteLength > 0) {
                const bytes = new Uint8Array(arrayBuffer.slice(0, 12));
                // png
                if (bytes[0] === 0x89 && bytes[1] === 0x50 && bytes[2] === 0x4E && bytes[3] === 0x47) return 'png';
                // jpg
                if (bytes[0] === 0xFF && bytes[1] === 0xD8) return 'jpg';
                // gif
                if (bytes[0] === 0x47 && bytes[1] === 0x49 && bytes[2] === 0x46) return 'gif';
                // webp (RIFF....WEBP)
                if (bytes[0] === 0x52 && bytes[1] === 0x49 && bytes[2] === 0x46 && bytes[3] === 0x46) {
                    const sub = String.fromCharCode(bytes[8], bytes[9], bytes[10], bytes[11]);
                    if (sub === 'WEBP') return 'webp';
                }
                // bmp
                if (bytes[0] === 0x42 && bytes[1] === 0x4D) return 'bmp';
                // svg 文件通常是文本 "<svg"
                const textStart = new TextDecoder().decode(bytes);
                if (textStart.trim().startsWith('<svg')) return 'svg';
            }

            // 最后回退到 URL
            return getImageExtension(url);
        } catch (e) {
            return getImageExtension(url);
        }
    }

    // 3. 正确把图片内容加入 zip（使用 ArrayBuffer）
    async function addImageToZip(zip, respObj, filename) {
        // respObj.arrayBuffer 必须存在（fetchImage 会确保）
        const arrayBuffer = respObj.arrayBuffer;
        if (!arrayBuffer) throw new Error('没有可用的 ArrayBuffer 数据');
        zip.file(filename, arrayBuffer);
    }

    /* -------------------- 网络请求：使用 GM_xmlhttpRequest，返回 arraybuffer（改良） -------------------- */
    function fetchImage(url, timeout = 20000) {
        return new Promise((resolve, reject) => {
            try {
                GM_xmlhttpRequest({
                    method: 'GET',
                    url: url,
                    responseType: 'arraybuffer', // 直接拿到 ArrayBuffer，便于 zip 使用
                    headers: {
                        'Referer': location.href,
                        'Origin': location.origin
                    },
                    timeout: timeout,
                    onload: function(resp) {
                        if (resp.status >= 400) return reject(new Error(`HTTP ${resp.status}`));
                        resolve({
                            arrayBuffer: resp.response, // ArrayBuffer
                            responseHeaders: resp.responseHeaders || '',
                            finalUrl: resp.finalUrl || url,
                            url: url
                        });
                    },
                    onerror: function(err) { reject(new Error('网络错误')); },
                    ontimeout: function() { reject(new Error('请求超时')); },
                    onabort: function() { reject(new Error('请求中止')); }
                });
            } catch (e) {
                reject(e);
            }
        });
    }

    /* -------------------- 预览 / 选择 / 下载 主流程（使用上面修复的函数） -------------------- */

    function showPreview() {
        const modal = document.getElementById('img-dl-modal');
        const grid = modal.querySelector('.image-grid');
        const images = getPageImages();

        imageUrls = new Set(images);
        grid.innerHTML = '';
        selectedItems = [];

        images.forEach((url, index) => {
            const item = document.createElement('div');
            item.className = 'image-item';

            const img = document.createElement('img');
            img.src = url;
            img.alt = `Image ${index + 1}`;
            img.onerror = function() { item.style.display = 'none'; };

            const indexElement = document.createElement('div');
            indexElement.className = 'image-index';
            indexElement.style.display = 'none';
            indexElement.textContent = '0';

            item.appendChild(img);
            item.appendChild(indexElement);
            item.dataset.url = url;

            item.addEventListener('click', () => {
                toggleSelection(item);
                updateSelectionCount();
            });

            grid.appendChild(item);
        });

        modal.style.display = 'flex';
        document.getElementById('img-dl-overlay').style.display = 'block';
        updateSelectionCount();
    }

    function refreshPreview() {
        const modal = document.getElementById('img-dl-modal');
        const grid = modal.querySelector('.image-grid');
        selectedItems = [];
        document.querySelector('.select-btn').textContent = '全选';

        const images = getPageImages();
        imageUrls = new Set(images);
        grid.innerHTML = '';

        images.forEach((url, index) => {
            const item = document.createElement('div');
            item.className = 'image-item';

            const img = document.createElement('img');
            img.src = url;
            img.alt = `Image ${index + 1}`;
            img.onerror = function() { item.style.display = 'none'; };

            const indexElement = document.createElement('div');
            indexElement.className = 'image-index';
            indexElement.style.display = 'none';
            indexElement.textContent = '0';

            item.appendChild(img);
            item.appendChild(indexElement);
            item.dataset.url = url;

            item.addEventListener('click', () => {
                toggleSelection(item);
                updateSelectionCount();
            });

            grid.appendChild(item);
        });

        updateSelectionCount();
    }

    function toggleSelection(item) {
        const isSelected = item.classList.contains('selected');

        if (isSelected) {
            item.classList.remove('selected');
            item.querySelector('.image-index').style.display = 'none';
            const index = selectedItems.indexOf(item);
            if (index !== -1) selectedItems.splice(index, 1);
        } else {
            item.classList.add('selected');
            const indexTag = item.querySelector('.image-index');
            const selectionNumber = selectedItems.length + 1;
            indexTag.textContent = selectionNumber;
            indexTag.style.display = 'block';
            selectedItems.push(item);
        }

        updateSelectedIndexes();
    }

    function updateSelectedIndexes() {
        selectedItems.forEach((item, index) => {
            const indexTag = item.querySelector('.image-index');
            indexTag.textContent = index + 1;
            indexTag.style.display = 'block';
        });
    }

    function updateSelectionCount() {
        const modal = document.getElementById('img-dl-modal');
        modal.querySelector('.count').textContent = `${selectedItems.length}张`;
        modal.querySelector('.download-btn').disabled = selectedItems.length === 0;
    }

    function showProgress(total) {
        const progressModal = document.getElementById('progress-modal');
        progressModal.style.display = 'block';
        document.getElementById('img-dl-overlay').style.display = 'block';
        updateProgress(0, 0, 0, total, '准备开始下载...');
    }

    function updateProgress(current, success, fail, total, message) {
        const progressModal = document.getElementById('progress-modal');
        const progressFill = progressModal.querySelector('.progress-fill');
        const progressText = progressModal.querySelector('.progress-text');
        const successCount = progressModal.querySelector('.success-count');
        const failCount = progressModal.querySelector('.fail-count');

        const percent = total > 0 ? Math.round((current / total) * 100) : 0;
        progressFill.style.width = `${percent}%`;
        progressText.textContent = message || `正在下载 ${current}/${total}...`;
        successCount.textContent = `成功: ${success}`;
        failCount.textContent = `失败: ${fail}`;
    }

    function hideProgress() {
        const progressModal = document.getElementById('progress-modal');
        progressModal.style.display = 'none';
        document.getElementById('img-dl-overlay').style.display = 'none';
    }

    // 核心：批量下载并压缩（使用修复后的 fetch/getExt/addToZip）
    async function downloadSelected() {
        const modal = document.getElementById('img-dl-modal');

        if (selectedItems.length === 0) return;

        modal.querySelector('.download-btn').disabled = true;
        showProgress(selectedItems.length);

        const zip = new JSZip();
        let successCount = 0;
        let failCount = 0;
        let isCancelled = false;

        const cancelBtn = document.querySelector('#progress-modal .cancel-btn');
        const onCancel = () => { isCancelled = true; hideProgress(); modal.querySelector('.download-btn').disabled = false; };
        cancelBtn.addEventListener('click', onCancel, { once: true });

        for (let i = 0; i < selectedItems.length; i++) {
            if (isCancelled) {
                updateProgress(i, successCount, failCount, selectedItems.length, '下载已取消');
                setTimeout(() => hideProgress(), 1200);
                return;
            }

            const url = selectedItems[i].dataset.url;
            updateProgress(i, successCount, failCount, selectedItems.length, `正在请求: ${url.split('/').pop()}`);

            try {
                const respObj = await fetchImage(url);
                const ext = await getImageExtensionFromResponse(respObj, url);
                await addImageToZip(zip, respObj, `image_${i + 1}.${ext}`);
                successCount++;
                updateProgress(i + 1, successCount, failCount, selectedItems.length);
            } catch (err) {
                console.error('下载或压缩单张失败:', url, err);
                failCount++;
                updateProgress(i + 1, successCount, failCount, selectedItems.length, `下载失败: ${url.split('/').pop()}`);
            }

            // 小间隔避免阻塞
            await new Promise(r => setTimeout(r, 100));
        }

        if (successCount > 0 && !isCancelled) {
            updateProgress(selectedItems.length, successCount, failCount, selectedItems.length, '正在生成压缩包...');
            await new Promise(r => setTimeout(r, 300));
            try {
                const content = await zip.generateAsync({ type: 'blob' });
                const blobUrl = URL.createObjectURL(content);
                const a = document.createElement('a');
                a.href = blobUrl;
                a.download = `images_${Date.now()}.zip`;
                a.click();
                URL.revokeObjectURL(blobUrl);
                updateProgress(selectedItems.length, successCount, failCount, selectedItems.length, '下载完成！');
                setTimeout(() => hideProgress(), 1200);
            } catch (e) {
                console.error('生成 zip 失败', e);
                updateProgress(selectedItems.length, successCount, failCount, selectedItems.length, '生成压缩包失败');
                setTimeout(() => hideProgress(), 1200);
            }
        } else if (!isCancelled) {
            updateProgress(selectedItems.length, successCount, failCount, selectedItems.length, '没有成功下载任何图片');
            setTimeout(() => hideProgress(), 1200);
        }

        closeModal();
        modal.querySelector('.download-btn').disabled = false;
    }

    function closeModal() {
        document.getElementById('img-dl-modal').style.display = 'none';
        document.getElementById('img-dl-overlay').style.display = 'none';
    }

    function addRefreshButtonToFooter() {
        const footer = document.querySelector('.modal-footer');
        const refreshBtn = document.createElement('button');
        refreshBtn.className = 'refresh-btn';
        refreshBtn.innerHTML = '刷新';
        refreshBtn.style.cssText = `background:#4CAF50;margin-left:8px;`;
        footer.insertBefore(refreshBtn, footer.querySelector('.count'));
        refreshBtn.addEventListener('click', refreshPreview);
    }

    function init() {
        createUI();
        addStyles();
        addRefreshButtonToFooter();

        document.getElementById('img-dl-btn').addEventListener('click', showPreview);
        document.querySelector('#img-dl-modal .close-btn').addEventListener('click', closeModal);

        document.querySelector('#img-dl-modal .select-btn').addEventListener('click', function() {
            const items = document.querySelectorAll('.image-item');
            const allSelected = items.length > 0 && Array.from(items).every(item => item.classList.contains('selected'));

            selectedItems.forEach(item => { item.classList.remove('selected'); item.querySelector('.image-index').style.display = 'none'; });
            selectedItems = [];

            items.forEach(item => {
                item.classList.toggle('selected', !allSelected);
                if (!allSelected) selectedItems.push(item);
            });

            updateSelectedIndexes();
            updateSelectionCount();
            this.textContent = allSelected ? '全选' : '取消全选';
        });

        document.querySelector('#img-dl-modal .download-btn').addEventListener('click', downloadSelected);
        document.getElementById('img-dl-overlay').addEventListener('click', closeModal);

        imageUrls = new Set(getPageImages());
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
})();