ImagesDownloader/hdk4_downloader.js

// ==UserScript==
// @name         hd4k_downloader
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  提取页面图片并发送到后端
// @author       Jack
// @match        *://*/*
// @grant        GM_xmlhttpRequest
// ==/UserScript==

(function() {
    'use strict';

    // 创建按钮
    const createButton = () => {
        const button = document.createElement('button');
        button.textContent = '提取图片';
        button.id = 'hd4k-extract-btn';

        // 按钮样式 - 修改为蓝色系
        button.style.position = 'fixed';
        button.style.top = '12.5%';
        button.style.right = '1%';
        button.style.transform = 'translateY(-50%)';
        button.style.padding = '6px 12px';
        button.style.fontSize = '12px';
        button.style.fontWeight = 'bold';
        button.style.backgroundColor = '#2c80ff';
        button.style.color = '#fff';
        button.style.border = 'none';
        button.style.borderRadius = '8px';
        button.style.cursor = 'pointer';
        button.style.zIndex = '10000';
        button.style.boxShadow = '0 2px 5px rgba(0,0,0,0.2)';
        button.style.transition = 'all 0.3s ease';

        // 悬停效果
        button.addEventListener('mouseenter', () => {
            button.style.backgroundColor = '#1a6ee0';
            button.style.transform = 'translateY(-50%) scale(1.05)';
        });

        button.addEventListener('mouseleave', () => {
            button.style.backgroundColor = '#2c80ff';
            button.style.transform = 'translateY(-50%) scale(1)';
        });

        // 点击事件
        button.addEventListener('click', extractAndSendImages);

        return button;
    };

    // 获取所有图片URL
    const getAllImageUrls = () => {
        const images = document.querySelectorAll('img');
        const imageUrls = {};
        let index = 1;

        images.forEach(img => {
            let src = img.src || img.dataset.src || img.currentSrc;

            // 过滤掉空URL、base64和数据URL
            if (src && !src.startsWith('data:') && !src.startsWith('blob:')) {
                const key = String(index).padStart(4, '0');
                imageUrls[key] = src;
                index++;
            }
        });

        return imageUrls;
    };

    // 提取并发送数据
    const extractAndSendImages = () => {
        try {
            // 获取当前页面信息
            const title = document.title || '无标题';
            const url = window.location.href;
            const imageUrls = getAllImageUrls();

            // 准备数据
            const data = {
                title: title,
                url: url,
                imgs: imageUrls
            };

            console.log('提取的数据:', data);

            // 显示加载状态
            const button = document.getElementById('hd4k-extract-btn');
            const originalText = button.textContent;
            button.textContent = '处理中...';
            button.disabled = true;

            // 发送到后端
            GM_xmlhttpRequest({
                method: 'POST',
                url: 'http://127.0.0.1:55830/api/save_imgs',
                headers: {
                    'Content-Type': 'application/json'
                },
                data: JSON.stringify(data),
                onload: function(response) {
                    console.log('发送成功:', response);

                    // 恢复按钮状态并显示成功
                    button.textContent = '成功!';
                    button.style.backgroundColor = '#28a745';

                    setTimeout(() => {
                        button.textContent = originalText;
                        button.style.backgroundColor = '#2c80ff';
                        button.disabled = false;
                    }, 1500);
                },
                onerror: function(error) {
                    console.error('发送失败:', error);

                    // 恢复按钮状态并显示错误
                    button.textContent = '失败!';
                    button.style.backgroundColor = '#dc3545';

                    setTimeout(() => {
                        button.textContent = originalText;
                        button.style.backgroundColor = '#2c80ff';
                        button.disabled = false;
                    }, 1500);

                    alert('发送失败，请检查后端服务是否运行: ' + error.statusText);
                },
                timeout: 10000
            });

        } catch (error) {
            console.error('提取图片时出错:', error);
            alert('提取图片时出错: ' + error.message);
        }
    };

    // 初始化 - 添加按钮到页面
    const init = () => {
        // 确保按钮不会重复添加
        if (!document.getElementById('hd4k-extract-btn')) {
            const button = createButton();
            document.body.appendChild(button);
        }
    };

    // 页面加载完成后初始化
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }

})();