CloneWebsite - 像素级网页克隆工具

以像素级精度克隆任意网页。提取 HTML、CSS、图片、字体和 JS 并打包为 ZIP 下载。通过 Magic Paste 将克隆转换为 React/Vue 组件。

CloneWebsite 是一款强大的 Chrome 扩展，能够以 100% 像素级精度克隆任意网页。无论你是开发者研究 UI 模式、设计师捕捉灵感，还是团队构建组件库，CloneWebsite 都能在几秒内为你提供任意页面的完整独立快照——可导出为 ZIP 或 Figma 可编辑图层。 ★ 核心功能 • 像素级克隆 — 捕获页面的完整计算样式、DOM 结构和视觉布局，与浏览器中呈现的效果完全一致。 • 资源提取 — 自动下载并打包图片、字体、CSS 和 JavaScript 文件到单个 ZIP 压缩包中。 • 脚本智能过滤 — 移除追踪、分析等非必要脚本，让克隆结果干净轻量。 • 本地项目库 — 将克隆的页面保存到 IndexedDB 以离线访问，无需账号或云同步。 • Workbench 工作台 — 在扩展内预览、编辑和重新导出已保存的项目。 • Magic Paste — 一键将克隆的 HTML 转换为可直接使用的 React 或 Vue 组件代码。 • BYOK AI — 使用你自己的 OpenAI 兼容 API 密钥，在 Workbench 中流式进行 AI 辅助代码修改。 • ZIP 下载 — 每个克隆都打包为独立的 ZIP 文件，文件夹结构清晰，可直接本地打开。 • 导出到 Figma — 通过本地 `.cdesign` 归档把任意捕获结果导出为 Figma 可编辑图层和画板。免费的 CloneWebsite Figma 插件完全离线导入，无需云上传。 ★ 工作原理 1. 在任意想要克隆的页面点击扩展图标。 2. 选择"页面克隆"克隆整个页面，或"组件克隆"选择特定元素。 3. CloneWebsite 冻结 DOM、提取所有资源、构建独立的 HTML 文件。 4. 下载 ZIP、保存到本地项目库，或打开 Workbench 预览和编辑。 5. 使用 Magic Paste 从克隆的 HTML 生成 React/Vue 组件代码。 6. 或切换到 Figma 输出目标，导出可供 CloneWebsite Figma 插件导入的可编辑 `.cdesign` 归档。 ★ 隐私优先 所有克隆和处理均在浏览器本地完成。CloneWebsite 不收集、存储或传输你的个人数据。AI 功能为可选，仅连接你明确配置的端点。 ★ 适用人群 • 前端开发者研究真实 CSS 布局和组件模式 • UI/UX 设计师捕捉设计参考和视觉灵感 • 团队从现有页面构建内部组件库 • 教育者和学习者探索网站构建方式 ★ 技术细节 • 基于 Plasmo (MV3)、React 和 TypeScript 构建 • 使用 Chrome scripting + storage API • Figma 增强捕获额外使用 Chrome `debugger` API。这是安装时必需的权限（Chrome 不允许将其设为可选）。它仅在你主动执行 Figma 增强捕获时连接，并在捕获结束时立即断开；仅用于读取页面的渲染状态（模拟视口/主题、组件伪状态、本地截图）。绝不拦截网络流量、Cookie、存储或身份验证令牌，捕获的数据也不会离开你的浏览器。 • 无后台数据收集 • 可选 AI 集成，通过用户提供的 OpenAI 兼容端点