🎯
StepFlow 使用手册
一键录制网页操作步骤，自动生成带截图的操作指南，导出为 PDF、Word、Markdown 或 HTML。
🖱️ 自动捕捉点击 📸 逐步截图 ⌨️ 输入内容记录 📄 一键导出文档
🔧
安装扩展
支持所有基于 Chromium 的浏览器，包括 Chrome、Edge、Brave 等。
🌐 Chrome 安装步骤
1
打开扩展管理页
在地址栏输入 chrome://extensions/ 并回车，或点击菜单 → 更多工具 → 扩展程序。
2
开启开发者模式
点击页面右上角的「开发者模式」开关，将其打开（显示为蓝色）。
3
加载扩展文件夹
点击「加载已解压的扩展程序」，在弹出的文件选择框中，选择 stepflow-extension 文件夹，点击「选择文件夹」。
4
固定到工具栏（推荐）
点击浏览器右上角的拼图图标 🧩，找到 StepFlow，点击 📌 图钉图标将其固定到工具栏，方便随时使用。
💡 固定后点击工具栏中的 🎯 图标即可打开 StepFlow 弹窗。
🔷 Microsoft Edge 安装步骤
步骤与 Chrome 完全相同，只需将地址改为 edge://extensions/，其余操作一致。
ℹ️ Edge 首次加载时可能会弹出「来自其他来源的扩展」提示，点击「仍然启用」即可继续使用。
🚀
快速上手
5 步完成第一次录制，全程不超过 3 分钟。
1
打开目标网页
先导航到你想录制操作的网页。StepFlow 支持任意普通网站，但无法录制浏览器内部页面（如 chrome:// 开头的页面）。
2
点击工具栏图标，开始录制
点击工具栏中的 🎯 StepFlow 图标打开弹窗，再点击紫色的「开始录制」按钮。此时页面顶部会出现一个紫色录制横幅提示。
🔴 录制状态：弹窗状态栏会出现红色闪烁点和「正在录制...」文字。
3
正常操作网页
在页面上正常操作：点击按钮、链接，填写表单，选择下拉菜单……每一步都会被自动捕捉并截图记录。
4
停止录制
操作完成后，再次点击工具栏图标打开弹窗，点击红色「停止录制」按钮，录制结束。
5
查看并导出
停止后自动跳转到步骤查看器。你可以逐步浏览带截图的操作流程，编辑步骤描述，然后点击「导出」生成文档。
🖼️ 弹窗界面示意
🎯 StepFlow 智能操作录制 📋 正在录制... 3 步 ■ 停止录制 ⏸ 暂停 👁 实时预览 最近录制 新录制 - 今天 14:30 📌 5步骤 🕐 2分钟前
✨
功能介绍
StepFlow 的所有核心功能一览。
🔴 录制控制
▶️ 开始录制 点击弹窗中的「开始录制」按钮，开始捕捉当前标签页的所有操作。
⏸️ 暂停录制 录制中点击「暂停」，可以临时停止记录（例如跳过某些不需要的步骤），再点「继续」恢复。
⏹️ 停止录制 完成操作后点击「停止录制」，所有步骤保存完成，自动跳转到查看器。
📸 自动截图 每次点击时自动截取当前页面的屏幕截图，作为该步骤的配图。截图使用 JPEG 压缩，体积小、不卡顿。
🔵 点击动画 录制时每次点击位置会有紫色涟漪动画，方便你确认已被记录。
✏️ 步骤编辑
📝 编辑描述 在查看器中点击步骤标题文字，可以直接修改描述，按 Enter 保存，或点击其他地方自动保存。
↑↓ 排序步骤 点击步骤卡片右上角的 ↑ ↓ 箭头按钮，可以调整该步骤在流程中的顺序。
🗑️ 删除步骤 点击步骤卡片右上角的 🗑 垃圾桶按钮删除该步骤（会弹出确认提示，防止误删）。
➕ 手动添加 在查看器顶部点击「+ 添加步骤」，可以手动输入一个步骤的描述，适合补充录制时遗漏的操作。
🔎 大图预览 点击步骤中的截图可以全屏放大查看，点击空白区域或右上角 ✕ 关闭。
🏷️ 重命名录制 在查看器顶部的标题输入框中点击，可以修改该录制的名称，方便管理多个流程。
📑 章节目录功能
📑 什么是章节 章节是手动插入步骤之间的「分隔标题」，就像书本的章节目录。章节不计入步骤序号，只起到视觉分组作用。
＋ 插入章节 在查看器中先点击某一步骤，然后点击侧边栏底部的「＋ 插入章节」按钮，章节将插入在当前步骤之后。
✏️ 重命名章节 点击侧边栏中的章节标题文字，弹出输入框，输入新名称后确认即可。
✕ 删除章节 鼠标悬停到侧边栏的章节标题上，右侧会出现 ✕ 删除按钮，点击即可删除（不影响步骤数据）。
⬇️ 导出含章节 在设置中开启「导出时包含章节标题」后，所有导出格式（PDF/Word/HTML/Markdown）都会在对应位置插入章节分隔标题。
🖊️ 标注功能
✏️ 录制时标注 录制中，点击页面顶部横幅的「✏️ 标注」按钮（或在页面上右键），选择形状（圆圈/椭圆/矩形/箭头），之后每次点击会自动将标注合成到截图上。
🔴 标注形状 支持 4 种形状：⬤ 圆圈、⬭ 椭圆、▬ 矩形、➤ 箭头。选择「✕ 无」可关闭标注。
⚙️ 标注开关 设置面板中「点击时合成标注到截图」可全局开关标注功能。关闭后即使选了形状，截图上也不会出现标注。
🖌️ 二次编辑标注 在查看器中悬停到步骤截图上，点击「✏️ 编辑标注」按钮，可以打开全功能画布编辑器，支持箭头、矩形、画笔、文字、马赛克等 10 种工具，可撤销，保存后立即生效。
⬇️ 导出文档
🖥️ 查看器界面示意（含章节功能）
🎯 StepFlow 新录制 - 2026年3月 ← 所有流程 + 添加步骤 ⬇ 导出 步骤列表 4步 📑 第一章 1 截图 点击按钮：开始 点击 2 在输入框输入... 输入 📑 第二章 3 点击提交按钮 ＋ 插入章节 📑 第一章 1 点击 点击按钮：开始录制 📸 截图区域 🔗 页面地址 🕐 操作时间
📄 PDF 生成打印预览页，点击页面顶部「打印 / 保存为 PDF」，在浏览器打印对话框选择「另存为 PDF」即可保存。
📝 Word 文档 生成 .doc 格式文件，可直接用 Microsoft Word 或 WPS 打开并二次编辑，UTF-8 编码无乱码。
📋 Markdown 生成 .md 文件，包含内联截图（base64），适合 GitHub、Notion、语雀等支持 Markdown 的平台。
🌐 HTML 网页 生成完全独立的 HTML 文件，所有截图内嵌其中，无需网络即可查看，适合发送给他人。
📄
导出格式对比
根据使用场景选择最合适的导出格式。
格式 文件类型 截图 可编辑 适用场景
PDF .html (打印为PDF) ✅ 内嵌 ❌ 只读 打印、存档、正式分享
Word .doc ✅ 内嵌 ✅ 可编辑 企业文档、SOP、培训材料
Markdown .md ✅ 内嵌base64 ✅ 可编辑 GitHub、技术文档平台
HTML .html ✅ 内嵌 ⚠️ 源码可编辑 在线查看、发送给他人
💡 PDF 导出：StepFlow 会打开一个新标签页，点击页面顶部蓝色按钮「打印 / 保存为 PDF」，然后在浏览器的打印对话框中，将「目标打印机」改为「另存为 PDF」，再点击「保存」。
ℹ️ Word 导出：下载的 .doc 文件可以直接双击用 Microsoft Word 或 WPS 打开，中文不会出现乱码。文件内已包含所有截图，无需额外传图。
💡
使用技巧
这些小技巧让你的录制更高效、文档更专业。
⏸️
善用暂停功能
操作中如需切换账号、填写密码等不想记录的步骤，先点「暂停」，完成后再点「继续」，这些步骤不会出现在文档中。
✏️
录制完再优化描述
录制时专注操作即可，不必担心自动生成的描述是否准确。录制结束后在查看器中批量修改，更高效。
🐢
操作别太快
每步操作间稍微停顿一下（约 1 秒），给截图留足时间，确保每步都能准确捕捉到画面。
🗑️
删除无效步骤
录制时偶尔会产生多余的步骤（如误点），在查看器中直接删除即可，不影响其他步骤的序号。
📂
用好录制命名
在查看器中点击顶部标题为每次录制起一个有意义的名字（如「新员工入职流程」），方便以后在历史记录中找到。
🌐
HTML 格式最通用
需要发给别人但不确定对方用什么软件？选 HTML 格式——任何浏览器都能打开，图片完整内嵌，不用担心排版错乱。
📑
章节让文档更清晰
录制流程较长时，善用章节功能将步骤分组。章节标题不占步骤序号，导出后在各格式中自动插入章节分隔，专业感翻倍。
🖊️
标注突出关键操作
录制前在横幅选好标注形状（圆圈、箭头等），每次点击时自动高亮操作位置，让阅读者一眼看清「点哪里」。
❓
常见问题
点击问题标题可展开 / 收起详细说明与解决步骤。

最常见的两个原因是 Service Worker 未就绪 和 content script 未注入。

① Service Worker 冷启动

扩展后台在空闲后会被浏览器休眠，首次点击需 0.5~2 秒唤醒，期间消息无法到达。

② content script 未注入

页面为 chrome://、edge://、file:// 等受保护协议，或页面早于扩展打开，注入失败。

③ 扩展权限不足

首次安装后未在目标站点授权，或被浏览器限制为「仅在点击时运行」。

④ 通信通道异常

极少数情况下扩展内部消息通道异常，重新加载扩展可恢复。

1
等待 2 秒后再次点击Service Worker 冷启动后自动就绪，再次点击「开始录制」通常即可成功。
2
切换到普通网页确认当前标签页为 https:// 或 http:// 协议，扩展无法操作浏览器内置页。
3
刷新目标页面若页面早于扩展安装打开，content script 未注入，刷新后重新加载即可。
4
重新加载扩展打开 chrome://extensions，找到 StepFlow，点击刷新图标（↻），然后刷新目标页面。
5
检查扩展权限在扩展详情页确认「在所有网站上」已授权，并开启「允许在无痕模式下运行」（如需要）。

操作被录制到了，但截图流水线被跳过或静默失败。常见原因：

① 最小间隔过滤

默认 900ms 内的连续点击只保存第一次，快速操作时大量步骤被丢弃。

② 自动截图已关闭

设置中「自动截图」被关闭，只记录操作类型和坐标，不生成截图。

③ 截图超出存储限制

单张截图超过 5MB（高分屏+高质量）时，chrome.storage.local 写入失败，步骤静默丢弃。

④ 截图权限被拒

浏览器安全策略（如 DRM 内容页）拒绝截图，返回空图或报错。

1
降低截图质量设置 → 截图质量调至 50~60%，大幅缩小单张体积。
2
增大最小间隔设置 → 最小间隔调至 1200~1500ms，操作稍慢即可保留每一步。
3
确认「自动截图」已开启在设置页检查开关状态。
4
查看控制台报错F12 → Console，搜索 [StepFlow]，报错信息会明确指出失败原因。

StepFlow 每次点击后执行截图 → 图像解码 → Canvas 合成标注 → JPEG 编码 → 存储完整流水线，在低配设备或高分屏上容易感知延迟。

🖼 截图分辨率过高

2K/4K/HiDPI 屏截图像素数是普通屏 2~4 倍，处理时间成倍增加。

🎨 Canvas 标注合成

OffscreenCanvas 绘制 + JPEG 编码通常耗时 80~400ms/步。

💾 存储写入延迟

大截图接近 storage 5MB 上限时写入速度显著下降。

⏱ 最小间隔过短

快速连点触发截图队列堆积，前一次未完成就开始下一次。

1
降低截图质量至 50~60%最立竿见影，处理耗时减少约 50%，视觉差异几乎不可见。
2
增大最小间隔至 1500~2000ms队列不再堆积，每次流水线有足够时间完成。
3
关闭涟漪效果减少录制期间 DOM 操作和 CSS 动画的额外负担。
4
改用「无标注」模式跳过 Canvas 合成步骤，每步节省 80~300ms。
💡 推荐配置（高分屏 / 低配设备）：截图质量 55% · 最小间隔 1500ms · 关闭涟漪 · 无标注模式

录制期间截图被逐条写入 chrome.storage.local，每张可能达数百 KB 到数 MB。步骤较多时存储总量可能超过 10MB，浏览器持续 I/O 操作导致整体变慢。

1
录制完后及时导出并删除会话打开查看器 → 导出 HTML → 回到面板删除该会话，释放存储空间。
2
降低截图质量录制前在设置中将质量调至 55~65%，30 步以内的录制总存储量可控制在 3MB 以内。
3
分段录制长流程拆成多段（每段 <30 步），录完一段就导出删除，再开始下一段。
4
手动清理残留数据F12 → Application → Local Storage → 找到扩展存储，删除 sf_sessions 键和所有 step_ 开头的键。
⚠️ 手动清除存储不可恢复，请先完成导出再操作。

Word 导出乱码几乎都是文件编码与 Word 解析编码不匹配引起的。StepFlow 导出 UTF-8 编码，而 Windows 上旧版 Word 默认以 GBK/GB2312 打开。

1
用「导入」而非直接双击打开Word 中选择「文件 → 打开 → 浏览」，点「打开」旁的下拉箭头，选「打开并修复」或「以其他编码打开」→ 选 Unicode (UTF-8)。
2
另存为 .docx 格式后重新打开打开后若中文正常，立即另存为 .docx 格式，之后打开就不会再乱码。
3
使用 WPS 或 LibreOffice 打开这两款软件对 UTF-8 编码的兼容性更好，可作为临时替代方案。
4
优先使用导出 HTML 格式HTML 文件在浏览器中显示，完全避免字符集兼容问题，保留完整样式和截图互动效果。
💡 建议优先使用「导出 HTML」替代 Word，保留完整样式和截图互动效果，且任意设备均可直接用浏览器查看。

PDF 图片模糊通常有三个来源：原始截图质量不足、PDF 转换时二次压缩，或打印缩放比例影响。

① 截图质量本身偏低

录制时质量设置为 50% 以下，JPEG 压缩伪影明显，放大到 PDF 打印尺寸后更清晰可见。

② 浏览器打印二次压缩

Chrome「打印 → 另存为 PDF」默认对嵌入图片降分辨率处理（DPI 约 96），比屏幕原始分辨率低。

③ 页面缩放比例影响

打印时若缩放比例低于 100%，图片被等比缩小后嵌入 PDF，放大后就会模糊。

1
提高录制时截图质量至 85~95%质量越高，JPEG 细节保留越好，PDF 中图片更清晰。
2
打印时设置缩放为 100%在 Chrome 打印对话框中「更多设置 → 缩放」选「100」，避免内容被缩小。
3
开启「背景图形」并选择高质量选项打印设置中勾选「背景图形」，在「高级」中选择更高的图像质量选项（不同浏览器版本位置略有不同）。
4
改用专业 PDF 工具转换将导出的 HTML 用 Adobe Acrobat 或 Puppeteer 转 PDF，可设置 printBackground: true、DPI 300，图片质量显著优于浏览器内置打印。

录制数据存储在 chrome.storage.local 中，以下情况会导致数据丢失：

① 浏览器清除站点数据

在 Chrome 设置中「清除浏览数据」时，若勾选了「托管的应用程序数据」，扩展存储会被一并清除。

② 扩展被卸载后重装

卸载扩展时 Chrome 会删除其所有本地存储数据，重装后历史记录无法恢复。

③ 存储配额溢出

chrome.storage.local 默认上限 10MB，超出后新写入失败，极端情况下可能触发存储重置。

④ 浏览器 Profile 切换

Chrome 多用户 Profile 之间数据不共享，切换 Profile 后看不到录制记录是正常的。

💡 预防：录制完成后立即导出 HTML——本地导出是最可靠的持久化方式，不依赖扩展存储。
⚠️ 一旦数据从 chrome.storage.local 中删除，无法恢复。请养成录制完即导出的习惯。

StepFlow 目前一次录制只绑定一个标签页（即开始录制时的活跃 Tab）。切换到其他标签页时，步骤仍会被记录，但截图只能截取切换时可见的那个标签页内容。

1
分段录制，章节合并对每个标签页分别录制一段，在查看器中用章节功能将多段内容组织成一个完整教程。
2
录制期间避免切换标签如果流程必须跨页，尽量在同一标签页通过「在当前页打开」的方式完成跳转，而非新开标签。
💡 多标签页完整录制是计划中的未来功能，敬请期待后续版本更新。

扩展更新后，旧版 Service Worker 和 content script 可能仍在内存中运行，新版代码未完全生效，导致行为异常或按钮无响应。

1
强制重新加载扩展打开 chrome://extensions，找到 StepFlow，点击卡片右下角的刷新图标（↻）。
2
刷新所有目标页面content script 只在页面加载时注入，已打开的标签页需手动刷新（Ctrl+R）。
3
重启浏览器若以上操作后仍异常，完全关闭并重新打开 Chrome，确保旧进程完全退出。
4
检查设置数据兼容性新版本若修改了设置结构，旧的存储数据可能不兼容。可在 F12 → Application → Local Storage 中删除 sf_settings 键，让扩展恢复默认设置。
5
重装扩展（最终方案）卸载扩展（注意提前导出所有录制内容）→ 重新安装最新版本，彻底清除旧版残留。
⚠️ 执行步骤 5 前，务必先导出所有录制记录，卸载扩展会删除全部本地数据。

章节信息存储在会话的 chapters 字段中，以下情况会导致章节在导出文件中缺失：

① 章节未保存成功

点击「+章节」后未等待保存响应就关闭了查看器，章节数据可能未写入存储。

② 「包含章节」选项未开启

设置中「导出时包含章节标题」被关闭，所有格式导出都不会插入章节分隔。

③ 查看器不兼容样式

章节分隔线依赖 CSS 样式，在 Word 或纯文本查看器中可能无法正确渲染。

1
确认「导出时包含章节标题」已开启在设置面板找到相关开关，确保已启用（默认开启）。
2
用浏览器打开导出的 HTML将导出文件用 Chrome 打开，章节分隔线应完整显示；若此时正常但 Word 中异常，属于 Word 样式兼容问题。
3
重新添加并立即导出若章节已丢失，在查看器中重新插入，保存后立即导出，不要再次刷新页面。

标注合成发生在 Service Worker 的 OffscreenCanvas 中，以下情况会导致标注缺失：

① 标注形状被设为「无」

录制横幅或右键菜单中选择了「✕ 无标注」，截图不会添加任何图形。

② 标注开关已关闭

设置面板中「点击时合成标注到截图」被关闭，即使选了形状也不会出现标注。

③ Canvas 合成异常

截图文件解码失败或 OffscreenCanvas 在该浏览器版本不可用，会 fallback 到原始截图。

④ 标注颜色与背景融合

若标注颜色设置为白色或接近背景色，视觉上难以识别，并非真的缺失。

1
在录制横幅选择标注形状点击横幅「✏️ 标注」按钮，选择圆圈/椭圆/矩形/箭头，默认是「无」。
2
开启设置中的标注开关设置面板 → 「点击时合成标注到截图」→ 确保已开启。
3
检查标注颜色设置 → 标注颜色，确保颜色与页面背景形成对比（默认红色 #FF4444）。
4
增大标注大小设置 → 标注大小改为「大」，增加标注图形的像素尺寸，更容易发现。
5
查看控制台报错F12 → Console，搜索 [StepFlow] annotateScreenshot error，定位具体失败原因。
6
确认浏览器版本支持 OffscreenCanvasChrome 69+ 支持，若使用旧版浏览器请升级到最新版。
💡 快速验证：在白色背景页面上点击，观察截图中红色圆圈是否出现。若出现，说明标注功能正常，只是在深色背景上不明显。

最常见原因是两次点击间隔小于「最小时间间隔」（默认 900ms），系统主动过滤了连续重复步骤。其次，截图文件过大导致 chrome.storage.local 写入失败时，步骤也会静默丢失（控制台可见 [StepFlow] 报错）。

① 最小间隔过滤

默认 900ms 内的连续点击只保存第一次，快速操作时步骤被丢弃。

② 截图写入存储失败

单张截图超出 chrome.storage.local 写入限制时，该步骤静默丢弃，无界面提示。

③ Service Worker 被休眠

长时间无操作后 Worker 休眠，重新激活期间（0.5~2s）的点击可能被忽略。

④ 页面快速跳转

点击后页面立即跳转或刷新，截图流水线未完成就被中断，该步骤丢失。

1
增大最小间隔至 1200~1500ms在设置中调整，留出截图流水线足够的完成时间。
2
降低截图质量至 55~65%减小单张体积，避免存储写入失败。
3
使用自定义区域录制框选关键区域，单张图片体积降至全屏的 10~30%，写入更可靠。
4
查看控制台报错F12 → Console，过滤关键字 [StepFlow]，录制过程中任何报错都会在此显示。

Service Worker 在空闲约 30 秒后会被浏览器强制休眠，内存中的录制状态会丢失。如果录制中途长时间没有操作，之后的点击可能无法被识别为有效步骤，停止后会话内容为空。

① Service Worker 被休眠

录制期间 30s+ 无操作，Worker 进入休眠，内存状态清空，录制事实上已中断。

② 存储写入全部失败

所有步骤截图均因超限写入失败，步骤数据虽有记录但视作空会话。

③ 录制目标页被关闭

录制期间关闭了目标标签页，content script 断开连接，后续步骤无法传递到后台。

1
录制前确认「录制中」状态开始后检查扩展图标是否有红色圆点闪烁，确保 Worker 已就绪。
2
保持操作频率，避免长时间停顿录制期间每 20 秒以内至少有一次操作，防止 Worker 进入休眠。
3
不要关闭录制目标页录制期间保持目标标签页开启，切换其他标签可以，但不要关闭。
4
重新录制若确认数据已丢失，重新录制该段流程；下次录制前先降低截图质量和加大间隔。
💡 录制中途若需长时间暂停，建议先「停止录制」导出已有内容，之后再开始新一段录制。

Badge 更新依赖 chrome.action.setBadgeText，以下情况会导致红点不显示或延迟显示：

① Service Worker 冷启动延迟

Worker 刚被唤醒（冷启动），首次 Badge 设置可能延迟 1~2 秒，并非录制失败。

② 扩展图标被隐藏

若 StepFlow 被收进 Chrome 工具栏的「更多扩展」折叠菜单，红点可能显示在折叠区域内，不在主工具栏可见。

③ 扩展状态异常

极少数情况下 Service Worker 启动失败，Badge API 调用未执行，重新加载扩展可恢复。

1
等待 2 秒再观察冷启动后 Badge 会自动出现，稍等片刻即可。
2
将扩展图标固定到工具栏点击工具栏「拼图」图标 → 找到 StepFlow → 点击图钉固定，确保红点在可见位置。
3
重新加载扩展打开 chrome://extensions，找到 StepFlow，点击刷新图标（↻），然后刷新目标页面后重试。
💡 可以通过面板内的「当前状态」文字确认录制是否已启动，不完全依赖 Badge 红点判断。

录制数据存储在 chrome.storage.local 中。提供两种清除方式：逐条删除（推荐，可选择性保留）和一键全清（开发者工具手动操作）。

1
逐条删除（推荐）在扩展面板的「历史」列表中，点击每条会话右侧的删除按钮，可选择性保留需要的录制记录。
2
通过开发者工具一键清空打开 F12 → Application → Storage → Extension Storage，找到 StepFlow，在存储列表中删除 sf_sessions 键及所有 step_ 开头的键。
3
验证清除成功刷新扩展面板，历史列表应显示为空，说明所有会话数据已清除。
⚠️ 删除操作不可撤销，请确认已导出所有需要保留的教程后再执行清除。
© 卢制流程  ·  StepFlows 智能录制工具  ·  手册版本 v2026.3.14