Files
html2pptx/web-to-pixso/README.md
T
李进 330f4e96ce feat: 加入 web-to-pixso 插件源码
Chrome 扩展,用于从网页提取 DOM 树为 JSON 格式。
核心文件:capture.js(76KB,提取逻辑)
2026-07-27 12:22:27 +08:00

1.3 KiB
Raw Permalink Blame History

Web to Pixso

一套对标 figma-capture-extension 使用体验的网页采集工具,包含 Chrome 扩展和 Pixso 导入插件。

目录

  • manifest.jsonpopup.*background.jscapture.jsrunner.jsChrome 扩展
  • pixso-plugin/:Pixso 插件,用于导入扩展导出的 JSON 文件
  • logo/:扩展与插件图标

使用

  1. 打开 chrome://extensions/,开启开发者模式。
  2. 点击“加载已解压的扩展程序”,选择本目录 web-to-pixso
  3. 打开要采集的网页,点击扩展图标,按需开启“跨域图片代理模式”,点击“开始采集”。
  4. 扩展会下载一个 web-to-pixso/*.json 文件。
  5. 在 Pixso 中导入 pixso-plugin/manifest.json,运行插件并选择上一步下载的 JSON 文件。若旧版导入器要求 plugin.json,目录内也保留了同内容兼容文件。

数据格式

扩展导出的文件格式为 pixso-design-capture,包含页面来源、画布尺寸、DOM 节点树、图片资源、字体和诊断信息。Pixso 插件会尽量还原:

  • 文本图层
  • 图片和背景图片
  • 背景色、边框、圆角、透明度
  • DOM 层级和基础坐标

注意

网页到设计稿的转换无法做到 100% 语义等价,复杂 CSS、canvas、视频帧、伪元素和部分字体效果可能需要在 Pixso 中二次微调。