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

前言：为什么要做 Step Recorder？

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

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

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

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

它能做什么？

能力	说明
一键录制	Popup 开始/停止，自动记录操作步骤
事件类型	点击、输入、下拉选择、页面跳转
跨标签录制	多 Tab 切换也会记为步骤
自动截图	每步延迟截图，点击位置红圈标注
敏感信息脱敏	手机号、密码、身份证、银行卡等
本地存储	IndexedDB（Dexie），不上传服务器
多格式导出	MD（ZIP 含图）、HTML、DOCX、PDF
侧边栏	Chrome Side Panel 预览截图网格

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

技术栈选型

复制代码

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 条录制包。

整体架构

三条链路：

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

核心实现拆解

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

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

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

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

typescript 复制代码

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：先落库事件 → 再截图 → 再更新截图记录。用户感觉只是「稍等一下」，但数据一致。

截图流程简述：

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

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

3. 跨标签录制

Session 里维护 tabIds: number[]：

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

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

4. 本地存储：Dexie 表设计

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

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

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

5. 导出：踩过的坑

格式	实现要点
Markdown	相对路径引用图片，打成 ZIP，避免单文件内嵌巨型 Base64
HTML	单文件可双击打开，图片 Base64 内嵌
DOCX	`docx` 库，`ImageRun` 嵌入截图
PDF	不用 html2canvas 写中文（易乱码）；用 Canvas 绘制中文标题/正文，截图 `addImage` 高清嵌入

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

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

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

权限说明（过审必备）

权限	用途
`storage` / `storage.session`	录制会话
`tabs` / `activeTab`	当前页、截图
`sidePanel`	侧边栏预览
`scripting`	预留
`<all_urls>`	在任意业务页录制（数据仍本地）

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

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

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

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

本地安装与开发

bash 复制代码

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

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

使用注意：

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

生产构建：