// ==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(); } })();