feat: 加入 web-to-pixso 插件源码

Chrome 扩展，用于从网页提取 DOM 树为 JSON 格式。核心文件：capture.js（76KB，提取逻辑）
2026-07-27 12:22:27 +08:00
parent a10969b562
commit 330f4e96ce
22 changed files with 6185 additions and 0 deletions
@@ -0,0 +1,118 @@
+# Web to Pixso 使用说明
+
+Web to Pixso 可以将网页采集为可导入 Pixso 的高保真设计稿，适合网页参考稿采集、运营页转设计稿、竞品页面还原、开发页面转 Pixso 资产等场景。
+
+插件包：`web-to-pixso-v1.1.1.zip`
+
+使用说明在线文档：[Web to Pixso 使用说明](https://z8qrcvi3n5.feishu.cn/wiki/RV8TwlhFyiGsEekQXk8cX5SHn6f)
+
+反馈邮箱：`270310136@qq.com`。给我发邮件哦，我光速改。
+
+## 一、安装 Chrome 浏览器扩展
+
+1. 解压 `web-to-pixso-v1.1.1.zip`。
+2. 打开 Chrome 浏览器，进入 `chrome://extensions/`。
+3. 打开右上角「开发者模式」。
+4. 点击「加载已解压的扩展程序」。
+5. 选择解压后的 `web-to-pixso` 文件夹。
+6. 安装成功后，浏览器右上角会出现 Web to Pixso 扩展图标。
+
+## 二、安装 Pixso 插件
+
+1. 打开 Pixso。
+2. 进入插件开发/导入插件入口。
+3. 选择 `web-to-pixso/pixso-plugin` 目录中的插件文件。
+4. 导入成功后，在 Pixso 插件面板中可以看到 Web to Pixso。
+
+## 三、采集网页
+
+1. 在 Chrome 中打开需要采集的目标网页。
+2. 点击浏览器右上角 Web to Pixso 扩展图标。
+3. 选择采集模式：
+   - 混合高保真：优先保留关键模块截图兜底，同时尽量保留文字可编辑。
+   - 可编辑优先：优先转换为 Pixso 原生文本、图片、形状和组件图层。
+4. 可按需要设置：
+   - 跨域图片代理模式：用于减少图片丢失。
+   - 页面采集宽度：用于按指定视口宽度触发响应式页面布局。
+   - 图片采集并发：用于控制图片下载并发数量。
+5. 点击「开始采集」。
+6. 采集完成后，会下载一个 `.json` 文件。
+
+## 四、导入 Pixso
+
+1. 在 Pixso 中打开 Web to Pixso 插件。
+2. 将 Chrome 扩展下载的 `.json` 文件拖拽到插件面板，或点击选择文件。
+3. 插件会自动识别页面宽度和页面高度。
+4. 点击「导入到 Pixso」。
+5. 导入完成后，会创建一个以网页标题命名的画板。
+
+## 五、导入后的图层结构
+
+导入后的设计稿会按用途分层，方便设计师编辑和对比：
+
+1. 对比底图层
+   - 放置完整页面截图或模块截图。
+   - 用于和上层可编辑元素进行还原度对比。
+   - 可隐藏或锁定。
+
+2. 可编辑元素层
+   - 包含按钮、卡片、输入框、背景、图片、Logo、图标等。
+   - 尽量保留尺寸、位置、圆角、边框、阴影、透明度和背景样式。
+
+3. 文字编辑层
+   - 包含网页中的可见文字。
+   - 尽量保留字体、字号、颜色、行高、字重、对齐方式等样式。
+   - 文字可在 Pixso 中直接编辑。
+
+## 六、常见问题
+
+### 1. 为什么有些区域是截图？
+
+部分网页使用复杂动画、轮播、视频、Canvas、伪元素、复杂背景或特殊渲染方式。为了保证视觉效果不丢失，插件会为这些区域生成截图兜底，同时尽量保留文字和主要元素可编辑。
+
+### 2. 为什么有些图片没有显示？
+
+可能是目标网站启用了跨域限制、懒加载、防盗链或动态鉴权。可以尝试开启「跨域图片代理模式」后重新采集。
+
+### 3. 为什么 Header 或 Hero 区域有时不可编辑？
+
+部分网站的导航栏、轮播图或首屏区域可能由复杂脚本、Shadow DOM、Canvas、视频或异步渲染生成。插件会优先转换为可编辑图层，并使用兜底截图保证视觉可对比。
+
+### 4. 页面采集宽度有什么用？
+
+页面采集宽度用于模拟不同视口下的响应式布局。例如输入 `1920` 可以采集桌面宽屏布局，输入 `375` 可以采集移动端布局。
+
+### 5. 导入后如何检查还原度？
+
+可以先显示「对比底图层」，再查看上方的可编辑元素层和文字编辑层是否与底图对齐。对比完成后，可以隐藏或锁定底图。
+
+## 七、适用场景
+
+- 网页转 Pixso 设计稿
+- 竞品页面采集
+- 运营活动页还原
+- 开发页面转设计资产
+- 设计走查和页面对比
+- 旧页面重构前的视觉备份
+
+## 八、版本说明
+
+当前版本：V1.1.1
+
+支持从 Web to Pixso Chrome 扩展导出的 JSON 文件导入 Pixso，生成包含可编辑文本、图片、背景、按钮、卡片和对比底图的高保真网页设计稿。
+
+本版重点：
+
+- Chrome 扩展和 Pixso 插件版本号统一为 `1.1.1`。
+- 插件面板显示版本号，避免用户混淆安装包。
+- Chrome 扩展和 Pixso 插件均新增「使用说明」入口，点击后打开飞书文档。
+- 两端插件底部均新增反馈邮箱：`270310136@qq.com`。
+- 采集 JSON 协议版本同步为 `1.1.1`，方便问题排查。
+- 保留页面采集宽度、混合高保真、可编辑优先、跨域图片代理和图片采集并发能力。
+- 继续强化三层结构：对比底图层、可编辑元素层、文字编辑层。
+
+已知边界：
+
+- 复杂动画、Canvas、视频、动态轮播和强跨域资源可能仍需要兜底截图或人工微调。
+- 真实网页还原质量会受目标网站资源加载、登录态、懒加载和浏览器环境影响。
+- 对外使用时建议先用对比底图层检查还原度，再进行设计稿编辑。