最佳实践：如何完美克隆网页

为什么有些网页难以克隆？

现代网页应用（SPA）高度依赖 JavaScript 来渲染内容。这意味着当页面初始加载时，HTML 通常是空的，内容是动态拉取的。此外，许多网页使用了反爬虫机制、复杂的 CSS 变量系统和 Shadow DOM。

为了获得 100% 像素级精度的克隆结果，请遵循以下最佳实践。

克隆前的准备工作

1. 确保内容已完全加载

**懒加载（Lazy Loading）**是克隆不完整的最大元凶。许多图片、长列表和底部内容只有在您滚动到相应位置时才会加载。

正确做法：

• 从页面顶部缓慢滚动到底部，确保所有图片占位符都被真实图片替换。
• 点击 "加载更多" 按钮，展开所有需要捕获的内容。
• 等待所有字体文件加载完成（避免文本显示默认字体）。

2. 触发特定的 UI 状态

如果您想捕获某个特定的交互状态：

• 展开下拉菜单（Dropdowns）
• 打开弹窗（Modals / Dialogs）
• 切换到特定的标签页（Tabs）
• 触发 Hover 状态（可以通过 Chrome DevTools 强制元素的 :hover 状态）

在这些状态处于激活时，点击扩展的 "开始克隆" 按钮。

3. 处理多媒体内容

• 视频（Video）：默认情况下，扩展会尝试保留 <video> 标签及其 src 属性，但不会下载巨大的视频文件。确保视频有 poster（封面图）属性，以便在离线时显示占位图。
• Canvas / WebGL：这些动态渲染的元素无法被传统的 DOM 序列化捕获。扩展会自动尝试将 Canvas 转换为静态 Base64 图片，但复杂的 WebGL 场景可能无法完美还原。
• Iframe：跨域 Iframe（如 YouTube 嵌入视频、第三方评论系统）出于安全原因无法被深度克隆。它们将保留原始的 src 链接。

高级配置技巧

在扩展设置面板中，有几个关键选项可以影响克隆质量：

移除脚本 vs 保留脚本

• 选择"移除所有 JS"（推荐用于纯展示）：这会生成一个完全静态的页面。好处是文件体积小，绝对安全，不会有弹窗广告或追踪代码执行。缺点是轮播图、折叠面板等交互功能将失效。
• 选择"保留核心交互"（Beta 功能）：扩展会尝试过滤掉分析脚本（如 GA），保留控制 UI 的脚本。注意：复杂的 SPA 页面如果保留了 JS，在本地打开时可能会因为找不到后端 API 而报错导致白屏。

资源路径转换

确保 "绝对路径转换为相对路径" 选项处于开启状态。这样生成的 ZIP 包可以在本地硬盘上直接双击打开（通过 file:// 协议），而不会因为路径问题导致样式丢失。

极端情况处理

页面包含 Shadow DOM

部分现代组件库使用了 Shadow DOM，这使得它们的内部结构默认不可见。 解决方案：CloneWebsite 核心引擎包含了一个实验性的 shadow-dom-flattener，它会尝试遍历所有 shadow root 并将它们的内容和样式提取到主 DOM 树中。如果发现组件丢失，请在设置中开启 "强制展开 Shadow DOM"。

遇到 CSP (Content Security Policy) 拦截

在某些极其严格的网站（如银行、大型企业内网），您可能会在 Console 看到如下报错： Refused to execute inline script because it violates the following Content Security Policy directive...

解决方案： 目前这是浏览器的硬性安全限制。您可以尝试在 Chrome 商店搜索 "Disable CSP" 类的辅助插件，在克隆期间暂时关闭目标网站的 CSP。

总结检查清单

1. 页面已滚动到底部？ ✅
2. 弹窗和菜单已展开？ ✅
3. 扩展设置符合需求？ ✅
4. 点击克隆，等待完成！ 🚀