监控网页变化有多种方法，以下是常见方案

谷歌 Chrome手册 2026-04-09 2

浏览器扩展方案

专业监控扩展

Distill Web Monitor - 功能最全面
- 支持局部元素监控
- 可设置检查频率（1分钟至每月）
- 支持邮件、短信、推送通知
- 价格：免费版有限制，专业版$14.99/月
Visualping - 视觉变化检测
- 截图对比方式
- 支持价格监控、库存检查
- 价格：免费版3次/天，付费版$29/月起
Page Monitor - 轻量级选择
- 免费开源
- 支持CSS选择器定位
- 变化高亮显示

安装使用步骤

打开 Chrome 网上应用店
搜索上述扩展名称
点击“添加到 Chrome”
访问目标网页，点击扩展图标设置监控规则

开发者工具方案

控制台监控DOM变化

// 监听DOM变化
const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
        console.log('变化类型:', mutation.type);
        console.log('变化节点:', mutation.target);
    });
});
observer.observe(document.body, {
    childList: true,
    subtree: true,
    attributes: true,
    characterData: true
});
// 停止监控
// observer.disconnect();

网络请求监控

F12 → Network 标签
勾选 Preserve log
使用 Filter 筛选特定请求

编程脚本方案

Python + Selenium

from selenium import webdriver
import time
driver = webdriver.Chrome()
previous_content = ""
while True:
    driver.get("https://目标网站.com")
    current_content = driver.find_element("css选择器").text
    if current_content != previous_content:
        print("内容已更新:", current_content)
        previous_content = current_content
        # 发送通知代码
    time.sleep(60)  # 每分钟检查一次

Node.js + Puppeteer

const puppeteer = require('puppeteer');
async function monitorPage() {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    let previousContent = '';
    while(true) {
        await page.goto('https://目标网站.com');
        const currentContent = await page.$eval('css选择器', el => el.textContent);
        if(currentContent !== previousContent) {
            console.log('检测到变化:', currentContent);
            previousContent = currentContent;
        }
        await new Promise(resolve => setTimeout(resolve, 60000)); // 等待1分钟
    }
}