无硬件网页监控：用Userscript实现自动化提醒

1. 项目概述：当“跳伞”遇上“无MCU”的自动化提醒

如果你是一名狂热的跳伞爱好者，或者像我一样，需要频繁地关注某个特定网站（比如跳伞俱乐部的空位预约页面、抢票网站、库存监控页面）的状态变化，那么你肯定对“手动刷新”这件事深恶痛绝。传统的自动化方案，无论是用树莓派（Raspberry Pi）还是ESP8266这类微控制器（Microcontroller），都需要额外的硬件、供电、编程和网络配置，门槛不低。而“Skydive Auto Reminder - Without A Microcontroller”这个项目标题，恰恰指向了一种更轻巧、更直接的思路：完全在浏览器层面，利用用户脚本（Userscript）实现网页监控与自动化提醒，彻底摆脱对额外硬件的依赖。

这个项目的核心价值在于其“无侵入性”和“零硬件成本”。它不要求你购买任何开发板，不需要焊接电路，甚至不需要离开你日常使用的电脑。所有逻辑都运行在你已经打开的浏览器里。结合网络热词中高频出现的“Userscript”和“Violentmonkey”（一个流行的用户脚本管理器），我们可以清晰地勾勒出它的技术轮廓：编写一个用户脚本，注入到目标网页中，定时检查特定元素（如按钮文本、库存数量、日期状态）的变化，一旦满足预设条件（如“有位置”或“状态更新”），就通过浏览器通知、播放声音等方式提醒用户。

这听起来简单，但实现一个稳定、可靠且用户友好的脚本，需要考虑的细节远超一个简单的setInterval循环。从如何精准定位动态变化的网页元素，到如何处理网站的反爬机制，再到设计一个合理的检查频率以避免被封IP，每一步都需要结合前端开发经验和实际网络环境进行权衡。接下来，我将拆解这个无硬件网页监控提醒系统的完整实现方案，分享从思路设计到避坑实操的全过程。

2. 技术方案选型与核心思路拆解

2.1 为何放弃微控制器（MCU）方案？

在深入用户脚本方案之前，有必要先理解我们为何放弃更“极客”的MCU方案。像ESP8266这样的物联网模块，其经典应用场景是作为独立设备，通过HTTP请求轮询目标网页，解析HTML后通过GPIO控制LED、蜂鸣器，甚至通过Wi-Fi发送消息。这套流程的优点是独立、可24小时运行。但缺点同样明显：

1. 环境配置复杂：需要搭建Arduino或ESP-IDF开发环境，处理网络连接（Wi-Fi配网）、HTML解析库（如ArduinoHttpClient和ArduinoJson）的集成，对于非嵌入式开发者而言学习曲线陡峭。
2. 硬件与维护成本：你需要一块ESP8266开发板、USB数据线、可能的电源模块，并且要保证它长期稳定供电和联网。一旦目标网站改版，你需要重新烧录固件。
3. 反爬虫风险高：从服务器视角看，一个来自ESP8266硬件的、高频的、带有固定User-Agent的请求，是典型的爬虫行为，极易被识别并封禁。

相比之下，用户脚本方案运行在真实的浏览器环境中：

• 身份真实：它使用你的浏览器Cookie、Session和真实的User-Agent，访问行为与人工操作无异，极大降低了被反爬机制拦截的风险。
• 零硬件成本：无需额外设备。
• 开发调试便捷：使用熟悉的JavaScript，配合浏览器开发者工具，可以实时调试，效率极高。
• 易于部署与更新：安装脚本管理器扩展，粘贴脚本代码即可完成部署。网站改版后，更新脚本代码也无需触动硬件。

2.2 用户脚本（Userscript）与脚本管理器

用户脚本是一段JavaScript代码，它可以在页面加载时或加载后注入到网页中，从而修改页面内容、添加功能或自动化操作。要让浏览器运行用户脚本，需要一个“管理器”作为中介。Violentmonkey和Tampermonkey是目前最主流的选择。它们本质上都是浏览器扩展，提供脚本的安装、管理、启用/禁用，以及一个安全的运行沙箱。

选择 Violentmonkey 的理由： 虽然热词中也提到了Tampermonkey，但Violentmonkey是开源项目，在隐私方面更透明，且功能完全满足我们的需求。它提供了完善的API，例如GM_notification用于发送系统通知、GM_xmlhttpRequest用于发起跨域请求（虽然本项目可能不需要），以及GM_getValue/GM_setValue用于在脚本多次运行间存储数据（如上次检查的状态）。

2.3 整体工作流程设计

一个健壮的网页监控提醒脚本，其工作流程绝非简单的“循环检查”。我们需要考虑错误处理、状态持久化、用户交互和性能。以下是一个详细的设计流程：

1. 脚本初始化与配置：脚本头部通过元数据（@name,@match,@grant等）声明其名称、生效的网站URL以及需要使用的API权限。
2. 等待页面就绪：由于网页元素是动态加载的，脚本不能立即执行。需要监听DOMContentLoaded事件，或使用MutationObserver等待特定元素出现。
3. 定义监控目标与检查函数：明确要监控的CSS选择器（如.booking-status:contains(“Available”)）和要检查的属性（如innerText,classList）。编写一个checkStatus()函数，执行DOM查询和逻辑判断。
4. 实现智能轮询机制：使用setInterval或setTimeout进行循环检查，但频率必须合理（如30-60秒一次）。更优的方案是结合requestAnimationFrame或监听网络空闲（通过MutationObserver观察特定区域变化后触发检查），以减少不必要的性能消耗。
5. 状态变化检测与提醒：在checkStatus()中，将当前获取的状态与上一次存储的状态（使用GM_getValue保存）进行对比。如果状态发生变化且符合提醒条件（如从“已满”变为“有空位”），则触发提醒。
6. 触发提醒：调用GM_notification发送系统通知，同时可以播放一段音频（new Audio(‘alert.mp3’).play()）以增强提示效果。
7. 提供用户控制界面（可选但推荐）：在页面上注入一个小的控制面板（浮动按钮或侧边栏），允许用户手动触发检查、临时禁用监控、修改检查间隔等。这大大提升了脚本的友好度和实用性。
8. 错误处理与日志：用try...catch包裹核心逻辑，将错误信息通过console.log输出，便于调试。对于网络超时或元素丢失的情况，应有重试或退避机制。

注意：在编写针对特定网站（尤其是商业网站）的自动化脚本时，务必尊重网站的robots.txt协议和服务条款。过高的请求频率可能对服务器造成压力，甚至导致你的账户被封禁。本方案的核心优势在于模拟人类浏览行为，但仍需保持克制和道德。

3. 核心代码实现与关键细节解析

下面，我将以监控一个虚构的跳伞预约网站“SkydiveBooker.com”为例，展示核心代码的实现。假设我们需要监控一个ID为#slot-status的<div>，当其文本内容从“FULL”变为任何其他内容（如“1 SPOT LEFT”）时，发出提醒。

3.1 脚本元数据与基础框架

首先，是脚本的头部元数据，它告诉Violentmonkey脚本的基本信息。

// ==UserScript== // @name Skydive Slot Auto Reminder // @namespace http://tampermonkey.net/ // @version 1.0 // @description 监控跳伞预约网站空位状态，无需硬件，自动提醒！ // @author You // @match https://www.skydivebooker.com/booking/* // @grant GM_notification // @grant GM_getValue // @grant GM_setValue // @grant GM_addStyle // ==/UserScript== (function() { 'use strict'; // 你的代码将写在这里 })();

• @match：指定脚本仅在匹配此模式的URL上运行。使用*作为通配符。
• @grant：声明脚本需要使用的Violentmonkey API。这是必须的，否则GM_*函数将不可用。
• GM_addStyle：用于向页面注入CSS样式，方便我们美化自己添加的控制面板。

3.2 状态检查与持久化逻辑

这是脚本的核心大脑。我们需要定义一个函数来获取当前状态，并与历史状态比较。

// 配置项 const CHECK_INTERVAL = 45000; // 检查间隔，45秒 const TARGET_SELECTOR = '#slot-status'; // 目标元素的选择器 const STORAGE_KEY = 'lastStatus'; // 存储键名 let checkTimer = null; let lastKnownStatus = GM_getValue(STORAGE_KEY, ''); // 获取上次状态，默认为空 function checkStatus() { try { const targetElement = document.querySelector(TARGET_SELECTOR); if (!targetElement) { console.warn(`[Skydive Reminder] 未找到元素: ${TARGET_SELECTOR}`); return; // 元素不存在，可能页面结构有变或未加载完 } const currentStatus = targetElement.innerText.trim(); console.log(`[Skydive Reminder] 当前状态: "${currentStatus}", 上次状态: "${lastKnownStatus}"`); // 状态变化逻辑：上次是“FULL”，现在不是“FULL”了 if (lastKnownStatus === 'FULL' && currentStatus !== 'FULL' && currentStatus !== '') { triggerAlert(currentStatus); } // 无论是否提醒，都更新存储的状态（避免重复提醒） if (currentStatus !== lastKnownStatus) { GM_setValue(STORAGE_KEY, currentStatus); lastKnownStatus = currentStatus; } } catch (error) { console.error(`[Skydive Reminder] 检查状态时出错:`, error); } } function triggerAlert(newStatus) { // 发送系统通知 GM_notification({ title: '🎉 跳伞空位更新！', text: `当前状态: ${newStatus}\n点击通知前往查看。`, silent: false, // 是否静音 timeout: 10000, // 10秒后自动关闭 onclick: () => { window.focus(); } // 点击通知时聚焦浏览器窗口 }); // 播放提示音（可选） try { const audio = new Audio('https://assets.mixkit.co/sfx/preview/mixkit-alarm-digital-clock-beep-989.mp3'); audio.volume = 0.3; audio.play(); } catch (e) { console.log('音频播放失败，不影响主要功能。'); } // 也可以闪烁浏览器标签页标题 flashTitle(`有空位！${newStatus}`); }

关键细节解析：

1. 错误处理：try...catch包裹了核心查询逻辑，防止因为元素未加载或选择器失效导致整个脚本崩溃。
2. 状态持久化：GM_getValue和GM_setValue用于在浏览器存储中保存上一次的状态。这确保了即使你关闭浏览器再打开，脚本也能知道之前的状态，避免重复提醒。
3. 变化检测逻辑：示例中逻辑是“从FULL变为非FULL”。你可以根据实际情况修改，比如监控特定CSS类名、监控数字变化（如innerText匹配正则表达式/\d+/）等。
4. 提醒方式多元化：GM_notification是主要方式。添加声音和标题闪烁能提供多感官提示，确保你不会错过。

3.3 智能启动与用户界面集成

脚本不能简单地在页面加载后立即开始疯狂轮询。我们需要等待目标元素出现，并提供给用户控制的能力。

function initReminder() { // 等待目标元素出现 const observer = new MutationObserver((mutations, obs) => { const targetElement = document.querySelector(TARGET_SELECTOR); if (targetElement) { console.log(`[Skydive Reminder] 目标元素已加载，开始监控。`); obs.disconnect(); // 停止观察 startMonitoring(); createControlPanel(); // 创建用户控制面板 } }); // 开始观察整个body的子元素变化 observer.observe(document.body, { childList: true, subtree: true }); // 设置一个超时，防止元素永远不出现 setTimeout(() => { if (!document.querySelector(TARGET_SELECTOR)) { console.error(`[Skydive Reminder] 超时，未找到目标元素。请检查选择器或页面结构。`); observer.disconnect(); } }, 30000); // 等待30秒 } function startMonitoring() { if (checkTimer) { clearInterval(checkTimer); } // 先立即检查一次 checkStatus(); // 然后开始定时检查 checkTimer = setInterval(checkStatus, CHECK_INTERVAL); console.log(`[Skydive Reminder] 监控已启动，间隔 ${CHECK_INTERVAL/1000} 秒。`); } function stopMonitoring() { if (checkTimer) { clearInterval(checkTimer); checkTimer = null; console.log(`[Skydive Reminder] 监控已停止。`); } } // 页面加载完成后初始化 window.addEventListener('load', function() { // 给页面一点额外时间加载动态内容 setTimeout(initReminder, 2000); });

关键细节解析：

1. MutationObserver：这是现代Web API的利器。它比单纯使用setTimeout等待更高效。它监听DOM树的变化，一旦目标元素被添加到页面中，就立即触发回调，启动监控。用完后记得disconnect。
2. 超时保护：网络环境复杂，设置一个超时（如30秒）是必要的兜底策略。如果超时后元素仍未出现，则停止观察并报错，避免脚本空转。
3. window.onload：确保整个页面（包括图片等资源）加载完毕后再尝试初始化，提高稳定性。

3.4 创建用户控制面板

一个简单的浮动控制面板能极大提升体验。我们使用GM_addStyle添加样式，并用JavaScript创建DOM元素。

function createControlPanel() { GM_addStyle(` #skydive-reminder-panel { position: fixed; top: 20px; right: 20px; background: rgba(255, 255, 255, 0.95); border: 1px solid #ccc; border-radius: 8px; padding: 15px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); z-index: 9999; font-family: sans-serif; min-width: 200px; } #skydive-reminder-panel h3 { margin-top: 0; color: #333; border-bottom: 1px solid #eee; padding-bottom: 8px; } #skydive-reminder-panel button { display: block; width: 100%; margin: 8px 0; padding: 8px; background: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; } #skydive-reminder-panel button:hover { background: #45a049; } #skydive-reminder-panel button.stop { background: #f44336; } #skydive-reminder-panel button.stop:hover { background: #d32f2f; } #skydive-reminder-status { font-size: 0.9em; color: #666; margin-top: 10px; word-break: break-all; } `); const panel = document.createElement('div'); panel.id = 'skydive-reminder-panel'; panel.innerHTML = ` <h3>🪂 空位监控器</h3> <p>状态: <span id="reminder-active-indicator" style="color:green; font-weight:bold;">运行中</span></p> <button id="reminder-manual-check">立即检查</button> <button id="reminder-toggle-btn" class="stop">暂停监控</button> <button id="reminder-test-alert">测试提醒</button> <div id="skydive-reminder-status">上次检查: --</div> `; document.body.appendChild(panel); // 绑定按钮事件 document.getElementById('reminder-manual-check').addEventListener('click', checkStatus); document.getElementById('reminder-test-alert').addEventListener('click', () => triggerAlert('测试状态')); document.getElementById('reminder-toggle-btn').addEventListener('click', function() { if (checkTimer) { stopMonitoring(); this.textContent = '启动监控'; this.className = ''; document.getElementById('reminder-active-indicator').textContent = '已暂停'; document.getElementById('reminder-active-indicator').style.color = 'red'; } else { startMonitoring(); this.textContent = '暂停监控'; this.className = 'stop'; document.getElementById('reminder-active-indicator').textContent = '运行中'; document.getElementById('reminder-active-indicator').style.color = 'green'; } }); // 更新状态显示 setInterval(() => { const statusEl = document.getElementById('skydive-reminder-status'); const targetEl = document.querySelector(TARGET_SELECTOR); statusEl.textContent = `上次检查: ${new Date().toLocaleTimeString()} | 当前状态: ${targetEl ? targetEl.innerText.trim() : 'N/A'}`; }, 5000); }

这个控制面板提供了手动检查、暂停/继续监控和测试提醒的功能，并实时显示监控状态和当前页面状态，让整个自动化过程完全透明、可控。

4. 高级优化与实战避坑指南

基础功能实现后，要让它成为一个健壮、可长期使用的工具，还需要考虑以下高级问题和避坑技巧。

4.1 应对动态内容与SPA（单页应用）

现代网站大量使用JavaScript动态渲染内容（如React, Vue, Angular）。目标元素可能不是一开始就存在于DOM中，甚至在用户交互后才会出现。单纯的MutationObserver观察document.body可能不够。

解决方案：

• 更精准的观察：如果知道内容会加载到某个特定容器（如<div id=”app”>），可以将observer.observe的目标设置为这个容器。
• 监听网络请求：如果状态变化伴随特定的API请求（如fetch或XMLHttpRequest），可以劫持这些请求方法，在请求完成后触发检查。这需要更高级的脚本技巧，并注意不要影响网站正常功能。
• 备用轮询策略：在MutationObserver启动后，依然保留一个较长间隔（如5分钟）的setInterval作为兜底，以防某些变化未被观察到。

4.2 优化性能与降低干扰

一个每45秒执行一次DOM查询和比较的脚本，对性能影响微乎其微。但为了极致优化和避免潜在问题：

• 使用requestIdleCallback：如果浏览器支持，可以用requestIdleCallback来安排检查任务，它会在浏览器空闲时执行，对用户体验影响最小。

  function scheduleCheck() { if (‘requestIdleCallback’ in window) { requestIdleCallback(() => checkStatus(), { timeout: 5000 }); } else { setTimeout(checkStatus, 0); } } // 然后用 scheduleCheck 替代直接调用 checkStatus

• 页面不可见时暂停：当用户切换到其他标签页或最小化浏览器时，可以暂停监控。

  document.addEventListener(‘visibilitychange’, function() { if (document.hidden) { stopMonitoring(); } else { startMonitoring(); } });

4.3 处理网站反爬与风控

虽然用户脚本模拟真人行为，但过于规律的请求仍可能被注意。

• 随机化检查间隔：不要使用固定的CHECK_INTERVAL。可以设置一个区间，如getRandomInterval(30000, 90000)，每次间隔在30到90秒之间随机。
• 模拟人类操作微延迟：在查询DOM前，可以随机等待一小段时间await sleep(Math.random() * 1000)。
• 尊重robots.txt：检查目标网站的robots.txt文件，看是否有针对用户代理的爬取限制。虽然用户脚本不是传统爬虫，但遵守规则是良好的网络公民行为。

4.4 脚本的安装、调试与更新

• 安装：在浏览器中安装Violentmonkey扩展，点击其图标，选择“添加新脚本”，将写好的代码粘贴进去保存即可。
• 调试：使用浏览器开发者工具（F12）的“控制台”（Console）查看脚本的console.log输出。在“源代码”（Sources）标签页中，找到“Violentmonkey”目录，可以给你的脚本设置断点进行调试。
• 更新：在Violentmonkey的管理面板中，找到对应脚本，点击编辑即可更新代码。对于公共脚本，可以设置更新URL实现自动更新。

4.5 常见问题排查速查表

问题现象	可能原因	排查步骤与解决方案
脚本完全不运行	1. 脚本未启用。 2.@matchURL模式不正确。 3. 网站使用了严格的CSP（内容安全策略）阻止脚本注入。	1. 检查Violentmonkey面板，确保脚本已启用。 2. 核对当前页面URL是否与@match模式匹配。可以使用@include或更宽泛的通配符测试。 3. 在控制台查看是否有CSP错误。Violentmonkey通常能处理大部分CSP，但极端情况可能需要调整脚本加载时机。
控制台报错“GM_* is not defined”	@grant声明缺失或错误。	确保脚本头部元数据中包含了所有用到的GM_*API的@grant声明。
找不到目标元素	1. CSS选择器错误或已过时。 2. 元素是动态加载的，脚本执行过早。 3. 元素在iframe内。	1. 用开发者工具的元素检查器，确认当前元素正确的选择器。 2. 确保使用了MutationObserver或延迟初始化。 3. 如果元素在iframe里，脚本需要运行在iframe的上下文中（通过@match匹配iframe的URL），这通常更复杂。
提醒不触发	1. 状态判断逻辑有误。 2.GM_getValue存储的值不正确或未初始化。 3. 通知权限被浏览器禁止。	1. 在checkStatus函数中添加详细的console.log，打印当前状态和上次状态，检查逻辑。 2. 检查存储的值。可以在控制台临时调用GM_getValue(‘lastStatus’)查看。 3. 检查浏览器设置，确保网站有发送通知的权限。
脚本导致页面卡顿	检查频率过高，或MutationObserver回调函数逻辑过重。	1. 增加检查间隔（如调到120秒）。 2. 在MutationObserver回调中使用setTimeout对检查函数进行防抖（debounce），避免短时间内多次触发。
在SPA中页面切换后脚本失效	SPA切换路由时不刷新页面，但脚本可能只在初始加载时运行一次。	监听SPA的路由变化事件（如window.addEventListener(‘popstate’, …)或劫持History API），在路由变化后重新执行initReminder()。

5. 扩展思路：从提醒到自动化操作

基础的提醒功能实现后，你可以根据需求进行功能扩展，使其真正成为一个“自动化助手”。

1. 自动点击/填充：当检测到有空位时，除了提醒，脚本可以自动帮你点击“预约”按钮，甚至填充表单信息（需谨慎，涉及隐私和安全）。这需要用到document.querySelector(‘.book-button’).click()和document.querySelector(‘#email’).value = ‘[e-mail]’。务必确保你了解并愿意承担自动操作带来的风险，例如误操作或违反网站条款。
2. 多平台聚合监控：一个脚本可以同时监控多个标签页或网站。使用GM_xmlhttpRequest（需申请@grant）可以在后台请求其他网页内容并解析，在一个控制面板里汇总所有信息。
3. 远程通知：结合免费的推送服务（如Pushover、Telegram Bot、Server酱），在状态变化时发送通知到你的手机，实现真正的离线提醒。这需要调用外部API，是向“轻量级服务器”方向迈进了一步，但核心逻辑仍运行在浏览器端。
4. 配置界面：将选择器、检查间隔、提醒条件等做成可配置的选项，通过GM_getValue/GM_setValue保存用户设置，并提供一个友好的设置页面。Violentmonkey支持通过// @resource引入HTML/CSS资源来构建复杂配置页。

通过“Skydive Auto Reminder - Without A Microcontroller”这个项目，我们实践了一种将复杂硬件需求转化为轻量级软件解决方案的思路。它证明了，对于许多场景下的网络自动化需求，我们手边最强大的工具——现代浏览器——本身就具备强大的可编程能力。掌握用户脚本开发，不仅能解决像跳伞预约这样的具体问题，更能为你打开一扇通往浏览器自动化世界的大门，让你以极低的成本提升数字生活的效率。