好，掘金的风格偏技术博客，需要比Reddit更长、更有干货。直接给你：
标题： 我做了一个AI驱动的网页变化监控插件，分享一下技术方案和踩坑经历
正文：
背景
做跨境电商的朋友应该都有这个痛点：需要每天手动打开一堆竞品页面，看看价格有没有变、有没有上新品、库存状态怎么样。页面少还好，一旦超过十几个就很崩溃。
市面上有一些网页监控工具，但大多数只做简单的文本 diff——页面上任何一个字符变了都会通知你，时间戳更新、session token 变化、广告位轮换全部混在一起，噪音太多，反而增加了筛选成本。
所以我做了 WebSense AI，一个 Chrome 扩展，核心思路是：不只告诉你"变了"，还用 AI 告诉你"变了什么"以及"这个变化重不重要"。
核心功能
- 可视化点选监控：直接在页面上点击你想监控的元素，不需要写 CSS 选择器
- 四层内容提取引擎：标签页注入 → 离屏 DOM → 后台标签页 → 正则兜底，完美支持 React/Vue/Next.js 等动态渲染页面
- AI 智能分析：自动过滤无意义变化，对变化进行分类（价格/内容/状态）和严重程度分级（轻微/中等/重大）
- 多渠道通知：桌面推送 + Webhook（Slack、Discord、钉钉、飞书、企业微信、n8n、Zapier）
- 变化历史：完整的 before/after 对比和 AI 生成的变化摘要
技术方案：四层提取引擎
做网页内容提取最头疼的问题是：现代网页大量使用 JS 动态渲染，直接 fetch HTML 拿到的很可能是一个空壳。
我的解决方案是四层降级策略：
- 标签页注入：优先在当前标签页注入脚本提取 DOM 内容，最准确
- 离屏 DOM：如果标签页不可用，用 offscreen document 渲染页面
- 后台标签页：创建不可见标签页加载完整页面
- 正则兜底：以上全部失败时，对原始 HTML 做正则匹配提取关键信息
这样无论页面是 SSR 还是 CSR，基本都能拿到准确内容。
AI 分析的处理逻辑
拿到变化内容后，不是直接推给用户，而是先过 AI：
- 对比新旧内容，判断是否属于无意义变化（时间戳、随机 ID、广告轮换等）
- 如果是有意义的变化，分类为价格变动/内容更新/状态变化
- 给出严重程度评级和一句话摘要
免费用户每月 100 次 AI 分析，也支持填入自己的 OpenAI API Key 无限使用。
目前状态
- 免费版：10 个监控，最短 1 小时间隔，100 次/月 AI 分析
- Pro 版即将推出：50 个监控，最短 5 分钟间隔
- 中英文双语界面
Chrome Web Store： chromewebstore.google.com/detail/webs…
目前还在早期阶段，非常希望听到大家的反馈和建议，尤其是使用场景方面——除了电商竞品监控，你们还会用网页监控做什么？
