Vue3 写了一个 Chrome 步骤录制插件：自动截图、本地存储、一键导出教程

前言：为什么要做 Step Recorder？

做过 SaaS 培训、ERP 操作手册或产品 Help Center 的同学，大概都经历过这种事：

• 用 Scribe / Tango 录流程很爽，但依赖云端、有付费门槛；
• 自己截图 + 写 Word，一张图一张图粘贴，改一次流程要重来；
• 纯前端团队希望数据不出内网，教程却不得不交给第三方。

于是我做了 Step Recorder：一个基于 Chrome Extension Manifest V3 的网页操作步骤录制工具——你在页面上正常操作，它自动记录点击、输入、跳转，逐步截图，最后导出 Markdown / HTML / Word / PDF 图文教程。

核心原则：纯前端、数据只存本机、免费使用。

截图预览

它能做什么？

步骤标题格式为 「步骤 ①②③…」，和截图上的圆圈序号一致，读起来像正式教程。

技术栈选型

Vue 3 + TypeScript + Vite
Pinia（状态） + TailwindCSS（UI）
CRXJS Vite Plugin（MV3 扩展工程化）
Dexie.js（IndexedDB）
docx / jsPDF / JSZip（文档导出）

为什么不用纯 JS？

• MV3 + TS 让消息类型、事件结构可维护；
• CRXJS 把 Popup / Background / Content Script 当成 Vite 多入口，开发体验接近普通 Vue 项目；
• Pinia 统一管理录制状态、导出标题、最近 2 条录制包。

整体架构

flowchart TB
  subgraph UI
    Popup[Popup 弹窗]
    SidePanel[Side Panel 侧边栏]
  end

  subgraph Extension
    BG[Background Service Worker]
    CS[Content Script]
  end

  subgraph Storage
    IDB[(IndexedDB)]
    Session[chrome.storage.session]
  end

  Popup -->|开始/停止/导出| BG
  SidePanel -->|查看截图| BG
  CS -->|RECORDER_EVENT| BG
  BG -->|截图/标注| CS
  BG --> IDB
  BG --> Session
  BG -->|captureVisibleTab| Screenshot[标签页截图]

三条链路：

1. Content Script：监听 DOM 事件 → 生成步骤描述所需数据 → chrome.runtime.sendMessage 发给 Background。  
2. Background：串行处理事件（避免步骤号乱序）→ 写库 → 调 chrome.tabs.captureVisibleTab 截图 → 通知 Content 做标注压缩。  
3. Popup：读写 Pinia → 调 DB 拉最近录制 → 触发导出服务生成文件。

核心实现拆解

1. Content Script：怎么「听懂」用户操作？

在 content/recorder.ts 里用捕获阶段监听：

• click：不限于 <button>，可点击的 div、span 也记录；400ms 内同元素去重；
• input / change：输入防抖，避免每个字符一步；
• select：记录下拉选项；
• 过滤扩展自身 DOM，避免误录 Popup 注入节点。

每一步带上 CSS Selector + XPath + 坐标，方便后续截图标注：

const data: EventData = {
  type: 'click',
  text: getElementText(labelSource),
  selector: getCssSelector(labelSource),
  xpath: getXPath(labelSource),
  url: window.location.href,
  x: event.clientX,
  y: event.clientY,
}
sendEvent(data)

步骤文案由 stepGenerator.ts 统一生成，例如：点击「保存」、输入「用户名」、进入「订单列表」。

2. Background：为什么要「串行」处理事件？

MV3 的 Service Worker 可能因并发消息出现：

• stepNo 重复或跳号；
• 截图和事件顺序颠倒。

因此在 background/recorder.ts 里用队列串行处理 RECORDER_EVENT：先落库事件 → 再截图 → 再更新截图记录。用户感觉只是「稍等一下」，但数据一致。

截图流程简述：

1. chrome.tabs.captureVisibleTab 拿到 DataURL；  
2. 发给 Content Script，在 Canvas 上画红色圆环 + 十字 + 步骤序号；  
3. JPEG 压缩（限制长边、质量）后写入 IndexedDB。

“注意：截图只能针对当前前台标签，跨标签录制时切换 Tab 会记导航步，但截图需在对应页面前台时完成。”

3. 跨标签录制

Session 里维护 tabIds: number[]：

• 开始录制时，对可录制的标签尝试注入并 RECORDER_START；
• tabs.onActivated：切换标签记一条「切换到 xxx」；
• tabs.onUpdated：页面加载完成可记导航。

适合「登录页 → 业务系统 → 另一个后台」这类真实培训场景。

4. 本地存储：Dexie 表设计

• tasks：一次录制任务  
• events：步骤事件  
• screenshots：每步截图

为控制体积，只保留最近 2 条任务（pruneTasksKeepLatest），支持单步删除、一键清空。

隐私卖点在这里：没有自己的后端，IndexedDB 在用户浏览器里，卸载扩展或清数据即消失。

5. 导出：踩过的坑

导出前可自定义标题；步骤标题统一 getStepTitle() → 步骤 ② 这种格式。

6. Popup UI：Vue3 的工程化体验

• RecordControls：录制状态、跨标签提示；  
• RecentRecordings：最近 2 条截图包网格、预览、删除；  
• ExportButtons：格式选择 + 标题输入；  
• 头部用 chrome.runtime.getURL('public/icons/icon48.png') 加载扩展图标。

开发：npm run dev + CRXJS HMR，改 Vue 组件基本能热更新。

权限说明（过审必备）

Chrome 网上应用店会重点问 <all_urls> 和隐私——务必在商店说明里写清：仅用户主动录制时使用，不上传数据。

上架 Chrome 应用店：我填过的关键点

1. 打包：npm run build 后，对 dist 目录内容打 ZIP（根目录要有 manifest.json）。  
2. 隐私政策：必须有 HTTPS 可访问 的独立页面（不能填打不开的首页）。  
3. 远程代码：当前版本全部 JS 打包在扩展内 → 选 「否」。  
4. 商店说明：写清用途、场景、权限、本地存储。  
5. 开发者注册：一次性 $5。

隐私政策可参考项目内 docs/privacy-policy.html，部署到自己的站点后再填 URL。

本地安装与开发

git clone <your-repo>
cd STEP
npm install
npm run dev

Chrome 打开 chrome://extensions → 开发者模式 → 加载已解压的扩展程序 → 选择 dist 目录。

使用注意：

1. 先打开要录制的普通网页（非 chrome://）；  
2. 若 Content Script 未注入，刷新目标页 再录；  
3. 停止录制后在 Popup 选格式导出。

生产构建：

npm run build

和 Scribe / Tango 的差异（个人看法）

适合：内网系统培训、不想把操作录到第三方、要 Word/PDF 交差 的场景。

后续规划

• AI 优化步骤描述（OpenAI / DeepSeek / Ollama，可选、需单独说明隐私）
• 步骤编辑、拖拽排序
• 更多导出模板

欢迎 Star、Issue 和 PR。

总结

Step Recorder 想证明一件事：不用后端，也能做出够用的操作教程录制工具。Vue3 + MV3 + IndexedDB 的组合，在开发体验、隐私和可维护性之间比较平衡。

如果你也在做内部培训文档、帮助中心或 SOP，不妨试一下

• 作者：ZHOUYI
• 站点：www.zhouyi.run
• 项目：Step Recorder（Chrome 步骤录制扩展）
• 代码已开源，欢迎交流：gitee.com/Z568_568/St…