StepFlow 使用手册
一键录制网页操作步骤,自动生成带截图的操作指南,导出为 PDF、Word、Markdown 或 HTML。
🖱️ 自动捕捉点击 📸 逐步截图 ⌨️ 输入内容记录 📄 一键导出文档
🔧
安装扩展
支持所有基于 Chromium 的浏览器,包括 Chrome、Edge、Brave 等。
🌐 Chrome 安装步骤
1
打开扩展管理页
在地址栏输入 chrome://extensions/ 并回车,或点击菜单 → 更多工具 → 扩展程序。
2
开启开发者模式
点击页面右上角的「开发者模式」开关,将其打开(显示为蓝色)。
🎬 开启开发者模式演示
chrome://extensions 开发者模式 👈 打开这个开关
3
加载扩展文件夹
点击「加载已解压的扩展程序」,在弹出的文件选择框中,选择 stepflow-extension 文件夹,点击「选择文件夹」。
🎬 加载扩展文件夹演示
📂 加载已解压的扩展程序 stepflow-extension/
4
固定到工具栏(推荐)
点击浏览器右上角的拼图图标 🧩,找到 StepFlow,点击 📌 图钉图标将其固定到工具栏,方便随时使用。
🎬 固定到工具栏演示
📌 固定后随时点击使用
💡 固定后点击工具栏中的 StepFlow 图标(紫色对勾)即可打开弹窗。
🎯 拖拽安装(最快捷方式)
除了点击「加载已解压的扩展程序」按钮选择文件夹,你还可以直接将整个 stepflow-extension 文件夹拖拽到扩展管理页面!这是最快、最直观的安装方式。
🎬 拖拽安装演示(两种方式)
📁 StepFlow-v1.0.0 (解压后) stepflow-extension 📂 文件夹 · 2026/3/15 10:57 拖拽到此处 👉 chrome://extensions 开发者模式 加载已解压的扩展程序 📥 将 stepflow-extension 文件夹 拖拽到此处即可自动加载
A
方式 A:点击按钮加载
开启开发者模式 → 点击「加载已解压的扩展程序」→ 选择 stepflow-extension 文件夹 → 点击「选择文件夹」。
B
方式 B:拖拽文件夹(推荐 ⚡)
打开文件管理器,找到解压后的 stepflow-extension 文件夹 → 按住鼠标左键不放,将整个文件夹拖动到浏览器扩展管理页面的任意空白处 → 松开鼠标即完成加载。无需点击任何按钮。
🛡️ 为什么离线安装最安全?

StepFlow 推荐使用离线安装包(.zip),而非通过浏览器商店安装。以下是原因:

文件来源完全可控
安装包直接从官网 stepflows.cn 下载,不经过 Google / Edge 等第三方商店的中转和审核修改。你下载的就是我们打包的原版文件。
无需等待商店审核
每次更新新版本,商店审核可能需要数天甚至数周。离线安装包在官网上线后立即可用,第一时间获取最新功能和安全修复。
不受地区网络限制
Chrome 商店在国内部分地区访问不稳定或需要翻墙。离线安装包下载一次即可永久使用,不依赖任何外部服务。
代码透明可审查
离线安装包是未压缩的源码形式,你可以随时查看每一个 JavaScript 文件的内容,确认没有可疑代码。
⚠️
唯一注意事项
安装后将 stepflow-extension 文件夹固定在一个位置,不要移动或删除它。如果需要更新,只需下载新版 zip 并覆盖同名文件即可。
💡 总结:离线安装 = 最快获取最新版本 + 完全可控 + 不受地域限制 = 最安全的安装方式。 这也是为什么我们在下载页标注「推荐下载」的原因。
🔷 Microsoft Edge 安装步骤
步骤与 Chrome 完全相同,只需将地址改为 edge://extensions/,其余操作一致。
ℹ️ Edge 首次加载时可能会弹出「来自其他来源的扩展」提示,点击「仍然启用」即可继续使用。
🚀
快速上手
5 步完成第一次录制,全程不超过 3 分钟。
1
打开目标网页
先导航到你想录制操作的网页。StepFlow 支持任意普通网站,但无法录制浏览器内部页面(如 chrome:// 开头的页面)。
2
点击工具栏图标,开始录制
点击工具栏中的 StepFlow 图标(紫色对勾)打开弹窗,再点击紫色的「开始录制」按钮。此时页面顶部会出现一个紫色录制横幅提示。
🎬 点击图标 → 打开弹窗 → 开始录制
步骤 1 点击图标 StepFlow 准备就绪 ▶ 开始录制 ⏸ 暂停 👁 预览 打开弹窗 步骤 3 ● 录制中 开始录制!
🔴 录制状态:弹窗状态栏会出现红色闪烁点和「正在录制...」文字。
3
正常操作网页
在页面上正常操作:点击按钮、链接,填写表单,选择下拉菜单……每一步都会被自动捕捉并截图记录。
🎬 操作网页时的录制效果
提交 输入内容... 3 步 🔴 正在录制... StepFlow
4
停止录制
操作完成后,再次点击工具栏图标打开弹窗,点击红色「停止录制」按钮,录制结束。
5
查看并导出
停止后自动跳转到步骤查看器。你可以逐步浏览带截图的操作流程,编辑步骤描述,然后点击「导出」生成文档。
📋
扩展完整使用流程
从打开弹窗到导出文档,完整展示 StepFlow 扩展的每一步操作。
1
打开扩展弹窗
点击浏览器工具栏中的 StepFlow 图标(紫色对勾),打开扩展弹窗。弹窗顶部显示当前录制状态,中间是控制按钮,底部是最近录制列表。
🎬 扩展弹窗界面介绍
StepFlow 智能操作录制 ☁️ 👤 准备就绪 0 步 ▶ 开始录制 ⏸ 暂停 👁 预览 最近录制 新录制 - 今天 14:30 📌 5步骤 🕐 2分钟前 ① 顶部状态栏 ② 控制按钮 ③ 最近录制 ④ 用户/同步
2
登录账号(可选)
点击弹窗右上角的用户图标 👤,输入用户名和密码登录。登录后,你的录制记录会自动同步到云端,在任何设备上都能查看和管理。
🎬 登录弹窗演示
☁️ 云端同步登录 用户登录 账号注册 请输入用户名 请输入密码 登录 用户名
💡 未登录也能使用所有录制功能,但数据仅保存在本地浏览器中。建议登录以同步到云端。
3
录制网页操作
点击「开始录制」按钮,在页面上正常操作。每次点击会自动截图,输入的内容也会被记录。页面顶部会显示紫色录制横幅。
🎬 录制中的页面效果
🔴 正在录制... ✏️ 标注 | ⏹ 停止 请输入邮箱... 提交 3 步
4
查看与编辑录制内容
停止录制后自动跳转到查看器。左侧是步骤列表(含章节),右侧是每一步的截图和详细描述。你可以编辑描述、调整顺序、删除步骤、添加章节。
🎬 查看器界面演示
新录制 - 2026年6月 ← 所有流程 ⬇ 导出 步骤列表 4步 📑 登录流程 1 点击登录按钮 点击 2 输入账号密码 输入 📑 操作页面 + 插入章节 📑 登录流程 1 点击 点击按钮:开始录制 📸 截图区域 🔗 页面地址 🕐 操作时间
5
导出操作文档
点击顶部「导出」按钮,选择格式(PDF / Word / Markdown / HTML),即可生成包含所有截图和步骤描述的完整文档。
🎬 导出选项演示
⬇ 导出文档 📄 PDF 📝 Word 📋 Markdown 选择格式
6
云端同步与管理
登录后,所有录制记录会自动同步到云端。访问 用户中心 可以查看、管理、删除所有录制,查看存储用量和账号安全状态。
🎬 云端用户中心界面
StepFlow 👤 用户名 概览 我的录制 账号安全 设置 12 总录制数 3 本月录制 最近录制 新录制 - 今天 14:30 · 5步骤
☁️ 云端存储让你在任何设备上都能访问录制记录,数据更安全,不再担心浏览器清理导致记录丢失。
功能介绍
StepFlow 的所有核心功能一览。
🔴 录制控制
▶️ 开始录制 点击弹窗中的「开始录制」按钮,开始捕捉当前标签页的所有操作。
⏸️ 暂停录制 录制中点击「暂停」,可以临时停止记录(例如跳过某些不需要的步骤),再点「继续」恢复。
⏹️ 停止录制 完成操作后点击「停止录制」,所有步骤保存完成,自动跳转到查看器。
📸 自动截图 每次点击时自动截取当前页面的屏幕截图,作为该步骤的配图。截图使用 JPEG 压缩,体积小、不卡顿。
🔵 点击动画 录制时每次点击位置会有紫色涟漪动画,方便你确认已被记录。
✏️ 步骤编辑
📝 编辑描述 在查看器中点击步骤标题文字,可以直接修改描述,按 Enter 保存,或点击其他地方自动保存。
↑↓ 排序步骤 点击步骤卡片右上角的 ↑ ↓ 箭头按钮,可以调整该步骤在流程中的顺序。
🗑️ 删除步骤 点击步骤卡片右上角的 🗑 垃圾桶按钮删除该步骤(会弹出确认提示,防止误删)。
手动添加 在查看器顶部点击「+ 添加步骤」,可以手动输入一个步骤的描述,适合补充录制时遗漏的操作。
🔎 大图预览 点击步骤中的截图可以全屏放大查看,点击空白区域或右上角 ✕ 关闭。
🏷️ 重命名录制 在查看器顶部的标题输入框中点击,可以修改该录制的名称,方便管理多个流程。
📑 章节目录功能
📑 什么是章节 章节是手动插入步骤之间的「分隔标题」,就像书本的章节目录。章节不计入步骤序号,只起到视觉分组作用。
插入章节 在查看器中先点击某一步骤,然后点击侧边栏底部的「+ 插入章节」按钮,章节将插入在当前步骤之后。
✏️ 重命名章节 点击侧边栏中的章节标题文字,弹出输入框,输入新名称后确认即可。
删除章节 鼠标悬停到侧边栏的章节标题上,右侧会出现 ✕ 删除按钮,点击即可删除(不影响步骤数据)。
⬇️ 导出含章节 在设置中开启「导出时包含章节标题」后,所有导出格式(PDF/Word/HTML/Markdown)都会在对应位置插入章节分隔标题。
🖊️ 标注功能
✏️ 录制时标注 录制中,点击页面顶部横幅的「✏️ 标注」按钮(或在页面上右键),选择形状(圆圈/椭圆/矩形/箭头),之后每次点击会自动将标注合成到截图上。
🔴 标注形状 支持 4 种形状:⬤ 圆圈、⬭ 椭圆、▬ 矩形、➤ 箭头。选择「✕ 无」可关闭标注。
⚙️ 标注开关 设置面板中「点击时合成标注到截图」可全局开关标注功能。关闭后即使选了形状,截图上也不会出现标注。
🖌️ 二次编辑标注 在查看器中悬停到步骤截图上,点击「✏️ 编辑标注」按钮,可以打开全功能画布编辑器,支持箭头、矩形、画笔、文字、马赛克等 10 种工具,可撤销,保存后立即生效。
⬇️ 导出文档
📄 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 格式——任何浏览器都能打开,图片完整内嵌,不用担心排版错乱。
📑
章节让文档更清晰
录制流程较长时,善用章节功能将步骤分组。章节标题不占步骤序号,导出后在各格式中自动插入章节分隔,专业感翻倍。
🖊️
标注突出关键操作
录制前在横幅选好标注形状(圆圈、箭头等),每次点击时自动高亮操作位置,让阅读者一眼看清「点哪里」。
常见问题
点击问题标题可展开 / 收起详细说明与解决步骤。共 25 个常见问题。

最常见的两个原因是 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
验证清除成功刷新扩展面板,历史列表应显示为空,说明所有会话数据已清除。
⚠️ 删除操作不可撤销,请确认已导出所有需要保留的教程后再执行清除。

扩展面板(popup)依赖 Service Worker 提供状态数据,若 Worker 处于休眠或初始化失败状态,面板内容可能无法渲染,按钮事件也无法绑定。

① Service Worker 冷启动超时

面板等待 Worker 响应状态,若 2~3 秒内未收到回复,会回退到默认空状态。

② 消息通道阻塞

前一个消息未处理完,后续消息排队,面板初始化被挂起。

③ 扩展文件损坏

更新过程中文件未完全替换,导致 popup.js 加载异常或语法错误。

④ 与其他扩展冲突

某些广告拦截器、隐私保护扩展可能干扰 StepFlow 的 DOM 或消息通信。

1
等待 3 秒后重新打开面板第一次冷启动后,再次点击扩展图标通常即可正常显示。
2
重新加载扩展打开 chrome://extensions,找到 StepFlow,点击刷新图标(↻),强制重启 Worker。
3
检查冲突扩展临时禁用广告拦截、隐私保护类扩展,测试 StepFlow 是否恢复正常。
4
重装扩展卸载后重新安装最新版本(注意提前导出数据),可彻底清除文件损坏问题。
💡 若面板偶尔空白但不影响功能,通常是 Worker 冷启动的正常现象,无需处理。

StepFlow 云端服务依赖 https://www.stepflows.cn/api 接口,登录或同步失败通常由网络、账号状态或接口异常引起。

① 网络连接问题

公司内网、代理或防火墙可能拦截了 stepflows.cn 的请求。

② 账号密码错误

密码区分大小写,若忘记密码可前往官网使用「忘记密码」功能重置。

③ 云端接口维护

服务器升级或维护期间,API 可能短暂不可用,稍后重试即可。

④ 存储令牌过期

登录态 Token 长期未刷新可能失效,退出重新登录即可恢复。

1
检查网络连通性浏览器中直接访问 https://www.stepflows.cn,确认官网可正常打开。
2
关闭代理/VPN 后重试某些代理规则可能误拦截国内域名,临时关闭后测试登录。
3
确认账号密码正确注意大小写,若连续失败 5 次账号可能被临时锁定,等待 15 分钟后再试。
4
退出后重新登录点击面板头像 →「退出登录」→ 重新输入账号密码,刷新 Token 状态。
5
查看具体错误信息F12 → Console 中搜索 [CloudAPI],接口返回的错误消息会显示具体原因。
💡 若确定是服务器问题,可稍后再试或联系客服 stepflows@126.com 反馈。

导出文件在浏览器中通过 Blob URL 生成并触发下载,以下情况会导致下载失败或文件损坏。

① 浏览器拦截弹窗/下载

Chrome 安全策略可能拦截自动下载,地址栏右侧会出现拦截提示。

② 数据量过大导致内存溢出

50 步以上的录制 + 高质量截图,Blob 可能达 20~50MB,超出浏览器内存限制。

③ 文件关联程序缺失

.html 文件没有默认浏览器关联,或 .md 文件没有文本编辑器,系统提示「无法打开」。

④ 安全软件误拦截

杀毒软件将自动下载的 HTML 文件误判为可疑文件,自动删除或隔离。

1
允许浏览器下载弹窗点击地址栏右侧的「已拦截弹出式窗口」图标,选择「始终允许 stepflows.cn」。
2
检查下载文件夹Ctrl+J 打开浏览器下载列表,确认文件已下载完成且大小不为 0。
3
分段导出降低体积长流程拆成多段录制,每段导出单独文件,避免单文件过大。
4
右键「用浏览器打开」对于 .html 文件,右键选择「打开方式 → Chrome/Edge」即可正常查看。
5
检查安全软件隔离区若文件下载后消失,查看杀毒软件的隔离区/威胁记录,将 StepFlow 加入白名单。
💡 HTML 格式是最通用的导出格式,无需额外软件,双击即可用浏览器打开。

StepFlow 通过 chrome.contextMenus API 在右键菜单中注册「开始录制」选项,以下情况会导致菜单项缺失。

① 在受保护页面右键

chrome://edge://、Chrome 应用商店、设置页等不允许扩展注入右键菜单。

② 扩展未完全初始化

刚安装或重新加载后,contextMenus 注册需要几秒钟,期间右键不会显示扩展菜单。

③ 菜单被其他扩展覆盖

安装了大量扩展时,右键菜单过长,Chrome 可能折叠部分菜单项到「扩展程序」子菜单中。

④ 权限被撤销

用户在扩展管理页面手动关闭了「读取和更改网站数据」权限,导致菜单无法注册。

1
确认在普通网页上右键仅在 https:// / http:// 页面有效,浏览器内置页不支持。
2
等待 5 秒后重试刚打开浏览器或刚重载扩展时,菜单注册有延迟,稍等片刻再右键。
3
查看「扩展程序」子菜单右键时如果菜单过长,查看「扩展程序」→「StepFlow」子项是否在折叠菜单中。
4
重新加载扩展打开 chrome://extensions,点击 StepFlow 的刷新图标,强制重新注册菜单。
5
直接使用扩展面板录制无需右键菜单,点击工具栏 StepFlow 图标打开面板,点击「开始录制」即可。
💡 右键菜单只是快捷入口,所有功能均可在扩展面板中完成,推荐直接使用面板操作。

自定义区域录制可框选页面中的一部分,仅截取该区域内内容。适合教程聚焦隐私保护降低截图体积等场景。

📐 聚焦关键区域

只录制表单、图表或操作面板,排除页面顶部导航、侧边栏等无关元素。

🔒 保护隐私信息

框选区域时避开个人信息区(如头像、用户名、邮箱),截图不会包含隐私内容。

📉 大幅降低体积

区域截图体积通常为全屏的 10~30%,存储和导出都更快,低配设备更流畅。

🎯 长页面局部教程

页面很长但只需要说明其中一块功能时,区域录制让教程更精简、重点更突出。

1
打开扩展设置点击面板右上角「⚙️ 设置」图标,进入设置页面。
2
开启「自定义录制区域」在设置面板中找到该选项并勾选,保存后返回目标页面。
3
开始录制并框选区域点击「开始录制」后,页面上会出现半透明遮罩,按住鼠标拖动框选需要录制的区域。
4
确认区域后录制松开鼠标确认选区,之后的所有截图将只包含该区域内容。可随时停止录制重新选择。
💡 区域录制时,鼠标点击位置会自动转换为相对于区域的坐标,标注圆圈/箭头位置依然准确。

StepFlow 目前通过手动安装方式分发(开发者模式加载),不会自动更新。需要用户手动下载新版并覆盖安装。

1
导出所有录制数据更新前务必将重要录制导出为 HTML 保存到本地,防止更新过程中数据丢失。
2
下载最新版本访问官网 https://www.stepflows.cn 或官方渠道下载最新版压缩包。
3
解压到原目录覆盖将新版本的文件解压到原扩展目录,覆盖所有旧文件(保留 manifest.json 等核心配置)。
4
重新加载扩展打开 chrome://extensions,找到 StepFlow,点击刷新图标(↻)加载新版代码。
5
验证版本号打开扩展面板,确认版本号已更新。测试「开始录制」功能是否正常。
💡 建议关注官网或公众号获取版本更新通知,大版本更新通常包含重要功能改进和 Bug 修复。

可以。StepFlow 查看器支持对步骤进行多种编辑操作,包括修改标题调整顺序删除步骤添加说明文字等。

1
修改步骤标题点击步骤标题文字,直接输入新的描述。按 Enter 保存,Esc 取消。
2
拖拽调整顺序按住步骤左侧的「⋮⋮」拖拽手柄,上下拖动即可改变步骤排列顺序。
3
删除不需要的步骤点击步骤右上角的「🗑」删除按钮,确认后即可移除该步骤及截图。
4
添加步骤说明点击步骤下方的「+ 添加说明」按钮,可为该步骤补充详细操作描述或注意事项。
5
保存修改编辑完成后点击顶部「💾 保存」按钮,修改会写回 chrome.storage.local,下次打开依然有效。
💡 所有编辑操作均可撤销(Ctrl+Z),误操作后可立即恢复。建议在编辑前先导出一份原始备份。

StepFlow 导出的 HTML 文件使用标准 CSS 和 HTML5 语法,但不同浏览器对样式的解析存在细微差异,尤其是打印样式、阴影效果和渐变背景。

① CSS 前缀差异

部分旧版浏览器需要 -webkit- 等前缀才能正确渲染 flex 布局和渐变背景。

② 打印样式支持度

Chrome 和 Edge 对 @media print 的支持较好,Safari 和 Firefox 在分页符处理上有差异。

③ 字体回退机制

若系统中缺少指定的中文字体,不同浏览器选择的回退字体不同,导致排版差异。

④ 图片加载策略

部分浏览器对 Base64 内嵌图片的加载优先级不同,可能导致页面打开时图片闪烁。

1
推荐使用 Chrome 或 Edge 查看这两款浏览器对 StepFlow 导出的 HTML 支持度最佳,建议作为默认查看工具。
2
避免使用 IE 浏览器Internet Explorer 对现代 CSS 支持极差,强烈建议升级到 Edge 或改用 Chrome。
3
打印/转 PDF 时统一用 Chrome如需打印或转 PDF,统一使用 Chrome 的「打印 → 另存为 PDF」功能,效果最稳定。
4
安装所需字体若排版明显错乱,可安装「PingFang SC」「Microsoft YaHei」等常用中文字体。
💡 HTML 文件是自包含的(所有资源内嵌),无需网络即可查看,但浏览器本身的渲染引擎差异无法完全避免。

Chrome 出于安全考虑,禁止扩展程序在特定受保护页面上执行内容脚本,StepFlow 无法在这些页面上录制操作。

① 浏览器内置页面

chrome://edge://about:// 等浏览器内部地址完全禁止扩展访问。

② Chrome 应用商店

Google 禁止任何扩展在 Chrome Web Store 页面运行,防止恶意扩展操纵商店。

③ 本地文件页面

file:// 协议页面默认不允许扩展注入,需在扩展管理中手动开启「允许访问文件网址」。

④ 企业策略限制

部分公司/学校部署的 Chrome 企业策略可能额外限制了扩展的页面访问权限。

1
切换到普通网页录制StepFlow 只能在 https://http:// 网页上录制,请切换到普通网站。
2
开启文件网址访问(本地页需要)打开 chrome://extensions → 找到 StepFlow → 开启「允许访问文件网址」开关。
3
将本地文件放入简易 HTTP 服务器使用 VS Code 的 Live Server 插件或 Python python -m http.server 启动本地服务器,通过 http://localhost 访问。
4
联系管理员(企业环境)若为公司设备且策略受限,请联系 IT 管理员确认扩展权限策略。
💡 如果你需要录制本地开发页面,推荐使用 Live Server 等工具启动本地服务器,这样既能录制又能获得完整的浏览器功能支持。

StepFlow 支持通过用户名 + 手机号验证码重置密码。请确保你还记得注册时使用的用户名和绑定的手机号。

1
访问忘记密码页面在登录页面点击「忘记密码?」链接,或直接在浏览器访问 https://www.stepflows.cn/forgot-password.html
2
输入用户名填写你注册时使用的用户名,系统会查找关联的手机号。
3
获取短信验证码点击「获取验证码」,短信将发送到你注册时绑定的手机号(演示模式下验证码会直接显示在弹窗中)。
4
设置新密码输入收到的验证码,然后设置新密码(至少 6 位),确认后点击「重置密码」。
5
使用新密码登录重置成功后,返回登录页面,使用用户名和新密码登录即可。
⚠️ 如果你既忘记了用户名,又无法访问注册手机号,目前无法自助找回账号。请提前妥善保存账号信息,或联系客服 stepflows@126.com 寻求帮助。
© 卢制流程 · StepFlows 智能录制工具 · 手册版本 v2026.6.18