Tampermonkey 脚本 检测页面文本 批量点击按钮

以下是一个全新的 Tampermonkey 脚本,用于在检测到页面中有 + Add To Import List 按钮时,自动添加一个新功能按钮,该功能按钮可以一键点击页面中所有符合条件的按钮。

// ==UserScript==
// @name         自动点击 + Add To Import List 按钮(支持过滤)
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  在页面上自动添加功能按钮,用于批量点击所有可见的 "+ Add To Import List" 按钮
// @author       Your Name
// @match        https://shop.gigab2b.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 创建"批量点击"功能按钮
    function createBatchClickButton() {
        const button = document.createElement('button');
        button.id = 'batch-click-button';
        button.innerText = '一键点击所有 Add To Import List 按钮';
        button.style.position = 'fixed';
        button.style.top = '100px';
        button.style.right = '20px';
        button.style.zIndex = '9999';
        button.style.padding = '10px 15px';
        button.style.backgroundColor = '#007bff';
        button.style.color = '#fff';
        button.style.border = 'none';
        button.style.borderRadius = '5px';
        button.style.cursor = 'pointer';
        button.style.boxShadow = '0 2px 5px rgba(0,0,0,0.2)';
        button.style.transition = 'background-color 0.3s';

        button.addEventListener('mouseover', () => {
            button.style.backgroundColor = '#0056b3';
        });

        button.addEventListener('mouseout', () => {
            button.style.backgroundColor = '#007bff';
        });

        // 点击事件:批量点击所有符合条件的按钮
        button.addEventListener('click', () => {
            clickVisibleButtons();
        });

        document.body.appendChild(button);
        return button;
    }

    // 检查元素是否可见
    function isElementVisible(element) {
        // 检查元素自身的display属性
        if (element.style.display === 'none') return false;

        // 检查是否被禁用
        if (element.disabled) return false;

        // 检查元素的不透明度
        if (element.style.opacity === '0.5') return false;

        // 检查父元素的可见性
        let parent = element.closest('div');
        while (parent) {
            const style = window.getComputedStyle(parent);
            if (style.display === 'none') return false;
            parent = parent.parentElement;
        }

        return true;
    }

    // 点击所有可见的按钮
    function clickVisibleButtons() {
        // 获取所有Add To Import List按钮
        const buttons = Array.from(document.querySelectorAll('button[data-gmd-ck="item_import"] span'))
            .map(span => span.closest('button'))
            .filter(button => button && isElementVisible(button));

        if (buttons.length === 0) {
            alert('未找到任何可点击的 "+ Add To Import List" 按钮。');
            return;
        }

        let successCount = 0;
        let failCount = 0;

        // 创建进度提示
        const progressDiv = document.createElement('div');
        progressDiv.style.cssText = `
            position: fixed;
            top: 150px;
            right: 20px;
            padding: 10px;
            background: rgba(0, 0, 0, 0.8);
            color: white;
            border-radius: 5px;
            z-index: 10000;
        `;
        document.body.appendChild(progressDiv);

        // 依次点击按钮
        buttons.forEach((btn, index) => {
            setTimeout(() => {
                try {
                    // 再次检查按钮是否可见和可用
                    if (isElementVisible(btn)) {
                        btn.click();
                        successCount++;
                    } else {
                        failCount++;
                    }

                    // 更新进度提示
                    progressDiv.textContent = `正在处理: ${index + 1}/${buttons.length}`;

                    // 完成后显示结果
                    if (index === buttons.length - 1) {
                        setTimeout(() => {
                            progressDiv.remove();
                            alert(`操作完成!\n成功点击: ${successCount} 个\n未能点击: ${failCount} 个`);
                        }, 500);
                    }
                } catch (error) {
                    console.error('点击按钮时出错:', error);
                    failCount++;
                }
            }, index * 300); // 增加间隔到300ms,减少可能的请求冲突
        });
    }

    // 检测页面加载完成后执行
    window.addEventListener('load', () => {
        if (!document.getElementById('batch-click-button')) {
            createBatchClickButton();
        }
    });

    // 监听动态加载内容
    const observer = new MutationObserver((mutations) => {
        if (!document.getElementById('batch-click-button')) {
            createBatchClickButton();
        }
    });

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

脚本功能说明

  1. 自动添加“批量点击”按钮
    • 脚本会在页面加载完成后,在右上角固定一个按钮,默认文本为 一键点击所有 Add To Import List 按钮
  2. 批量点击所有符合条件的按钮
    • 脚本会搜索所有符合条件的按钮(即 data-gmd-ck="item_import" 的按钮)并自动依次点击。
    • 使用 setTimeout 避免同时触发太多点击请求(每隔 200ms 触发一次点击)。
  3. 动态内容支持
    • 通过 MutationObserver 监听页面内容的动态变化(如 AJAX 加载),如果页面发生变化且按钮不存在,脚本会重新挂载按钮。
  4. 用户友好的提示
    • 如果页面中未找到任何符合条件的按钮,会提示用户 未找到任何 "+ Add To Import List" 按钮
    • 点击完成后会提示用户按钮总数以及成功点击的数量。

使用方法

  1. 安装 Tampermonkey 插件(如果未安装)。
  2. 创建一个新脚本,将上述代码粘贴进去。
  3. 保存脚本并刷新目标页面(如 https://shop.gigab2b.com/*)。
  4. 页面右上角会出现一个 一键点击所有 Add To Import List 按钮 按钮。
  5. 点击该按钮,脚本会自动批量点击所有符合条件的按钮。

注意事项

  1. 延迟点击
    • 脚本中设置了 200ms 的点击间隔,可以根据需求调整 setTimeout 的间隔时间,以避免短时间内发送过多请求。
  2. 按钮定位逻辑
    • 脚本通过 CSS 选择器 button[data-gmd-ck="item_import"] 定位按钮,如果目标页面的按钮结构发生变化,需要修改选择器。
  3. 动态加载
    • 如果页面内容是通过 AJAX 动态加载的,脚本会自动重新挂载“批量点击”按钮,无需刷新页面。

By 行政