求Twitch页面监控脚本：检测关键词并触发刷新与推送通知

需求概述 #

• 按可配置间隔（默认15秒）查询页面内容，优先采用非刷新方式（fetch/XHR）
• 检测页面中的「LIVE」状态或「5000」错误关键词
• 触发任一条件时：发送浏览器推送通知 → 刷新页面一次 → 停止脚本
• 支持后台多标签/窗口同时独立运行

解决方案（Tampermonkey脚本） #

// ==UserScript==
// @name         Twitch Live Monitor & Error Fixer
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Monitor Twitch channels for LIVE status or Error 5000, auto-refresh and notify
// @author       You
// @match        https://www.twitch.tv/*
// @grant        GM_notification
// @grant        GM_getValue
// @grant        GM_setValue
// ==/UserScript==

(function() {
    'use strict';

    // 配置项
    const CHECK_INTERVAL = GM_getValue('checkInterval', 15000); // 默认15秒，可通过Tampermonkey存储修改
    const TARGET_KEYWORDS = ['LIVE', '5000'];

    let checkTimer = null;

    // 请求浏览器通知权限
    async function requestNotificationPermission() {
        if (!('Notification' in window)) {
            console.warn('浏览器不支持通知功能');
            return false;
        }
        const permission = await Notification.requestPermission();
        return permission === 'granted';
    }

    // 发送通知
    function sendNotification(message) {
        if (Notification.permission === 'granted') {
            new Notification('Twitch监控提醒', {
                body: message,
                icon: 'https://static.twitchcdn.net/assets/favicon-32-e29e246c157142c94346.png'
            });
            GM_notification({
                title: 'Twitch监控提醒',
                text: message,
                image: 'https://static.twitchcdn.net/assets/favicon-32-e29e246c157142c94346.png',
                silent: false
            });
        }
    }

    // 检查页面内容
    async function checkPageContent() {
        try {
            const response = await fetch(window.location.href);
            const html = await response.text();

            const matchedKeyword = TARGET_KEYWORDS.find(keyword => html.includes(keyword));
            if (matchedKeyword) {
                const message = matchedKeyword === 'LIVE' ? '频道已上线LIVE！' : '检测到5000错误，将刷新页面修复';
                sendNotification(message);
                
                clearInterval(checkTimer);
                checkTimer = null;
                
                setTimeout(() => {
                    window.location.reload();
                }, 1000);
                return;
            }
        } catch (error) {
            console.error('检查页面内容失败:', error);
        }
    }

    // 初始化脚本
    async function init() {
        const hasPermission = await requestNotificationPermission();
        if (!hasPermission) {
            console.warn('未获取通知权限，将无法收到提醒');
        }

        await checkPageContent();
        checkTimer = setInterval(checkPageContent, CHECK_INTERVAL);

        window.addEventListener('beforeunload', () => {
            if (checkTimer) {
                clearInterval(checkTimer);
            }
        });
    }

    if (document.readyState === 'complete') {
        init();
    } else {
        window.addEventListener('load', init);
    }
})();

代码说明 #

1. 配置项：

   • CHECK_INTERVAL：默认15000毫秒（15秒），可在Tampermonkey脚本的「存储」选项中修改checkInterval值调整间隔
   • TARGET_KEYWORDS：监控的关键词数组，包含需求指定的「LIVE」和「5000」

2. 通知功能：

   • 同时兼容浏览器原生通知和Tampermonkey内置通知API，确保在不同环境下正常工作
   • 首次运行会主动请求通知权限，需手动允许才能接收提醒

3. 页面检查逻辑：

   • 使用fetch获取页面完整HTML，相比直接查询DOM，能更可靠地捕获动态加载内容中的关键词
   • 触发条件后立即停止定时检查，避免重复执行，延迟1秒刷新页面确保通知正常显示

4. 后台运行支持：

   • Tampermonkey脚本在每个标签页独立实例化，天然支持多窗口/标签页同时监控不同频道
   • 页面卸载时自动清除定时器，避免内存泄漏

使用说明 #

1. 将代码复制到Tampermonkey新建脚本中并保存
2. 打开任意Twitch频道页面，脚本会自动启动监控
3. 修改检查间隔：进入Tampermonkey脚本管理界面，找到该脚本的「存储」选项，添加checkInterval键并设置对应毫秒数（如10000=10秒）

替代方案说明 #

若不想使用Tampermonkey，可将逻辑封装为浏览器扩展，但开发复杂度更高。Tampermonkey是满足多标签后台运行需求的最便捷实现方式。

内容的提问来源于stack exchange，提问作者DnYI