改造内容: - 改名 Web to Pixso → Web to PPT - 删除 pixso-plugin/、element-picker.js、popup-panel.js - 新增 convert-browser.js(浏览器版转化逻辑) - 新增 lib-pptxgen.js(pptxgenjs 浏览器 bundle) - 重写 popup.js(触发捕获→转化→下载) - 重写 background.js(缓存采集数据,支持 WEB_TO_PPT_GET_DATA) - manifest.json 改名 + 添加 default_popup 流程:popup 点击导出 → background 抓取 DOM → popup 运行转化 → chrome.downloads 下载 PPTX
Web to Pixso
一套对标 figma-capture-extension 使用体验的网页采集工具,包含 Chrome 扩展和 Pixso 导入插件。
目录
manifest.json、popup.*、background.js、capture.js、runner.js:Chrome 扩展pixso-plugin/:Pixso 插件,用于导入扩展导出的 JSON 文件logo/:扩展与插件图标
使用
- 打开
chrome://extensions/,开启开发者模式。 - 点击“加载已解压的扩展程序”,选择本目录
web-to-pixso。 - 打开要采集的网页,点击扩展图标,按需开启“跨域图片代理模式”,点击“开始采集”。
- 扩展会下载一个
web-to-pixso/*.json文件。 - 在 Pixso 中导入
pixso-plugin/manifest.json,运行插件并选择上一步下载的 JSON 文件。若旧版导入器要求plugin.json,目录内也保留了同内容兼容文件。
数据格式
扩展导出的文件格式为 pixso-design-capture,包含页面来源、画布尺寸、DOM 节点树、图片资源、字体和诊断信息。Pixso 插件会尽量还原:
- 文本图层
- 图片和背景图片
- 背景色、边框、圆角、透明度
- DOM 层级和基础坐标
注意
网页到设计稿的转换无法做到 100% 语义等价,复杂 CSS、canvas、视频帧、伪元素和部分字体效果可能需要在 Pixso 中二次微调。