chrome-auth-recorder

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Chrome Auth Recorder

Quick Start

快速开始

Record an authenticated workflow as an annotated GIF:

User: "Record my workflow for creating a new project in GitHub"

Get tab context from authenticated GitHub session
Present plan with domains for approval
Start GIF recording + capture first frame
Guide user OR execute approved actions
Monitor console/network for errors
Capture final frame + stop recording
Export annotated GIF with click indicators

Key advantage: Uses existing authenticated browser session - no credential handling required.

将已认证的工作流录制为带注释的GIF：

用户：“录制我在GitHub上创建新项目的工作流”

从已认证的GitHub会话中获取标签页上下文
展示包含域名的计划以获取用户批准
开始GIF录制并捕获第一帧
引导用户执行或自动执行已批准的操作
监控控制台/网络以排查错误
捕获最后一帧并停止录制
导出带有点击指示器的带注释GIF

核心优势：使用现有的已认证浏览器会话 - 无需处理凭证。

When to Use This Skill

何时使用该技能

Explicit Triggers:

"Record my workflow" / "Document authenticated process"
"Create tutorial from session" / "Make a GIF of [workflow]"
"Show me how to do this" / "Capture this workflow"

Implicit Triggers:

Document multi-step authenticated workflow
Create tutorial for team using SaaS tool
Visual proof of process completion

Debugging Triggers:

"Why did this fail?" / "Record the error I'm seeing"
Need visual evidence for bug reports

显式触发指令：

"record my workflow" / "document authenticated process"
"create tutorial from session" / "Make a GIF of [workflow]"
"show me how to do this" / "Capture this workflow"

隐式触发场景：

记录多步骤已认证工作流
为团队创建SaaS工具使用教程
提供流程完成的可视化证明

调试触发场景：

"Why did this fail?" / "Record the error I'm seeing"
需要为Bug报告提供可视化证据

What This Skill Does

该技能的功能

End-to-end workflow recording in authenticated sessions:

Session Access - Uses existing authenticated tab (no credentials)
Plan Approval - Presents domains/approach for explicit permission
GIF Recording - Captures visual workflow with frames
Monitoring - Tracks console errors and network requests
Export - Generates annotated GIF (click indicators, labels, progress bar)

已认证会话中的端到端工作流录制：

会话访问 - 使用现有的已认证标签页（无需凭证）
计划批准 - 展示域名/操作方式以获取明确许可
GIF录制 - 以帧为单位捕获可视化工作流
监控 - 跟踪控制台错误和网络请求
导出 - 生成带注释的GIF（包含点击指示器、标签、进度条）

Instructions

操作步骤

Step 1: Get Tab Context

步骤1：获取标签页上下文

Access user's existing authenticated session:

tabs_context_mcp(createIfEmpty=true)
→ Returns: {tabId: 123, url: "https://github.com/dashboard"}

Verify:
- Domain matches workflow requirement
- User appears authenticated (check for login indicators)
- Ask user to navigate if on wrong page

访问用户现有的已认证会话：

tabs_context_mcp(createIfEmpty=true)
→ Returns: {tabId: 123, url: "https://github.com/dashboard"}

Verify:
- Domain matches workflow requirement
- User appears authenticated (check for login indicators)
- Ask user to navigate if on wrong page

Step 2: Present Plan and Get Approval

步骤2：展示计划并获取批准

Never start recording without explicit permission:

update_plan(
  domains=["github.com"],
  approach=[
    "Record repository creation workflow",
    "Capture form interactions",
    "Monitor API calls for errors",
    "Export annotated GIF"
  ]
)

Wait for: "Yes, proceed" or "Go ahead"
If declined: Ask for modifications

未经明确许可绝不能开始录制：

update_plan(
  domains=["github.com"],
  approach=[
    "Record repository creation workflow",
    "Capture form interactions",
    "Monitor API calls for errors",
    "Export annotated GIF"
  ]
)

Wait for: "Yes, proceed" or "Go ahead"
If declined: Ask for modifications

Step 3: Start Recording

步骤3：开始录制

Initialize GIF recording and capture first frame:

gif_creator(action="start_recording", tabId=123)
computer(action="screenshot", tabId=123)  ← REQUIRED first frame

初始化GIF录制并捕获第一帧：

gif_creator(action="start_recording", tabId=123)
computer(action="screenshot", tabId=123)  ← REQUIRED first frame

Step 4: Execute Workflow

步骤4：执行工作流

Two modes:

User-Guided (complex/manual workflows):

Assistant: "Click the '+' icon, then 'New repository'"
[User performs action - captured automatically]
Assistant: "Fill in repository name"
[User types - captured]

Automated (pre-approved repetitive steps):

computer(action="left_click", coordinate=[850, 120], tabId=123)
wait(duration=2)
form_input(ref="ref_1", value="my-project", tabId=123)
computer(action="left_click", ref="ref_2", tabId=123)

Hybrid: Start user-guided, switch to automated for repetitive parts.

两种模式：

用户引导模式（适用于复杂/手动工作流）：

Assistant: "Click the '+' icon, then 'New repository'"
[User performs action - captured automatically]
Assistant: "Fill in repository name"
[User types - captured]

自动模式（适用于重复的预批准步骤）：

computer(action="left_click", coordinate=[850, 120], tabId=123)
wait(duration=2)
form_input(ref="ref_1", value="my-project", tabId=123)
computer(action="left_click", ref="ref_2", tabId=123)

混合模式：先使用用户引导模式，切换到自动模式处理重复步骤。

Step 5: Monitor Session

步骤5：监控会话

Track errors and verify API calls during recording:

read_console_messages(
  tabId=123,
  pattern="error|exception|failed",
  onlyErrors=true
)

read_network_requests(
  tabId=123,
  urlPattern="/api/"
)

If errors found:
- Inform user immediately
- Ask whether to continue or restart
- Include error context in final GIF

录制期间跟踪错误并验证API请求：

read_console_messages(
  tabId=123,
  pattern="error|exception|failed",
  onlyErrors=true
)

read_network_requests(
  tabId=123,
  urlPattern="/api/"
)

If errors found:
- Inform user immediately
- Ask whether to continue or restart
- Include error context in final GIF

Step 6: Stop and Export

步骤6：停止并导出

Finalize recording and export annotated GIF:

computer(action="screenshot", tabId=123)  ← REQUIRED final frame
gif_creator(action="stop_recording", tabId=123)
gif_creator(
  action="export",
  tabId=123,
  download=true,
  filename="github-create-repo-tutorial.gif",
  options={
    showClickIndicators: true,
    showActionLabels: true,
    showProgressBar: true,
    showWatermark: true,
    quality: 10
  }
)

Verify download successful and inform user.

完成录制并导出带注释的GIF：

computer(action="screenshot", tabId=123)  ← REQUIRED final frame
gif_creator(action="stop_recording", tabId=123)
gif_creator(
  action="export",
  tabId=123,
  download=true,
  filename="github-create-repo-tutorial.gif",
  options={
    showClickIndicators: true,
    showActionLabels: true,
    showProgressBar: true,
    showWatermark: true,
    quality: 10
  }
)

Verify download successful and inform user.

Supporting Files

支持文件

references/

```
mcp-tools-reference.md
```
- Detailed MCP tool parameters and patterns
```
troubleshooting.md
```
- Common issues and solutions (365 lines)

examples/

```
examples.md
```
- 8 comprehensive workflow examples:
- GitHub repo creation (user-guided)
- Notion database setup (complex)
- Jira epic creation (automated)
- Google Workspace user (privacy-aware)
- Stripe refund (API verification)
- Slack channel (hybrid mode)
- AWS EC2 launch (long-form)
- Error reproduction (debugging)

references/

```
mcp-tools-reference.md
```
- 详细的MCP工具参数和使用模式
```
troubleshooting.md
```
- 常见问题及解决方案（365行）

examples/

```
examples.md
```
- 8个完整的工作流示例：
- GitHub仓库创建（用户引导模式）
- Notion数据库设置（复杂场景）
- Jira史诗创建（自动模式）
- Google Workspace用户（隐私敏感场景）
- Stripe退款（API验证场景）
- Slack频道创建（混合模式）
- AWS EC2实例启动（长流程场景）
- 错误复现（调试场景）

Expected Outcomes

预期结果

Successful Recording:

✅ Workflow Recorded Successfully

Session: GitHub - Create New Repository
Duration: 45 seconds, Frames: 23, Size: <2MB
GIF: github-create-repo-tutorial.gif (Downloads/)
Annotations: Click indicators, labels, progress bar, watermark
Console: 0 errors
Network: 3 API calls successful (POST /repos → 201)

Tutorial ready for sharing!

Recording with Warnings:

⚠️ Workflow Recorded with Warnings

Warnings:
1. Console: "Deprecated API call"
2. Network: GET /preferences (429 Rate Limited)

GIF exported with warning annotations.
Recommendation: Review before sharing.

录制成功：

✅ Workflow Recorded Successfully

Session: GitHub - Create New Repository
Duration: 45 seconds, Frames: 23, Size: <2MB
GIF: github-create-repo-tutorial.gif (Downloads/)
Annotations: Click indicators, labels, progress bar, watermark
Console: 0 errors
Network: 3 API calls successful (POST /repos → 201)

Tutorial ready for sharing!

带警告的录制：

⚠️ Workflow Recorded with Warnings

Warnings:
1. Console: "Deprecated API call"
2. Network: GET /preferences (429 Rate Limited)

GIF exported with warning annotations.
Recommendation: Review before sharing.

Expected Benefits

预期收益

Metric	Before	After	Improvement
Tutorial creation time	30-60 min	5-10 min	80% faster
Credential exposure risk	High	None	100% safer
Annotation consistency	Manual	Automated	100% reliable
Error detection	Manual	Real-time	Immediate visibility

指标	之前	之后	提升效果
教程创建时间	30-60分钟	5-10分钟	提速80%
凭证泄露风险	高	无	100%安全
注释一致性	手动	自动	100%可靠
错误检测	手动	实时	即时可见

Success Metrics

成功标准

A successful recording meets all criteria:

✅ User approved plan before recording started ✅ GIF captured all workflow steps ✅ Annotations clearly show clicks and actions ✅ No credentials visible in frames ✅ Console/network monitoring completed ✅ GIF downloaded successfully ✅ File size reasonable (<5MB for 30-60 sec) ✅ Visual quality sufficient for tutorial use

成功的录制需满足以下所有条件：

✅ 录制前已获得用户对计划的批准 ✅ GIF捕获了所有工作流步骤 ✅ 注释清晰展示了点击和操作 ✅ 帧中未显示任何凭证 ✅ 完成了控制台/网络监控 ✅ GIF下载成功 ✅ 文件大小合理（30-60秒的录制小于5MB） ✅ 视觉质量满足教程使用需求

Requirements

要求

Browser: Chrome with MCP integration, authenticated session active User: Explicit approval, clear workflow steps, awareness of recording scope Technical: MCP tools (tabs_context_mcp, gif_creator, computer), network access, disk space

浏览器：已集成MCP的Chrome浏览器，且已认证会话处于激活状态用户：明确批准录制、工作流步骤清晰、了解录制范围技术：MCP工具（tabs_context_mcp、gif_creator、computer）、网络访问、磁盘空间

Red Flags to Avoid

需要避免的风险

Starting recording without approval - Always use update_plan first
Recording sensitive data entry - Pause before passwords/keys
Missing first/last frames - Always screenshot after start and before stop
Ignoring console errors - Always read console_messages during workflow
Not monitoring network - Always check network_requests for failures
Exporting without annotations - Enable all indicators/labels
Vague filenames - Use "github-create-repo.gif", not "recording.gif"
Skipping verification - Confirm GIF downloaded successfully
Recording without context - Get tabs_context_mcp first
Continuing after critical errors - Ask user whether to continue

未经批准就开始录制 - 务必先使用update_plan
录制敏感数据输入 - 在输入密码/密钥前暂停录制
缺少第一帧/最后一帧 - 务必在开始后和停止前截图
忽略控制台错误 - 工作流期间务必读取console_messages
未监控网络 - 务必检查network_requests是否有失败
无注释导出 - 启用所有指示器/标签
文件名模糊 - 使用“github-create-repo.gif”而非“recording.gif”
跳过验证步骤 - 确认GIF已成功下载
无上下文录制 - 务必先获取tabs_context_mcp
出现严重错误后仍继续录制 - 询问用户是否继续

Notes

注意事项

Privacy Protection:

NEVER record sensitive data entry (passwords, credit cards, API keys)
Ask user to navigate away from sensitive pages before recording
Warn if sensitive data visible in current state
Consider pausing recording during credential entry

Performance:

Long recordings (>2 min) create large GIFs (>10MB)
Split workflows into multiple shorter GIFs if needed
Use quality=10 for size/clarity balance
Slow down actions for clearer captures

Browser Session:

Recording captures visual state only (not DOM/cookies)
User remains authenticated after completion
No session state modified (read-only, safe for production)

Best Practices:

Test workflow manually before recording
Slow down actions for better frame separation
Add pauses between steps (1-2 seconds)
Narrate actions in chat during recording for context
Review console/network logs before exporting
Use descriptive filenames for easy identification

Workflow Patterns:

User-Guided: Best for complex/manual workflows
Automated: Best for repetitive/approved workflows
Hybrid: Start user-guided, switch to automated for repetition

Integration:

Use with
```
quality-code-review
```
- Record demo of new feature
Use with
```
create-adr-spike
```
- Capture research workflow
Use with
```
observability-analyze-logs
```
- Record error reproduction

隐私保护：

绝不要录制敏感数据输入（密码、信用卡、API密钥）
录制前请用户导航离开敏感页面
如果当前页面显示敏感数据，需发出警告
考虑在凭证输入期间暂停录制

性能：

长时间录制（超过2分钟）会生成大尺寸GIF（超过10MB）
必要时将工作流拆分为多个较短的GIF
使用quality=10平衡文件大小和清晰度
放慢操作速度以获得更清晰的捕获效果

浏览器会话：

仅捕获可视化状态（不包含DOM/ cookies）
录制完成后用户仍保持已认证状态
不会修改会话状态（只读，可安全用于生产环境）

最佳实践：

录制前手动测试工作流
放慢操作速度以获得更好的帧分离效果
步骤之间添加暂停（1-2秒）
录制期间在聊天中解说操作以提供上下文
导出前检查控制台/网络日志
使用描述性文件名以便识别

工作流模式：

用户引导模式：最适合复杂/手动工作流
自动模式：最适合重复/已批准的工作流
混合模式：先使用用户引导模式，切换到自动模式处理重复步骤

集成：

与
```
quality-code-review
```
配合使用 - 录制新功能的演示
与
```
create-adr-spike
```
配合使用 - 捕获研究工作流
与
```
observability-analyze-logs
```
配合使用 - 录制错误复现流程