Chrome 扩展使用指南

扩展概览

CloneWebsite Chrome 扩展是捕获网页状态的核心工具。与传统的网页爬虫不同，它运行在浏览器的上下文中，这意味着它可以：

1. 绕过 CORS 限制：直接访问并下载跨域资源（如第三方托管的图片和字体）
2. 捕获真实渲染状态：获取经过 JavaScript 动态计算后的最终 DOM 和 CSS
3. 获取授权内容：克隆需要登录才能访问的页面（如仪表板、后台管理系统）

界面与功能

点击浏览器右上角的扩展图标，会打开主控制面板。

浮动工具栏提供两个输出目标：网页继续使用现有 HTML/ZIP 工作流，Figma生成供 CloneWebsite Figma 插件导入的本地 .cdesign 文件。完整流程与权限说明见将网页导出到 Figma。

Figma 插件现在已经在 Figma Community 公开上架。安装一次即可；生成 .cdesign 文件后，再回到 Figma 导出指南完成导入。

克隆设置

在开始克隆之前，您可以配置以下选项：

• 深度克隆模式：尝试捕获 iframe 内容和更深层的动态资源（可能增加处理时间）
• 图片处理：
  • 转为独立文件 (推荐)：将所有图片提取为独立的 .png/.jpg 文件，保存在 assets 文件夹中
  • 保留 Base64：将图片作为内联数据保留在 HTML 中（会导致 HTML 文件体积巨大）
• 隐私保护过滤：
  • 移除追踪脚本：自动移除 Google Analytics, Facebook Pixel 等已知追踪代码
  • 移除所有 JS：生成一个完全静态、无交互的页面副本（最安全）
• 自动修复外部链接：将绝对路径转换为相对路径，确保离线浏览体验

克隆流程详解

1. 准备阶段

1. 滚动页面，确保所有懒加载（Lazy-load）的图片和内容都已加载完毕。
2. 展开您想要捕获的下拉菜单、手风琴组件或弹窗。
3. 等待所有骨架屏（Skeleton screens）被真实内容替换。

2. 执行捕获

点击 开始克隆 后，扩展会执行以下步骤：

1. 冻结 DOM：暂停所有 CSS 动画和通过定时器触发的 DOM 变更，防止在捕获过程中页面发生变化。
2. 提取资源：遍历 DOM 树，找到所有被引用的图片、字体和外部样式表。
3. 样式计算：获取所有元素的最终计算样式（Computed Styles），确保跨环境表现一致。
4. 清理冗余：移除不可见元素、空的占位符和已知无用的脚本标签。
5. 打包下载：使用 JSZip 在内存中构建文件结构，并触发浏览器的下载动作。

3. 处理大型页面

如果您在克隆非常大或复杂的页面（如长列表、无限滚动的数据看板）时遇到问题：

• 尝试分块克隆：只展开您最关心的部分内容
• 关闭其他不相关的标签页，释放浏览器内存
• 如果浏览器提示"页面无响应"，请选择"等待"，复杂的序列化过程可能需要较长时间

快捷键与高频操作

• Alt + Shift + C (Mac: Option + Shift + C)：一键使用默认设置克隆当前页面
• 右键菜单：在页面的空白处右键，选择 CloneWebsite -> 克隆此页面

常见错误与解决方案

Q: 为什么下载的页面布局错乱？
A: 这通常是因为页面使用了复杂的 CSS 变量或依赖特定 JavaScript 逻辑来动态计算尺寸。尝试在设置中开启"强制内联关键样式"选项。

Q: 为什么图标没有显示？
A: 一些字体图标（如 FontAwesome）可能设置了防盗链机制。扩展会尝试抓取，但如果服务器强行拒绝，图标会显示为方块。目前我们在不断优化字体跨域策略。

Q: 点击克隆后没有反应？
A: 请打开 Chrome 开发者工具（F12），切换到 Console 面板查看是否有报错。有些极其严格的内容安全策略（CSP）可能会阻止扩展脚本的执行。