如何在Chrome等浏览器中自动记录Web页面HTML内容变更？

一、自动监测HTML变更并保存到日志 #

1. Chrome浏览器扩展实现（持久化、稳定） #

通过Chrome扩展可以实现长期稳定的监测，支持自动保存HTML到本地文件，步骤如下：

扩展文件结构

新建html-logger目录，创建3个核心文件：

• manifest.json（扩展配置）

{
  "manifest_version": 3,
  "name": "HTML变更日志记录器",
  "version": "1.0",
  "permissions": ["activeTab", "downloads"],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "background": {
    "service_worker": "background.js"
  }
}

• content.js（页面DOM监测脚本）

// 配置DOM监测规则，覆盖所有节点、属性、文本变更
const observerConfig = {
  childList: true,
  subtree: true,
  attributes: true,
  characterData: true
};

// 创建DOM变更观察者
const observer = new MutationObserver(() => {
  const fullHtml = document.documentElement.outerHTML;
  // 发送HTML内容到后台处理保存
  chrome.runtime.sendMessage({
    action: "saveHtml",
    html: fullHtml,
    timestamp: new Date().toISOString()
  });
});

// 启动监测
observer.observe(document.documentElement, observerConfig);

• background.js（后台文件保存逻辑）

chrome.runtime.onMessage.addListener((message, sender) => {
  if (message.action === "saveHtml") {
    // 生成带域名和时间戳的文件名
    const domain = new URL(sender.tab.url).hostname;
    const filename = `html-log_${domain}_${message.timestamp.replace(/[:.]/g, "-")}.html`;
    
    // 创建HTML文件Blob并触发下载
    const blob = new Blob([message.html], { type: "text/html" });
    const url = URL.createObjectURL(blob);
    
    chrome.downloads.download({
      url: url,
      filename: filename,
      conflictAction: "uniquify"
    }, () => URL.revokeObjectURL(url));
  }
});

扩展加载方法

Chrome地址栏输入chrome://extensions/，开启开发者模式，点击「加载已解压的扩展程序」，选择html-logger目录即可。

2. 控制台临时脚本（快速测试） #

无需扩展，直接在Chrome开发者工具控制台（F12打开）运行以下脚本，适合临时需求：

// 防频繁触发，1秒内只保存一次
let lastSaveTime = 0;
const saveInterval = 1000;

const observer = new MutationObserver(() => {
  const now = Date.now();
  if (now - lastSaveTime > saveInterval) {
    lastSaveTime = now;
    const html = document.documentElement.outerHTML;
    const blob = new Blob([html], { type: "text/html" });
    const a = document.createElement("a");
    a.href = URL.createObjectURL(blob);
    a.download = `html-log_${new Date().toISOString().replace(/[:.]/g, "-")}.html`;
    a.click();
    URL.revokeObjectURL(a.href);
  }
});

observer.observe(document.documentElement, {
  childList: true,
  subtree: true,
  attributes: true,
  characterData: true
});

注意：页面刷新后脚本失效。

二、鼠标点击前保存HTML再执行点击 #

1. Chrome扩展实现（持久化） #

复用上述扩展的manifest.json和background.js，替换content.js为以下代码：

// 事件委托监听所有点击，捕获阶段触发确保先执行保存
document.addEventListener("click", (e) => {
  e.preventDefault();
  e.stopPropagation();

  // 保存当前HTML
  const fullHtml = document.documentElement.outerHTML;
  chrome.runtime.sendMessage({
    action: "saveHtml",
    html: fullHtml,
    timestamp: new Date().toISOString()
  }).then(() => {
    // 保存完成后执行原点击动作
    if (e.target.tagName === "A") {
      window.location.href = e.target.href;
    } else {
      e.target.click();
    }
  });
}, true);

2. 控制台临时脚本 #

直接在控制台运行以下代码：

document.addEventListener("click", (e) => {
  e.preventDefault();
  e.stopPropagation();

  // 保存HTML
  const html = document.documentElement.outerHTML;
  const blob = new Blob([html], { type: "text/html" });
  const a = document.createElement("a");
  a.href = URL.createObjectURL(blob);
  a.download = `html-click-log_${new Date().toISOString().replace(/[:.]/g, "-")}.html`;
  a.click();
  URL.revokeObjectURL(a.href);

  // 延迟执行点击，避免页面跳转中断下载
  setTimeout(() => {
    if (e.target.tagName === "A") {
      window.location.href = e.target.href;
    } else {
      e.target.click();
    }
  }, 500);
}, true);

其他浏览器适配 #

• Firefox：将扩展manifest.json的manifest_version改为2，background字段改为"scripts": ["background.js"]，其余代码兼容。
• Opera：与Chrome扩展完全兼容，直接加载解压的扩展即可。

内容的提问来源于stack exchange，提问作者HelAu