自动化网页检测提醒

一、前言

随着网页动态化技术的普及，许多关键信息（如新闻公告、商品价格、库存状态等）会实时更新。手动监控效率低下且易遗漏，本方案通过自动化监测+智能提醒，实现对指定网页区域的实时监控，确保第一时间感知内容变化，提升业务响应效率。

二、适用场景

• 企业公告监测
  及时获取政策更新、系统维护通知
• 电商价格追踪
  监控竞品价格波动或促销活动
• 数据看板监控
  实时感知业务指标异常（如订单量骤降）
• 内容合规审查
  检测网页敏感词或非法内容
• API状态监控
  通过网页呈现内容间接监控服务健康状态

三、实现方式

（一）技术架构

graph TD
A[定时抓取] --> B{内容变更检测}
B -->|未变化| C[记录日志]
B -->|已变化| D[触发提醒]
D --> E[Webhook通知]
D --> F[邮件/短信提醒]

（二）核心步骤

• 目标区域抓取
  通过CSS选择器精准定位网页元素
  支持静态HTML与动态渲染内容（如React/Vue）
• 内容指纹计算
  使用MD5/SHA算法生成内容哈希值
• 变更比对策略
  对比当前与历史哈希值
  支持阈值触发（如连续3次变化确认）
• 通知通道
  Webhook推送至企业微信/钉钉/飞书
  邮件、短信多通道覆盖

四、实现方式

• 文件名称：zdh-monitor.sh
• 文件内容，注意需要linux文件编码格式，需要执行文件权限

#!/bin/bash
# 动态内容监控脚本 v2.0

####################
### 基础配置 ###
####################

# 监控页面URL
TARGET_URL="https://xxx.xx.xx/platform-home"
# CSS选择器（示例监控id为thediv的div）
CSS_SELECTOR="div#thediv"
# 重试：检查间隔（秒）
CHECK_INTERVAL=60


####################
### 高级配置 ###
####################

# 网络请求重试次数
MAX_RETRY=3
# 模拟浏览器UA
USER_AGENT="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36"
# 哈希存储文件
HASH_FILE="/root/lzc-bin/zdh-monitor.data"
# 日志文件
LOG_FILE="/root/lzc-bin/zdh-monitor.log"
# 页面加载超时时间（秒）
TIMEOUT=30

####################
### 消息通知配置 ###
####################
# 定义当前时间
Now_Date=$(date +%Y-%m-%d)
# 配置告警提示信息
MSG_DATA="{\"secretKey\": \"xxx\",\"phone\":\"132****2013\",\"title\":\"xxx平台\",\"date\":\"$Now_Date\",\"msgText\":\"公告内容已更新！\"}"
# 定义企业微信机器人的 API 接口
WebHook='http://xxxxx.xx.com:8200/msg/send'


####################
### 函数定义 ###
####################
init_environment() {
    # 检查Node.js环境
    if ! command node -v  &> /dev/null; then
        echo "正在安装Node.js..."
		curl -sL https://rpm.nodesource.com/setup_14.x | sudo bash -
        sudo yum install epel-release
		sudo yum install nodejs
		sudo yum install npm --enablerepo=epel
		sudo npm install -g express
		sudo npm install -g express-generator
    fi

    # 安装依赖模块
    if [ ! -d "node_modules/puppeteer" ]; then
        npm install puppeteer
		npm install playwright
		npx playwright install firefox
    fi
}
#/usr/bin/firefox
get_dynamic_content() {
    # 使用Node.js执行浏览器渲染
    node <<EOF
const puppeteer = require('puppeteer');
const { firefox } = require('playwright');

(async () => {
    const browser = await firefox.launch();
    const page = await browser.newPage();
    
    try {
        await page.goto("$TARGET_URL", {
            waitUntil: 'load',
            timeout: ${TIMEOUT}000
        });

        // 等待目标元素加载
        await page.waitForSelector("$CSS_SELECTOR", {
            visible: true,
            timeout: ${TIMEOUT}000
        });

        const content = await page.evaluate(selector => {
            const el = document.querySelector(selector);
            return el ? el.innerText.trim() : '';
        }, "$CSS_SELECTOR");

        console.log(content);
    } catch (error) {
        console.error("ERROR:" + error.message);
        process.exit(1);
    } finally {
        await browser.close();
    }
})();
EOF
}

send_notification() {
    # 发送变更通知（示例）
    curl $WebHook -H 'Content-Type: application/json' -X POST --data "${MSG_DATA}" &> /root/lzc-bin/dbz-send-msgText.txt
}

log() {
    echo "$(date '+%Y-%m-%d %H:%M:%S') - $1" >> "$LOG_FILE"
}

####################
### 主逻辑 ###
####################
init_environment
touch "$LOG_FILE"

log "=== 启动动态内容监控 ==="
log "目标地址：$TARGET_URL"
log "CSS选择器：$CSS_SELECTOR"

current_loop=1

while true; do
    # 获取动态内容
    content_output=$(get_dynamic_content 2>&1)
	
	if [ $MAX_RETRY -gt 0 ] && [ $current_loop -ge $MAX_RETRY ]; then
        break
    fi
	
	((current_loop++))
    if [[ "$content_output" == ERROR:* ]]; then
        error_msg=${content_output#ERROR:}
        log "[ERROR] 页面加载失败：${error_msg%%$'\n'*}"
        sleep $CHECK_INTERVAL
        continue
    fi

    # 处理多行内容
    content=$(echo "$content_output" | sed '/^$/d' | tail -n +2 | sed 's/"/\\"/g')
    current_hash=$(echo "$content" | md5sum | awk '{print $1}')
    last_hash=$(cat "$HASH_FILE" 2>/dev/null)

    log "[INFO] 本次监控内容：$content"
	
    # 对比内容变化
    if [ "$current_hash" != "$last_hash" ]; then
        if [ -n "$last_hash" ]; then
            log "[NOTICE] 检测到内容变更（哈希值：$last_hash → $current_hash）"
            send_notification "$content"
        else
            log "[INFO] 初始化监控哈希：$current_hash"
        fi
        
        echo "$current_hash" > "$HASH_FILE"
    fi

    sleep $CHECK_INTERVAL
done

• 设置定时任务（每天9点检测）

(crontab -l ; echo "0 9 * * * /path/to/zdh-monitor.sh") | crontab -

五、结论

（一）方案价值

• 实时感知：分钟级变化检测，告别人工刷新
• 精准定位：通过CSS选择器锁定关键区域，避免无效告警
• 灵活集成：支持对接主流消息平台（钉钉/企业微信/Slack）
• 审计追溯：完整记录变更历史与通知日志