【More Than Coding】用 SOLO 10分钟把单文件原型工程化为 Chrome 录音扩展
1. 摘要
用 SOLO 把一个 1500 行的单文件 HTML 录音原型，工程化为结构完整的 Chrome 扩展。实现了真实录音（MediaRecorder）、实时波形、音频裁剪和 WAV 导出，代码模块化、TypeScript 类型安全、Vite 构建，可直接上架 Chrome Web Store。
2. 背景
我是前端开发，平时喜欢做些小工具。周末写了个浏览器录音器的原型（单文件 HTML），功能界面都有了，但代码一团糟——所有逻辑堆在一起，没有类型检查，也不能作为扩展安装。想快速把它改造成可发布的 Chrome 扩展，同时保持代码质量。
3. 实践过程
任务拆解
SOLO 帮我做了四步拆分：
-
项目结构 — Chrome MV3 扩展标准目录 + Vite 构建
-
模块化 — 拆出录音引擎、波形渲染、状态管理、工具函数
-
功能实现 — 接入 MediaRecorder + Web Audio API，补全原型缺失的真实录音逻辑
-
构建验证 — 生成可加载的 dist 包
关键 Prompt
“新项目，浏览器录音插件，请工程化”
上传原型文件后，SOLO 自动识别出这是 Chrome 扩展场景，确认了技术栈（Vanilla TS + Vite）、功能范围（核心录音功能）和包管理器（npm）。
核心代码结构
Plain Text
src/
├── background/index.ts # tabCapture 音频流管理
├── popup/
│ ├── main.ts # 主逻辑：录音 → 编辑 → 保存
│ ├── index.html
│ └── style.css
└── shared/
├── engine/
│ ├── recorder.ts # MediaRecorder + 波形采集
│ └── waveform.ts # Canvas 渲染
├── ui/store.ts # 集中式状态管理
└── utils/format.ts # 时间格式化、WAV 编码
踩过的坑
-
图标缺失：manifest 引用了 icons，但项目里没有。SOLO 用 Node.js 脚本生成了最小有效的 PNG 占位图，让构建通过。
-
tabCapture 权限：Chrome 扩展需要
tabCapture权限才能录制标签页音频，SOLO 在 manifest 里正确配置了权限和 background service worker。
关键技术点
录音引擎 — 支持三种模式：
TypeScript
// 麦克风 / 标签页 / 混合录制
recorder.start('mic' | 'tab' | 'both')
WAV 编码 — 从 AudioBuffer 导出标准 WAV：
TypeScript
export function encodeWav(buffer: AudioBuffer): Blob {
// 交错声道 + RIFF header + PCM data
}
裁剪播放 — 用 trimAudioBuffer 生成裁剪后的 AudioBuffer，实时预览。
4. 成果展示
项目仓库
目录结构
Plain Text
rec-studio-extension/
├── manifest.json # Chrome MV3 配置
├── vite.config.ts # Vite + @crxjs/vite-plugin
├── src/
│ ├── background/ # Service Worker
│ ├── popup/ # 扩展弹窗
│ └── shared/ # 模块化引擎 + UI + 工具
└── dist/ # 构建产物（可直接加载）
功能演示
| 功能 | 状态 |
|---|---|
 麦克风录制 |
 |
 标签页音频捕获 |
|
 混合录制 |
|
 实时波形 |
|
 音频裁剪 |
|
 WAV 导出下载 |
|
 已保存录音列表 |
|
安装使用
-
打开
chrome://extensions/ -
开启「开发者模式」
-
加载
dist/目录 -
点击工具栏
图标开始录音
总耗时：约 10 分钟（从单文件原型到可运行的 Chrome 扩展）
SOLO 的模块化拆分和类型推导帮了大忙，不用纠结目录结构，专注在录音逻辑的实现上。
