Web Screen Recorder - Chrome & Edge Extension

专业的Chrome屏幕录制扩展，支持视频编辑、关键帧动画和Markdown笔记。

✨ 功能特性

• 🎥 屏幕录制 - 支持屏幕/窗口/标签页录制
• 🎙️ 音频混合 - 麦克风和系统音频混合录制
• ✂️ 视频编辑 - 关键帧动画、缩放、平移、时间轴裁剪
• 📤 MP4导出 - H.264视频 + AAC音频编码
• 📝 Markdown笔记 - 使用ByteMD编辑器记录视频备注
• 🌙 暗色模式 - 支持亮色/暗色主题切换
• 💾 本地存储 - IndexedDB持久化存储
• 🔍 录制管理 - 搜索、删除、预览、编辑标题

📸 预览

🚀 快速开始

安装依赖

npm install

开发构建

npm run build

构建完成后，dist/ 目录将包含可加载到Chrome的扩展文件。

开发模式（实时重新构建）

npm run dev

📦 安装到Chrome

1. 打开Chrome浏览器
2. 访问 chrome://extensions/
3. 启用右上角的"开发者模式"
4. 点击"加载已解压的扩展程序"
5. 选择项目中的 dist/ 目录
6. 扩展将被加载到浏览器中

📖 使用说明

开始录制

1. 点击浏览器工具栏中的扩展图标
2. 在弹出窗口中选择"新建录制"
3. 配置录制选项（麦克风、系统音频、分辨率、帧率）
4. 点击"开始录制"
5. 选择要录制的屏幕/窗口/标签页
6. 完成后点击"停止录制"

视频编辑

1. 在仪表盘中点击录制卡片进入编辑器
2. 关键帧动画：
   • 点击"在此处添加关键帧"
   • 调整缩放、X/Y偏移参数
   • 拖动时间轴上的关键帧调整位置
3. 时间轴裁剪：
   • 拖动左右裁剪把手调整视频起止时间
4. 备注文档：
   • 切换到"备注文档"标签
   • 使用Markdown编辑器记录笔记（自动保存）
5. 导出视频：
   • 点击"导出 MP4"按钮
   • 等待编码完成
   • 选择保存位置

标题编辑

• 在编辑器中点击标题即可编辑
• 按 Enter 保存，Esc 取消

🛠️ 技术栈

• 构建工具: Vite 5 + React 18
• UI框架: React
• 样式: Tailwind CSS 3
• 图标: Lucide React
• 视频处理: WebCodecs API + mp4-muxer
• Markdown编辑: ByteMD
• 存储: IndexedDB + chrome.storage

📂 项目结构

chrome-extension/
├── manifest.json           # Chrome扩展清单（Manifest V3）
├── vite.config.js          # Vite构建配置
├── tailwind.config.js      # Tailwind配置
├── postcss.config.js       # PostCSS配置
├── package.json            # 依赖管理
├── icon-generator.html     # 图标生成器工具
├── public/
│   ├── icons/              # 扩展图标（16x16, 48x48, 128x128）
│   ├── assets/             # 外部库（ByteMD, Lucide, mp4-muxer）
│   └── polyfill.js         # Process polyfill
├── src/
│   ├── recorder/           # 主应用
│   │   ├── components/     # React组件
│   │   │   ├── Icon.jsx
│   │   │   ├── Button.jsx
│   │   │   ├── Card.jsx
│   │   │   ├── Modal.jsx
│   │   │   ├── Toggle.jsx
│   │   │   ├── Select.jsx
│   │   │   ├── ByteMDEditor.jsx
│   │   │   ├── Dashboard.jsx
│   │   │   └── Editor.jsx
│   │   ├── utils/          # 工具函数
│   │   │   ├── db-helper.js
│   │   │   └── format.js
│   │   ├── styles/         # 样式文件
│   │   │   └── index.css
│   │   ├── App.jsx         # 主应用组件
│   │   ├── main.jsx        # 入口文件
│   │   └── index.html      # HTML模板
│   ├── popup/              # 弹出窗口
│   │   ├── popup.html
│   │   └── popup.js
│   ├── background/         # 后台服务
│   │   └── background.js
│   └── workers/
│       └── export-worker.js # 视频导出Worker
└── dist/                   # 构建输出（加载到Chrome）

⚠️ 已知限制

1. 系统音频录制需要在选择器中勾选"分享音频"
2. 视频导出速度取决于设备性能
3. IndexedDB存储有大小限制（通常为可用磁盘空间的50%）
4. 仅支持基于Chromium的浏览器（Chrome 94+）

📄 许可证

MIT License

🙏 致谢

• ByteMD - Markdown编辑器
• Lucide - 图标库
• mp4-muxer - MP4封装库
• Tailwind CSS - CSS框架