基于Puppeteer的智能网页监控工具：实现自动化价格与内容追踪

1. 项目概述：一个能“盯梢”网页的智能助手

最近在折腾AI Agent和自动化流程，发现一个挺有意思的需求：如何让机器自动帮我们盯着网页，一旦有变化就立刻通知。比如，电商商品降价了、心仪的公司发布了新职位、关注的博客更新了文章，或者某个稀缺商品补货了。手动刷新不仅效率低，还容易错过时机。于是，我花时间研究并实践了plum-zhang/openclaw-webwatcher这个项目，它是一个基于Node.js的智能网页监控技能，可以无缝集成到OpenClaw这类AI Agent框架中，实现7x24小时无人值守的网页监控。

简单来说，WebWatcher就是一个网页内容变化的“哨兵”。它的核心价值在于，将我们日常需要手动、重复进行的“查看-判断”动作自动化。你不再需要每天定时去刷某个页面，而是告诉它“帮我盯着这个链接，价格低于3500或者内容有变动就喊我”。它背后利用Puppeteer驱动真实浏览器，能处理需要登录、有复杂JavaScript渲染的现代网页，规避了简单的HTTP请求抓取经常遇到的反爬问题。对于开发者、运营、电商从业者或者任何有信息监控需求的人来说，这无疑是一个提升效率的利器。接下来，我将从设计思路、核心实现、实操细节到避坑经验，完整拆解如何构建和使用这样一个工具。

2. 核心设计思路：为什么选择“真实浏览器”方案？

在动手之前，我们得先想清楚：监控网页变化，技术路线不止一条。为什么WebWatcher选择了基于Puppeteer连接已有Chrome实例这条看似“笨重”的路？这背后是对抗现代Web复杂性和追求稳定性的权衡。

2.1 传统方案与瓶颈

最直接的方案是使用axios或node-fetch等库发起HTTP请求，获取页面HTML，然后通过cheerio解析并比较内容。这个方法轻量、速度快，对于静态内容为主的简单页面是可行的。但它的瓶颈非常明显：

1. 无法执行JavaScript：如今绝大多数网站（尤其是电商、社交、内容平台）都严重依赖前端JS渲染。直接请求得到的HTML可能只是一个空壳或加载骨架，关键数据（如价格、库存状态）需要通过JS执行后才能生成并插入DOM。
2. 难以处理登录状态：很多需要监控的页面（如个人订单页面、会员专享价）需要登录后才能访问。纯HTTP方案处理Cookie、Session、Token等认证状态非常繁琐，且容易被风控。
3. 极易触发反爬机制：频繁的、特征明显的HTTP请求很容易被服务器识别为爬虫，导致IP被封禁、返回验证码或虚假数据。

2.2 WebWatcher的解决方案：Puppeteer + 远程调试

WebWatcher采用了更接近真实用户行为的方案：通过Puppeteer连接一个已经启动并登录好的Chrome浏览器实例。这个设计非常巧妙：

• 原理：它使用puppeteer-core（Puppeteer的精简版，不自带Chromium）连接到通过--remote-debugging-port参数启动的Chrome。这意味着你可以先手动打开浏览器，完成所有复杂的登录操作（输入账号密码、通过滑块验证等），然后让Puppeteer接管这个已经存在状态的浏览器标签页。
• 优势：
  • 绕过登录：所有Cookie、LocalStorage等状态都已保留，监控脚本直接享有你的登录身份。
  • 完整渲染：浏览器会像正常用户访问一样，完整地加载并执行所有JS、CSS，拿到最终的DOM树。
  • 降低风控：浏览器指纹、网络行为更接近真人，被反爬系统标记的概率大大降低。
  • 可视化调试：你甚至可以看着浏览器自动执行操作过程，便于调试选择器。

注意：这种方案会消耗更多内存和CPU资源，因为需要运行一个完整的浏览器实例。但对于可靠性要求高的监控任务，这种开销是值得的。WebWatcher通过复用浏览器实例和页面，在一定程度上优化了资源占用。

2.3 监控逻辑与数据流设计

整个工具的运作逻辑可以概括为以下几个步骤，构成了一个清晰的自动化工作流：

1. 任务配置：用户通过命令行或配置文件，定义监控目标（URL）、监控类型（价格/内容）、检查间隔、通知阈值等。
2. 浏览器会话管理：工具启动或连接到指定的Chrome实例。
3. 页面导航与渲染：在浏览器中打开目标URL，等待页面完全加载（包括网络空闲和特定元素出现）。
4. 内容提取：根据配置的选择器（如.price）或内置的智能规则（如自动识别价格数字），从渲染好的DOM中提取目标内容。
5. 变化检测：将本次提取的内容与上一次的历史记录进行对比。对比算法通常是计算内容的哈希值（如MD5），哈希不同则判定为有变化。对于价格监控，还会进行数值比较。
6. 决策与通知：如果检测到变化（或价格低于目标价），则触发通知逻辑，通过集成的渠道（如飞书机器人、邮件）发送警报。
7. 历史记录：无论是否有变化，本次的快照（HTML或提取的数据）和时间戳都会被保存到本地文件系统中，形成可追溯的历史记录。

这个数据流设计确保了监控过程的可观测性和可回溯性。一旦收到通知，你可以立刻去查看保存的页面快照，确认变化细节，避免了“狼来了”的误报或信息不全的尴尬。

3. 环境准备与项目初始化

理论清楚了，我们开始动手。首先需要把项目跑起来。WebWatcher是一个Node.js项目，因此对运行环境有基本要求。

3.1 系统与软件要求

• Node.js：版本14或以上。建议使用16 LTS或18 LTS等稳定版本。你可以使用nvm（Node Version Manager）来轻松管理和切换不同版本。
• 包管理器：npm或yarn。项目提供的示例命令使用npm。
• Chrome/Chromium浏览器：必须安装。在macOS上通常是Google Chrome，在Linux上可能是chromium-browser。工具需要启动带有远程调试功能的浏览器实例。
• 项目代码：从GitHub克隆plum-zhang/openclaw-webwatcher仓库，或者如果你在OpenClaw框架内使用，它可能已经作为技能（Skill）内置。

3.2 依赖安装与目录结构

假设你已经将项目代码放置在了OpenClaw的技能目录下，典型的初始化步骤如下：

# 进入项目目录（根据你的实际路径调整） cd ~/.openclaw/workspace/skills/webwatcher-demo # 安装项目依赖 npm install

执行npm install后，会安装package.json中定义的所有依赖，核心包括puppeteer-core（用于控制浏览器）、node-schedule或类似库（用于定时任务）、以及可能用于通知的SDK（如飞书、nodemailer）。

安装完成后，了解下项目的数据存储约定很重要，这关系到你的监控历史保存在哪里：

~/.openclaw/workspace/data/webwatcher/ # 数据根目录 ├── history/ # JSON格式的历史记录文件，按任务ID存储每次检查的结果和元数据 │ └── task-xxx.json └── snapshots/ # 页面HTML快照，用于深度回溯和对比，文件名包含时间戳 └── task-xxx-2026-03-07.html

实操心得：建议定期清理snapshots/目录，因为保存完整的HTML页面会占用较多磁盘空间。对于长期监控任务，可以修改配置，只保存变化时的快照，或者定期归档旧数据。

3.3 启动远程调试浏览器（关键步骤）

这是整个流程中最关键的一步，也是新手最容易卡住的地方。WebWatcher需要连接一个开启了远程调试端口的Chrome实例。

标准操作流程：

1. 通过工具命令启动（推荐）：

   node webwatcher.js browser

   这个命令会尝试执行一个预定义的脚本，在macOS上通常是open -a "Google Chrome" --args --remote-debugging-port=9222 --user-data-dir="..."。如果成功，你会看到一个新的Chrome窗口被打开。

2. 手动启动（备选方案）： 如果上述命令失败（可能因为浏览器路径不同或权限问题），你需要手动在终端执行启动命令。务必关闭所有已打开的Chrome窗口，然后执行：

   # macOS 示例 open -a "Google Chrome" --args --remote-debugging-port=9222 --user-data-dir="$HOME/.openclaw/workspace/data/webwatcher/browser-data" # Linux 示例 (假设Chrome可执行文件路径) google-chrome-stable --remote-debugging-port=9222 --user-data-dir="/path/to/your/custom/profile"

   • --remote-debugging-port=9222：指定调试端口，Puppeteer将通过ws://localhost:9222连接。
   • --user-data-dir：指定一个独立的用户数据目录。这至关重要！它确保你在这个浏览器实例中的操作（如登录）与日常使用的Chrome隔离，并且能被Puppeteer稳定连接。使用工具提供的默认路径或自定义一个固定路径。

3. 完成登录： 浏览器启动后，手动访问你需要监控的网站（如京东、淘宝、招聘网站）并完成登录。记住，所有后续的自动操作都将继承这个会话状态。

4. 验证连接： 保持这个浏览器窗口打开。打开另一个终端，运行一个简单的检查命令，测试连接是否正常：

   node webwatcher.js check --url "https://www.baidu.com" --type content

   如果返回了页面标题或内容，说明浏览器连接成功。

重要警告：这个用于远程调试的浏览器窗口不能关闭！一旦关闭，WebWatcher就失去了连接对象，所有监控任务都会失败。你可以将其最小化到后台运行。

4. 核心功能实操：从价格监控到内容追踪

环境准备好后，我们就可以开始真正的监控任务了。WebWatcher提供了几个核心命令，覆盖了最常见的监控场景。

4.1 场景一：电商价格监控与降价提醒

这是最经典的应用。假设你想在京东上盯着一款笔记本电脑，希望在价格低于3500元时立即收到通知。

分步操作：

1. 确保远程调试浏览器已启动并登录京东。如果你还没登录，手动在打开的Chrome窗口里访问jd.com完成登录。

2. 执行价格监控命令：

   node webwatcher.js price \ --url "https://item.jd.com/100327533584.html" \ --target 3500 \ --interval 30m \ --name "联想拯救者笔记本"

   • --url: 商品详情页的完整URL。
   • --target: 你的目标价格阈值。当工具检测到的价格低于或等于此值时，会触发通知。
   • --interval: 检查频率。30m表示每30分钟检查一次。支持m（分钟）、h（小时）、d（天）。
   • --name: 为这个监控任务起个名字，方便在通知和历史记录中识别。

3. 工具如何工作：

   • 工具会每30分钟启动一次检查循环。
   • 每次检查时，Puppeteer会控制浏览器打开你指定的商品页面。
   • 它会尝试智能地定位页面中的价格元素。通常，它会寻找包含人民币符号（¥）和数字的DOM节点。你也可以通过--selector参数手动指定更精确的CSS选择器（如.price.J-p-100327533584）。
   • 提取价格数字，与历史记录中的上一次价格比较。
   • 如果价格发生变化且新价格低于等于3500，则触发配置好的通知（如飞书消息）。
   • 无论价格是否变化，本次检查的结果（价格、时间）都会被记录到history/目录下的JSON文件中。

实操心得：选择器的精准定位自动识别价格在简单页面有效，但在复杂页面可能抓错。强烈建议手动指定选择器。操作方法是：在已登录的调试浏览器中，打开商品页，按F12打开开发者工具，使用元素选择工具（箭头图标）点击价格数字。在Elements面板中，右键点击高亮的元素，选择Copy->Copy selector。你会得到一个类似#price > span.price的字符串。将它作为--selector参数的值，能极大提高抓取准确性。

4.2 场景二：网页内容变化监控

除了价格，任何网页的内容更新都可以监控，比如博客更新、新闻发布、招聘信息列表变动。

基础监控：

node webwatcher.js monitor \ --url "https://blog.example.com/latest" \ --interval 6h \ --name "技术博客更新"

这个命令会每6小时检查一次该页面。默认情况下，它会计算整个页面body元素内部HTML的哈希值。只要页面有任何细微变动（哪怕是一个广告位轮换），哈希值就会变，从而触发“内容已更新”的通知。这比较粗糙，可能产生很多无关通知。

精准监控（使用选择器）： 如果你只关心页面中特定区域的变化，比如一个文章列表容器，可以使用--selector参数。

node webwatcher.js monitor \ --url "https://company.com/careers" \ --selector "#job-list-container" \ --interval 12h \ --name "A公司招聘岗位"

这样，工具只会计算#job-list-container这个DIV内部内容的变化哈希。只有当招聘列表真的新增或删除了职位时，才会触发通知，过滤了页头、页脚等无关区域的变动。

4.3 场景三：库存状态监控（抢购助手）

这个场景可以看作是内容监控的一个特例，目标是页面中表示库存状态的文本或元素，比如“有货”、“立即购买”按钮从灰色变为亮色。

node webwatcher.js monitor \ --url "https://store.com/hard-to-get-product" \ --selector ".buy-btn:not(.disabled)" \ --interval 2m \ --name "PS5补货监控"

这里的逻辑是：每2分钟检查一次.buy-btn按钮是否存在且不包含.disabled类。如果选择器能匹配到元素（即按钮变为可点击状态），说明库存状态从“无货”变为“有货”，工具会检测到内容变化（从无到有），从而触发通知。你可以利用这个通知第一时间进行抢购。

4.4 单次检查与调试

在设置长期监控任务前，或者为了调试选择器，可以使用check命令进行单次检查。

# 检查价格 node webwatcher.js check --url "https://item.jd.com/xxx.html" --type price # 检查特定元素内容 node webwatcher.js check --url "https://example.com" --selector ".stock-info"

这个命令会立即执行一次抓取，并将提取到的内容打印在终端，方便你确认配置是否正确，无需等待定时任务。

5. 高级配置与集成方案

当基础功能满足需求后，为了更稳定、更自动化地运行，我们需要了解一些高级配置和集成方法。

5.1 使用配置文件管理复杂任务

对于需要长期运行、参数复杂的监控任务，使用命令行参数不够方便。WebWatcher支持通过config.json配置文件来定义任务。

创建配置文件：在项目根目录或指定路径下创建一个config.json文件。

{ "tasks": [ { "name": "每日显卡价格监控", "url": "https://item.jd.com/100012014774.html", "type": "price", "selector": ".price.J-p-100012014774", "interval": "1h", "target": 4500, "notify": ["feishu"] }, { "name": "科技新闻监控", "url": "https://news.example.com/tech", "type": "monitor", "selector": ".article-list", "interval": "4h", "notify": ["email"] } ], "notifications": { "feishu": { "webhook": "https://open.feishu.cn/open-apis/bot/v2/hook/your-webhook-token" }, "email": { "host": "smtp.gmail.com", "port": 587, "secure": false, "auth": { "user": "your-email@gmail.com", "pass": "your-app-password" }, "to": "your-notification-email@example.com" } } }

然后，可以通过指定配置文件来启动监控：

node webwatcher.js start --config ./config.json

这种方式便于版本管理（用Git管理配置文件）、一键部署多个任务，并且将敏感信息（如通知密钥）从命令行历史中分离，更安全。

5.2 通知渠道的配置与扩展

WebWatcher支持多种通知方式。核心是修改代码中的通知模块或配置文件。

• 飞书群机器人：最推荐的方式之一，即时性强。你需要在飞书群里添加一个“自定义机器人”，获取Webhook地址。将其填入配置文件的notifications.feishu.webhook字段。工具在触发条件时，会向这个地址发送一个POST请求，消息就会出现在群里。
• 邮件通知：适合不追求即时性的场景。需要配置SMTP服务器信息（如Gmail、QQ邮箱、企业邮箱）。注意，很多邮箱服务商需要使用“授权码”而非登录密码。配置正确后，价格变化或内容更新的摘要信息会发送到指定邮箱。
• 扩展其他渠道：工具的通知模块通常是可扩展的。你可以参考feishu.js或email.js的写法，创建新的通知模块，比如集成Server酱（微信推送）、钉钉机器人、Telegram Bot等，只需实现一个send(message)函数即可。

5.3 后台持久化运行

在本地终端直接运行node webwatcher.js price ...，关闭终端或电脑睡眠，任务就停止了。对于需要7x24小时运行的监控，必须将其部署为后台服务。

方案一：使用系统进程管理器（推荐）

• Linux/macOS (使用 pm2):

  # 全局安装pm2 npm install -g pm2 # 使用pm2启动监控任务，并命名为‘webwatcher-price’ pm2 start webwatcher.js --name "webwatcher-price" -- price --url "..." --target 3500 --interval 30m # 设置开机自启 pm2 startup pm2 save # 查看日志 pm2 logs webwatcher-price

  PM2可以守护进程，崩溃自动重启，并管理日志输出。

• Windows (使用 NSSM): NSSM可以将任何命令行程序封装为Windows服务。下载NSSM后，通过GUI界面将node webwatcher.js price ...这条命令安装为服务，并设置为自动启动。

方案二：使用定时任务（Cron）如果你希望更精确地控制执行时间，或者监控任务不多，可以使用系统的Cron（Linux/macOS）或任务计划程序（Windows）来定时执行check命令，并通过重定向输出到日志文件来记录结果。但这需要自己处理状态保持和错误重试，不如方案一 robust。

6. 常见问题排查与实战经验

在实际使用中，你肯定会遇到各种问题。下面是我踩过的一些坑和解决方案。

6.1 浏览器连接失败

• 问题：运行命令后报错，提示无法连接到浏览器或超时。
• 排查：
  1. 检查浏览器是否启动：确认你用于远程调试的Chrome窗口是否还在运行。不能关闭。
  2. 检查端口占用：--remote-debugging-port=9222端口可能被其他进程占用。可以尝试更换端口，比如9223，并同步修改工具中连接端口的配置（如果工具支持配置）。
  3. 检查用户数据目录：确保--user-data-dir指向的路径是唯一的，且没有其他Chrome进程在使用它。有时上次异常退出可能导致锁文件残留，可以尝试删除该目录下的SingletonLock等文件。
  4. 浏览器路径问题：在非macOS系统上，工具内启动浏览器的命令可能需要调整。最稳妥的方式是始终手动启动浏览器。

6.2 页面内容抓取为空或错误

• 问题：工具运行了，但日志显示抓取到的价格是null或0，或者抓到了无关文本。
• 排查：
  1. 页面未完全加载：现代网页异步加载内容多。工具默认会等待networkidle0（网络空闲），但有时还不够。可以尝试在配置中增加额外的等待时间或等待特定元素出现。
     • 修改思路：在Puppeteer代码中，在page.goto后添加page.waitForSelector(‘.your-price-selector’, { timeout: 10000 })。
  2. 选择器失效：电商网站经常改版，CSS选择器可能变化。需要定期检查并更新--selector参数。使用开发者工具的Copy selector功能是最快的。
  3. 遇到反爬：即使使用真实浏览器，过于频繁的访问也可能触发验证码。解决方案是：
     • 增加间隔时间：将--interval从5m调整为30m或更长。
     • 模拟人类行为：在Puppeteer脚本中随机加入page.waitForTimeout(2000 + Math.random() * 3000)这样的延迟，并随机滚动页面。
     • 使用代理IP池：高级玩法，通过--proxy-server参数为浏览器配置代理，并轮换IP。

6.3 通知未触发

• 问题：价格明明变了，但没有收到飞书或邮件通知。
• 排查：
  1. 检查通知配置：确认配置文件中的Webhook地址或SMTP信息是否正确无误。飞书机器人可能被禁用，需要重新开启。
  2. 检查触发逻辑：对于价格监控，确认是“低于等于”目标价才触发。如果你的目标价是3500，当前价从3600降到3550，是不会触发的。
  3. 查看运行日志：通过pm2 logs或直接运行查看终端输出，看是否有“Sending notification to Feishu”之类的日志，以及后续是否有错误信息。网络问题可能导致通知发送失败。
  4. 检查历史记录：查看history/task-xxx.json文件，确认工具是否正确地检测到了价格变化。可能变化检测本身就没成功。

6.4 性能与资源优化

长时间运行多个监控任务可能会占用不少内存。

• 合并同类任务：如果监控同一个网站的多个商品，可以考虑写一个脚本，在一个浏览器页面内依次访问多个URL，而不是为每个URL都创建新页面。
• 合理设置间隔：非抢购类需求，没必要设置几分钟的间隔。根据信息更新频率，设置为几小时甚至一天一次即可。
• 定期重启浏览器：可以编写一个辅助脚本，每天定时重启一次远程调试的Chrome浏览器，释放积累的内存。需要配合PM2等工具，在重启浏览器后重新连接。

6.5 数据安全与隐私

• Cookie与登录态：--user-data-dir目录下存储了你的浏览器配置文件，包括所有网站的Cookie。请妥善保管这个目录，不要泄露。
• 配置文件安全：config.json里可能含有飞书机器人Webhook、邮箱密码等敏感信息。千万不要将其提交到公开的Git仓库。建议使用config.example.json存储模板，将真实的config.json加入.gitignore。或者使用环境变量来存储敏感信息。

通过以上这些实战经验和问题排查方法，你应该能解决使用WebWatcher过程中遇到的大部分挑战。这个工具的核心价值在于将复杂的网页监控需求，封装成几条简单的命令，让开发者能快速搭建起属于自己的自动化信息触角。无论是用于个人购物、竞品分析还是资讯追踪，它都是一个强大而灵活的起点。