5分钟上手！changedetection.io自定义脚本实现电商库存监控

【免费下载链接】changedetection.io The best and simplest free open source website change detection, website watcher, restock monitor and notification service. Restock Monitor, change detection. Designed for simplicity - Simply monitor which websites had a text change for free. Free Open source web page change detection, Website defacement monitoring, Price change notification 项目地址: https://gitcode.com/GitHub_Trending/ch/changedetection.io

你是否曾因心仪商品突然缺货而错失良机？是否希望在目标网页更新时第一时间收到通知？changedetection.io作为开源网站变更检测工具，不仅能监控网页文本变化，更支持通过自定义脚本来扩展监控能力。本文将带你从零开始，通过实战案例掌握如何利用JavaScript脚本实现电商网站的智能库存监控。

脚本扩展原理与文件结构

changedetection.io的脚本扩展系统基于浏览器环境执行机制，核心实现位于内容抓取模块。项目将自定义脚本文件集中管理在 changedetectionio/content_fetchers/res/ 目录下，目前包含三个实用脚本：

• favicon-fetcher.js: 网站图标提取工具
• stock-not-in-stock.js: 多语言库存状态检测（支持中文、英文、日文等15种语言）
• xpath_element_scraper.js: XPath元素提取器

这些脚本通过Playwright/Puppeteer等浏览器引擎在页面上下文中执行，可访问完整DOM结构并返回处理结果。系统架构如图所示：

实战：电商库存监控脚本解析

以 stock-not-in-stock.js 为例，该脚本通过多维度分析实现精准库存状态判断。核心实现包含三个关键步骤：

1. 可见元素收集

脚本首先扫描页面可见区域元素，排除隐藏内容和离屏元素：

function elementIsInEyeBallRange(element) {
    // 忽略顶部300px内的导航区域
    if (element.getBoundingClientRect().bottom + window.scrollY <= 300 ) {
        return false;
    }
    // 忽略底部1300px外的推荐商品区域
    if (element.getBoundingClientRect().bottom + window.scrollY >= 1300 ) {
        return false;
    }
    return true;
}

2. 多语言关键词检测

内置112条多语言库存关键词库，覆盖常见"缺货"表述：

const outOfStockTexts = [
    '缺货', '已售完', 'out of stock', 
    '품절', '品切れ', 'épuisé'
    // 完整列表包含15种语言
];

3. 智能决策逻辑

通过正则匹配和文本分析判断库存状态，支持"有货优先"规则：

// 优先检测"有货"信号
if (negateOutOfStockRegex.test(elementText)) {
    element.style.border = "2px solid green"; // 绿色高亮标记
    return 'Possibly in stock';
}
// 其次检测"缺货"信号
for (const outOfStockText of outOfStockTexts) {
    if (elementText.includes(outOfStockText)) {
        element.style.border = "2px solid red"; // 红色高亮标记
        return outOfStockText;
    }
}

实际运行效果如图所示，脚本会自动高亮标记检测到的库存状态元素：

自定义脚本开发指南

基础模板

新建脚本需遵循IIFE (立即执行函数表达式) 规范，确保返回可序列化结果：

(async () => {
    // 你的逻辑代码
    function customLogic() {
        // DOM操作
        const priceElement = document.querySelector('.product-price');
        return priceElement ? priceElement.textContent : null;
    }
    
    return await customLogic();
})();

调试技巧

1. 使用console.log()输出调试信息，可在浏览器控制台查看
2. 通过element.style.border可视化标记关键元素
3. 利用try-catch捕获异常，确保脚本稳定运行：

try {
    // 可能出错的代码
} catch (e) {
    console.warn('脚本执行错误:', e);
    return null; // 返回安全值
}

常用API

API	用途	示例
document.querySelector()	元素选择	document.querySelector('#price')
fetch()	网络请求	fetch('/api/data').then(r=>r.json())
window.scrollTo()	页面滚动	window.scrollTo(0, document.body.scrollHeight)
getBoundingClientRect()	元素位置	element.getBoundingClientRect().top

高级应用场景

价格变动监控

结合xpath_element_scraper.js可实现价格跟踪，示例代码片段：

// 提取产品价格
const price = document.querySelector('.product-price').textContent;
// 正则提取数字
const priceNum = parseFloat(price.replace(/[^0-9.]/g, ''));
// 返回价格用于变更检测
return priceNum;

表单自动填充

通过脚本预先填充搜索条件，实现动态内容监控：

// 自动填写搜索框
document.querySelector('#search-input').value = 'RTX 4090';
// 提交表单
document.querySelector('#search-form').submit();
// 等待结果加载
await new Promise(resolve => setTimeout(resolve, 2000));

登录认证处理

对于需要登录的网站，可通过脚本注入Cookie实现身份验证：

// 设置认证Cookie
document.cookie = "sessionid=abc123; path=/";
// 刷新页面
location.reload();

部署与使用流程

1. 将自定义脚本保存至 changedetectionio/content_fetchers/res/ 目录
2. 在监控任务编辑页面，于"高级设置"中启用"自定义JS脚本"
3. 选择目标脚本文件并配置执行时机（加载前/加载后）
4. 设置变更检测条件，如"库存状态从缺货变为有货"
5. 配置通知方式（邮件、钉钉、企业微信等）

完整配置界面参考官方文档：docs/

总结与扩展建议

changedetection.io的脚本扩展系统为监控场景提供了无限可能。建议从以下方向探索更多应用：

• 结合AI模型实现图像内容分析（如验证码识别）
• 开发API数据聚合脚本，整合多源信息
• 构建用户行为模拟脚本，实现复杂交互流程

项目源码托管于 GitHub_Trending/ch/changedetection.io，欢迎贡献你的自定义脚本和使用经验！

提示：所有自定义脚本需遵循MIT开源协议，核心功能开发可参考 changedetectionio/content_fetchers/playwright.py 中的脚本执行逻辑。

【免费下载链接】changedetection.io The best and simplest free open source website change detection, website watcher, restock monitor and notification service. Restock Monitor, change detection. Designed for simplicity - Simply monitor which websites had a text change for free. Free Open source web page change detection, Website defacement monitoring, Price change notification 项目地址: https://gitcode.com/GitHub_Trending/ch/changedetection.io