Tool.user.js

// ==UserScript==
// @name         自动验证码Base64提取工具
// @namespace    http://localhost/
// @version      1.0
// @description  自动提取网页中验证码图片的Base64编码值并发送到服务器
// @author       you and me
// @match        https://*/*
// @match        https://*/*
// @grant        GM_xmlhttpRequest
// @grant        GM_setValue
// @grant        GM_getValue
// @run-at       document-idle
// ==/UserScript==

(function() {
    'use strict';

    /*
    在此可添加自动填充逻辑，例如：
    document.querySelector("#loginform-username").value = "";
    document.querySelector("#loginform-password").value = "";
    */


    // 配置项
    const CONFIG = {
        SERVER_URL: 'https://your-api-server.com/api/captcha', // 替换为你的服务器地址 本代码默认采用本地的ddddocr-api
        CHECK_INTERVAL: 2000, // 检查验证码的间隔(毫秒)
        MAX_RETRY: 3, // 最大重试次数
        CAPTCHA_SELECTORS: [
            'img[src*="captcha"]',
            'img[src*="code"]',
            'img[src*="verify"]',
            '.captcha img',
            '.verify-code img',
            '#captchaImg',
            '#codeImg',
            '[class*="captcha"] img',
            '[class*="code"] img'
        ]
    };

    // 创建状态显示UI
    const statusPanel = document.createElement('div');
    statusPanel.id = 'captcha-extractor-panel';
    statusPanel.innerHTML = `
    <div id="captcha-panel-main" style="
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 10000;
        background: #2c3e50;
        color: white;
        padding: 15px;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        min-width: 280px;
        font-family: 'Segoe UI', Arial, sans-serif;
        font-size: 14px;
        border-left: 4px solid #3498db;
    ">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
            <strong style="user-select: none;">验证码提取器</strong>
            <div style="display: flex; align-items: center; gap: 8px;">
                <span id="captcha-status-indicator" style="
                    width: 12px;
                    height: 12px;
                    border-radius: 50%;
                    background: #7f8c8d;
                    display: inline-block;
                    cursor: pointer;
                    transition: all 0.3s ease;
                    position: relative;
                " title="点击关闭"></span>
            </div>
        </div>
        <div id="captcha-status-text" style="font-size: 12px; line-height: 1.4; user-select: none;">
            正在监测验证码...
        </div>
        <div id="captcha-preview" style="
            margin-top: 10px;
            text-align: center;
            display: none;
            border: 1px solid #34495e;
            border-radius: 4px;
            padding: 5px;
            background: #34495e;
        ">
            <img id="captcha-preview-img" style="max-width: 100%; max-height: 60px;">
        </div>
    </div>
`;

    document.body.appendChild(statusPanel);

    // 添加CSS样式到页面
    const style = document.createElement('style');
    style.textContent = `
    #captcha-status-indicator:hover {
        background: #e74c3c !important;
        transform: scale(1.2);
    }

    #captcha-status-indicator::before {
        content: '×';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-size: 10px;
        font-weight: bold;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    #captcha-status-indicator:hover::before {
        opacity: 1;
    }

    #captcha-panel-main {
        transition: transform 0.3s ease;
    }

    #captcha-panel-main:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0,0,0,0.3);
    }
`;
    document.head.appendChild(style);

    // 关闭功能
    const statusIndicator = document.getElementById('captcha-status-indicator');
    statusIndicator.addEventListener('click', function() {
        statusPanel.style.display = 'none';
        console.log('验证码提取器UI已关闭');
    });

    // 状态管理
    let isProcessing = false;
    let processedImages = new Set();
    let lastCaptchaData = ''; // 记录上一次的验证码数据用于去重

    // 生成验证码数据的简单哈希用于去重
    function generateCaptchaHash(base64Data) {
        // 取Base64数据的前100个字符和总长度作为简单哈希
        return base64Data.substring(0, 100) + '_' + base64Data.length;
    }

    // 更新状态显示
    function updateStatus(message, type = 'info') {
        const statusText = document.getElementById('captcha-status-text');
        const statusIndicator = document.getElementById('captcha-status-indicator');

        statusText.textContent = message;

        switch(type) {
            case 'success':
                statusIndicator.style.background = '#2ecc71';
                break;
            case 'error':
                statusIndicator.style.background = '#e74c3c';
                break;
            case 'processing':
                statusIndicator.style.background = '#f39c12';
                break;
            default:
                statusIndicator.style.background = '#3498db';
        }
    }

    // 显示验证码预览
    function showCaptchaPreview(base64Data) {
        const previewContainer = document.getElementById('captcha-preview');
        const previewImg = document.getElementById('captcha-preview-img');

        previewImg.src = base64Data;
        previewContainer.style.display = 'block';
    }

    // 查找验证码图片函数
    function findCaptchaImages() {
        const captchaImages = [];
        const now = Date.now();

        // 清除过期的已处理记录（5分钟）
        if (processedImages.size > 100) {
            processedImages.clear();
        }

        for (const selector of CONFIG.CAPTCHA_SELECTORS) {
            const images = document.querySelectorAll(selector);
            images.forEach(img => {
                if (!processedImages.has(img.src) &&
                    img.src &&
                    !img.src.startsWith('data:') && // 排除已经是base64的图片
                    img.complete && // 图片已加载完成
                    img.naturalWidth > 0 && // 图片有效
                    isLikelyCaptcha(img)) { // 增加验证码可能性判断
                    captchaImages.push(img);
                }
            });
        }

        return captchaImages;
    }

    // 判断图片是否是验证码的增强函数
    function isLikelyCaptcha(img) {
        // 尺寸特征
        const isRightSize = img.width <= 200 &&
              img.height <= 100 &&
              img.width >= 40 &&
              img.height >= 20;

        // 可见性特征
        const style = window.getComputedStyle(img);
        const isVisible = style.display !== 'none' &&
              style.visibility !== 'hidden' &&
              style.opacity !== '0';

        // 位置特征 - 验证码通常在表单附近
        const rect = img.getBoundingClientRect();
        const isInViewport = rect.top >= 0 &&
              rect.left >= 0 &&
              rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
              rect.right <= (window.innerWidth || document.documentElement.clientWidth);

        // 查找附近的输入框或表单
        const hasNearbyForm = hasFormElementsNearby(img);

        return isRightSize && isVisible && isInViewport && hasNearbyForm;
    }

    // 检查图片附近是否有表单元素
    function hasFormElementsNearby(img) {
        const parent = img.closest('form');
        if (parent) return true;

        // 检查周围200px范围内的元素
        const rect = img.getBoundingClientRect();
        const centerX = rect.left + rect.width / 2;
        const centerY = rect.top + rect.height / 2;

        const nearbyElements = document.elementsFromPoint(centerX, centerY + 50) || [];

        return nearbyElements.some(el =>
                                   el.tagName === 'INPUT' ||
                                   el.tagName === 'BUTTON' ||
                                   el.closest('form')
                                  );
    }

    // 图片转Base64
    function imageToBase64(img, callback) {
        // 如果已经是Base64格式
        if (img.src.startsWith('data:')) {
            callback(img.src);
            return;
        }

        // 创建Canvas进行转换
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');

        const tempImg = new Image();
        tempImg.crossOrigin = 'Anonymous';

        tempImg.onload = function() {
            try {
                canvas.width = tempImg.width;
                canvas.height = tempImg.height;
                ctx.drawImage(tempImg, 0, 0);
                const base64 = canvas.toDataURL('image/png');
                callback(base64);
            } catch (error) {
                console.error('Canvas转换错误:', error);
                callback(null);
            }
        };

        tempImg.onerror = function() {
            console.error('图片加载失败:', img.src);
            callback(null);
        };

        tempImg.src = img.src;
    }

    // 发送Base64到服务器
    function sendToServer(base64Data, retryCount = 0) {
        if (!base64Data) {
            console.error('无效的Base64数据');
            return;
        }

        console.log('发送验证码Base64到服务器:', CONFIG.SERVER_URL);
        console.log('Base64数据长度:', base64Data.length);

        // 从Base64 data URL中提取纯Base64部分
        const pureBase64 = base64Data.replace(/^data:image\/\w+;base64,/, '');

        // 创建FormData对象
        const formData = new FormData();
        formData.append('image', base64Data); // 使用完整的data URL格式
        formData.append('charsets', '0123456789'); // 根据API要求设置字符集

        // 发送实际请求到服务器
        GM_xmlhttpRequest({
            method: 'POST',
            url: CONFIG.SERVER_URL,
            data: formData,
            headers: {
                'accept': 'application/json'
                // 注意：不要设置Content-Type，FormData会自动设置multipart/form-data
            },
            onload: function(response) {
                try {
                    const result = JSON.parse(response.responseText);
                    console.log('服务器响应:', result);
                    updateStatus('验证码已发送到服务器', 'success');

                    // 在控制台输出服务器返回的识别结果
                    if (result.code === 200 && result.data) {
                        console.log('验证码识别结果:', result.data);
                        //在此可增加自动填充逻辑
                    } else {
                        console.log('服务器返回状态:', result);
                    }
                } catch (error) {
                    console.error('解析服务器响应失败:', error);
                    console.log('原始响应:', response.responseText);
                    updateStatus('服务器响应解析失败', 'error');
                }
            },
            onerror: function(error) {
                console.error('发送到服务器失败:', error);
                if (retryCount < CONFIG.MAX_RETRY) {
                    console.log(`重试中... (${retryCount + 1}/${CONFIG.MAX_RETRY})`);
                    updateStatus(`发送失败，重试中... (${retryCount + 1}/${CONFIG.MAX_RETRY})`, 'processing');
                    setTimeout(() => {
                        sendToServer(base64Data, retryCount + 1);
                    }, 1000);
                } else {
                    updateStatus('发送到服务器失败', 'error');
                }
            }
        });
    }

    // 处理验证码图片
    function processCaptchaImage(img) {
        if (isProcessing) return;

        isProcessing = true;
        processedImages.add(img.src);

        updateStatus('正在提取验证码...', 'processing');

        imageToBase64(img, function(base64Data) {
            if (base64Data) {
                // 检查是否与上一次的验证码相同
                const currentHash = generateCaptchaHash(base64Data);
                if (currentHash === lastCaptchaData) {
                    console.log('检测到重复验证码，跳过处理');
                    updateStatus('验证码未更新', 'info');
                    isProcessing = false;
                    return;
                }

                lastCaptchaData = currentHash;

                console.log('提取到验证码Base64:');
                console.log('数据长度:', base64Data.length);
                console.log('数据前缀:', base64Data.substring(0, 50) + '...');

                // 显示预览
                showCaptchaPreview(base64Data);

                // 发送到服务器
                sendToServer(base64Data);
            } else {
                console.error('验证码提取失败');
                updateStatus('验证码提取失败', 'error');
                isProcessing = false;
            }
        });
    }

    // 主监控函数
    function startMonitoring() {
        console.log('开始监控验证码图片...');
        updateStatus('正在监测验证码...');

        let checkTimeout;

        const checkCaptcha = () => {
            if (isProcessing) {
                checkTimeout = setTimeout(checkCaptcha, CONFIG.CHECK_INTERVAL);
                return;
            }

            const captchaImages = findCaptchaImages();

            if (captchaImages.length > 0) {
                console.log(`发现 ${captchaImages.length} 个可能的验证码图片`);
                updateStatus(`发现验证码，处理中...`, 'processing');

                // 只处理第一个找到的有效验证码
                processCaptchaImage(captchaImages[0]);
            }

            checkTimeout = setTimeout(checkCaptcha, CONFIG.CHECK_INTERVAL);
        };

        checkCaptcha();

        // 清理函数
        return () => clearTimeout(checkTimeout);
    }

    // 页面加载完成后开始监控
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', startMonitoring);
    } else {
        startMonitoring();
    }

    // 动态加载图片监听
    const observer = new MutationObserver(function(mutations) {
        if (isProcessing) return;

        let foundNewCaptcha = false;

        mutations.forEach(function(mutation) {
            if (foundNewCaptcha) return;

            mutation.addedNodes.forEach(function(node) {
                if (foundNewCaptcha) return;

                if (node.nodeType === 1) {
                    if (node.tagName === 'IMG') {
                        const img = node;
                        if (!processedImages.has(img.src) &&
                            img.src &&
                            !img.src.startsWith('data:') &&
                            isLikelyCaptcha(img)) {
                            console.log('检测到动态加载的验证码图片');
                            foundNewCaptcha = true;
                            // 延迟处理，确保图片加载完成
                            setTimeout(() => processCaptchaImage(img), 500);
                        }
                    } else {
                        const images = node.querySelectorAll && node.querySelectorAll('img');
                        if (images) {
                            images.forEach(img => {
                                if (foundNewCaptcha) return;

                                if (!processedImages.has(img.src) &&
                                    img.src &&
                                    !img.src.startsWith('data:') &&
                                    isLikelyCaptcha(img)) {
                                    console.log('检测到动态加载的验证码图片');
                                    foundNewCaptcha = true;
                                    setTimeout(() => processCaptchaImage(img), 500);
                                }
                            });
                        }
                    }
                }
            });
        });
    });

    observer.observe(document.body, {
        childList: true,
        subtree: true
    });

})();