# Step Recorder

**Repository Path**: Z568_568/Step-Recorder

## Basic Information

- **Project Name**: Step Recorder
- **Description**: 网页操作步骤录制工具。自动记录点击、输入、页面跳转等操作，截图并生成图文教程。数据全部保存在本地 IndexedDB，支持导出 Markdown / HTML / DOCX / PDF。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: main
- **Homepage**: https://www.zhouyi.run
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2026-06-03
- **Last Updated**: 2026-06-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Chrome-extension, Chrome

## README

# Step Recorder

基于 Chrome Extension Manifest V3 的网页操作步骤录制工具。自动记录点击、输入、页面跳转等操作，截图并生成图文教程。数据全部保存在本地 IndexedDB，支持导出 Markdown / HTML / DOCX / PDF。

## 技术栈

- Vue 3 + TypeScript + Vite
- Pinia + TailwindCSS
- CRXJS Vite Plugin（Manifest V3）
- Dexie.js（IndexedDB）
- docx / jsPDF（文档导出）

## 快速开始

### 1. 安装依赖

```bash
npm install
```

### 2. 生成图标

```bash
node scripts/generate-icons.mjs
```

### 3. 开发模式

```bash
npm run dev
```

### 4. 加载到 Chrome

1. 打开 `chrome://extensions/`
2. 开启「开发者模式」
3. 点击「加载已解压的扩展程序」
4. 选择项目下的 `dist` 目录

### 5. 生产构建

```bash
npm run build
```

构建产物在 `dist` 目录，重新加载扩展即可。

## 使用说明

1. 打开要录制的网页（不能是 `chrome://` 等内部页面）
2. 在 Popup 中点击「开始录制」
3. 在网页中进行操作（点击、输入、选择、跳转）
4. 点击「停止录制」
5. Popup 展示最近 2 次录制的 **完整截图包**（网格预览），一键导出最新录制的全部步骤

> 若录制无反应，请 **刷新目标网页** 后重试。本地仅保留最近 2 条录制，可「一键清空」。

## 项目结构

```
src/
├── popup/           # 扩展弹窗
├── sidepanel/       # Chrome 侧边栏
├── background/      # Service Worker
├── content/         # 内容脚本（事件采集）
├── stores/          # Pinia 状态
├── services/        # 截图标注、文档导出
├── db/              # IndexedDB (Dexie)
├── types/           # TypeScript 类型
└── utils/           # 工具函数
```

## 功能清单

### MVP（已实现）

- [x] 开始 / 停止录制
- [x] 点击、输入、页面跳转、下拉选择记录
- [x] 敏感数据脱敏（手机号、密码、身份证、银行卡）
- [x] 自动截图（chrome.tabs.captureVisibleTab）
- [x] IndexedDB 本地存储
- [x] Markdown 导出

### 第二阶段（已实现）

- [x] HTML / DOCX / PDF 导出
- [x] 截图点击位置红色圆圈标记
- [x] Chrome Side Panel

### 第三阶段（待实现）

- [ ] AI 步骤描述优化
- [ ] OpenAI / DeepSeek / Ollama 接口

## 权限说明

| 权限 | 用途 |
|------|------|
| storage | 录制会话状态 |
| tabs | 获取当前标签页、截图 |
| activeTab | 访问当前活动页 |
| sidePanel | 侧边栏面板 |
| scripting | 动态脚本（预留） |
| \<all_urls\> | 在所有网页录制操作 |

## 开发命令

| 命令 | 说明 |
|------|------|
| `npm run dev` | 开发模式（HMR） |
| `npm run build` | 类型检查 + 生产构建 |
| `npm run lint` | ESLint 检查 |
| `npm run format` | Prettier 格式化 |

## License

MIT