监控网页变化主要有以下几种方法，你可以根据需求选择

谷歌关于Google 2026-04-09 1

浏览器内置方法

Chrome开发者工具

网络面板：监控网络请求变化
元素面板：使用DOM断点监控元素变化
控制台：使用JavaScript代码监控

控制台JavaScript代码

// 监听DOM变化（推荐）
const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
        console.log('检测到变化:', mutation);
        // 具体处理逻辑
    });
});
// 开始观察
observer.observe(document.body, {
    childList: true,      // 子节点的添加删除
    subtree: true,        // 所有后代节点
    attributes: true,     // 属性变化
    characterData: true   // 文本内容变化
});
// 停止观察
// observer.disconnect();

// 监听特定元素内容变化
const target = document.querySelector('.your-selector');
let lastContent = target.innerHTML;
setInterval(() => {
    if (target.innerHTML !== lastContent) {
        console.log('内容已变化', new Date());
        lastContent = target.innerHTML;
        // 执行相应操作
    }
}, 1000); // 每秒检查一次

浏览器扩展程序

网页更新提醒扩展

Distill Web Monitor：功能强大，支持复杂监控
Page Monitor：轻量级，简单易用
Visualping：视觉变化监控
Check4Change：自定义监控规则

自己开发扩展

创建简单的监控扩展：

监控网页变化主要有以下几种方法，你可以根据需求选择-第1张图片-Google Chrome官方首页_极速谷歌浏览器

manifest.json

{
"manifest_version": 3,
"name": "网页变化监控",
"version": "1.0",
"permissions": ["activeTab", "scripting"],
"action": {
 "default_popup": "popup.html"
},
"content_scripts": [{
 "matches": ["<all_urls>"],
 "js": ["content.js"]
}]
}

content.js
```
// 监控逻辑代码
```

实用监控脚本

价格监控

// 监控商品价格变化
const priceElement = document.querySelector('.price');
let lastPrice = parseFloat(priceElement.textContent.replace(/[^0-9.]/g, ''));
const checkPrice = () => {
    const currentPrice = parseFloat(priceElement.textContent.replace(/[^0-9.]/g, ''));
    if (currentPrice !== lastPrice) {
        console.log(`价格变化: ${lastPrice} → ${currentPrice}`);
        if (currentPrice < lastPrice) {
            alert('价格下降了！');
        }
        lastPrice = currentPrice;
    }
};
setInterval(checkPrice, 30000); // 每30秒检查一次

库存监控

// 监控库存状态
const checkStock = () => {
    const stockElement = document.querySelector('.stock-status');
    if (stockElement && stockElement.textContent.includes('有货')) {
        console.log('有货了！', new Date());
        alert('商品有货了！');
    }
};
setInterval(checkStock, 60000); // 每分钟检查一次

高级监控方案

使用Puppeteer（自动化脚本）

const puppeteer = require('puppeteer');
(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://example.com');
    let previousContent = await page.content();
    setInterval(async () => {
        await page.reload();
        const currentContent = await page.content();
        if (currentContent !== previousContent) {
            console.log('页面已更新');
            previousContent = currentContent;
        }
    }, 300000); // 每5分钟检查一次
})();

第三方监控服务

UptimeRobot：免费基础监控
ChangeTower：专业网页变化监控
Visualping：视觉变化检测服务

实用小技巧

保存监控状态

// 使用localStorage保存上次监控的状态
const key = 'page-monitor-' + window.location.href;
const lastState = localStorage.getItem(key);

// 保存当前状态 localStorage.setItem(key, JSON.stringify(currentState));


2. **发送通知**
```javascript
// 桌面通知
if (Notification.permission === "granted") {
    new Notification("网页已更新", {
        body: "检测到页面内容变化",
        icon: "icon.png"
    });
}