Claude Code Plugins

Community-maintained marketplace

Feedback

automating-browser

@thkt/claude-config
3
0

>

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

name automating-browser
description Browser automation using claude-in-chrome MCP tools. Comprehensive guide for E2E testing, screenshots, and web interactions. Triggers: browser automation, ブラウザ自動化, E2E test, E2Eテスト, screenshot, スクリーンショット, form fill, フォーム入力, click, navigate, web scraping, クローリング, GIF recording, GIF録画, Playwright, Puppeteer, ブラウザ操作, Chrome.
allowed-tools Read, Glob, mcp__claude-in-chrome__*

Browser Automation Guide

Comprehensive guide for browser automation using claude-in-chrome MCP.

Purpose

Enable effective browser automation for:

  • E2E testing workflows
  • Screenshot capture and analysis
  • Form filling and interaction
  • GIF recording for documentation
  • Web data extraction

Getting Started

1. Tab Context Required

Always start with:

mcp__claude-in-chrome__tabs_context_mcp

This provides available tab IDs for subsequent operations.

2. Create or Reuse Tab

# Create new tab
mcp__claude-in-chrome__tabs_create_mcp

# Or use existing tab from context

3. Navigation

mcp__claude-in-chrome__navigate
  url: "https://example.com"
  tabId: {obtained from tabs_context_mcp}

Core Tools

Tool Purpose
tabs_context_mcp Get available tabs
tabs_create_mcp Create new tab
navigate Go to URL
read_page Get page structure
find Natural language element search
form_input Fill form fields
computer Mouse/keyboard actions
get_page_text Extract text content
gif_creator Record interactions

Reading Page Content

Tool Use Case
read_page Get accessibility tree (DOM structure)
read_page with filter: "interactive" Buttons, links, inputs only
find Natural language element search
get_page_text Extract article/main text

Example: Read Interactive Elements

mcp__claude-in-chrome__read_page
  tabId: 123
  filter: "interactive"

Common Patterns

Form Filling

  1. read_page with filter: "interactive" to find inputs
  2. Identify input ref_id (e.g., ref_1, ref_2)
  3. form_input with ref and value
mcp__claude-in-chrome__form_input
  tabId: 123
  ref: "ref_5"
  value: "user@example.com"

Click Actions

mcp__claude-in-chrome__computer
  tabId: 123
  action: "left_click"
  ref: "ref_10"  # Or coordinate: [100, 200]

Screenshot Capture

mcp__claude-in-chrome__computer
  tabId: 123
  action: "screenshot"

GIF Recording

  1. Start recording
  2. Take screenshot (initial frame)
  3. Perform actions
  4. Take screenshot (final frame)
  5. Stop recording
  6. Export
# Start
mcp__claude-in-chrome__gif_creator
  tabId: 123
  action: "start_recording"

# ... perform actions with screenshots ...

# Stop
mcp__claude-in-chrome__gif_creator
  tabId: 123
  action: "stop_recording"

# Export
mcp__claude-in-chrome__gif_creator
  tabId: 123
  action: "export"
  download: true
  filename: "workflow-demo.gif"

Detailed References

Reference Purpose
@./references/claude-in-chrome-tools.md Complete tool documentation
@./references/common-patterns.md Reusable workflow patterns
@./references/e2e-testing.md E2E testing methodology

Security Notes

  • Always use update_plan for multi-domain operations
  • Sensitive data handling requires user confirmation
  • Never auto-submit forms with financial information
  • Be aware of bot detection systems (CAPTCHA)

References

Related Skills

  • utilizing-cli-tools - CLI tools guide
  • generating-tdd-tests - Test design

Used by Commands

  • /workflow:create - Browser workflow creation
  • /test - E2E test execution (includes browser testing)