Tampermonkey脚本优化请求：更快检测并点击聊天室可用名额

现有问题 #

原脚本仅通过检测is-highlighted类判断名额可用，无法响应名额计数器的数值变化；且监听目标为单个计数器元素，容易遗漏其他名额项的更新，响应速度受限。

优化方案 #

1. 监听全局名额列表容器：改为监听所有名额项的父容器，确保捕获所有聊天室名额的变化
2. 扩展MutationObserver监听范围：同时监听元素类名变化（高亮状态）和文本内容变化（名额数值），覆盖两种触发场景
3. 优先检测数值变化：直接解析计数器文本中的名额数量，比依赖样式变化响应更快
4. 优化点击与重连逻辑：避免重复点击，简化观察者的断开/重连流程，提升稳定性

优化后完整代码 #

(function() {
    'use strict';

    function startObserver() {
        // 监听所有名额项的父容器（若DOM结构不同，可调整为实际的列表外层容器选择器）
        const observedContainer = document.querySelector(".c_ChatRoom__list") || document.querySelector(".c_ChatRoom__list-item")?.parentElement;
        
        if (!observedContainer) {
            console.log("⚠️ 未找到名额列表容器，1秒后重试...");
            setTimeout(startObserver, 1000);
            return;
        }

        const observer = new MutationObserver((mutations) => {
            mutations.forEach(mutation => {
                // 处理类名变化（高亮）或文本内容变化（名额数值）
                if ((mutation.type === 'attributes' && mutation.attributeName === 'class') || mutation.type === 'characterData') {
                    const targetCounter = mutation.target.closest(".c_ChatRoom__list-item-counter") || mutation.target;
                    if (!targetCounter) return;

                    // 提取文本中的名额数字
                    const spotMatch = targetCounter.textContent.match(/\d+/);
                    const spotCount = spotMatch ? parseInt(spotMatch[0]) : 0;
                    // 同时检查数值和高亮状态
                    const isHighlighted = targetCounter.classList.contains("is-highlighted");
                    
                    if (spotCount > 0 || isHighlighted) {
                        console.log("🔥 检测到可用名额！");
                        targetCounter.click();
                        console.log("🖱️ 已点击锁定名额");
                        
                        // 短暂停止监听避免重复触发
                        observer.disconnect();
                        setTimeout(() => {
                            console.log("🔄 重新启动监听...");
                            observer.observe(observedContainer, observerConfig);
                        }, 3000);
                        return;
                    }
                }
            });
        });

        // 监听配置：覆盖类名、文本、子节点变化
        const observerConfig = {
            childList: true,
            subtree: true,
            attributes: true,
            attributeFilter: ['class'],
            characterData: true
        };

        observer.observe(observedContainer, observerConfig);
        console.log("👀 已启动聊天室名额监听...");
    }

    setTimeout(startObserver, 1500);
})();

关键优化说明 #

• 监听范围调整：改为监听名额列表父容器，确保捕获所有名额项的更新，而非单个元素
• 双条件触发：同时检测名额数值（spotCount > 0）和高亮状态，避免单一判断的遗漏
• 文本解析逻辑：通过正则提取计数器文本中的数字，直接判断名额可用性，响应速度比样式检测更快
• 简化重连逻辑：触发点击后短暂断开监听再重启，避免短时间内重复触发点击操作

内容的提问来源于stack exchange，提问作者Thiago Nunes Marques