Provides direct CDP access for navigation, DOM queries, screenshots, and network control in browser sessions.

Install

mkdir -p .claude/skills/bdg && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/13173" && unzip -o skill.zip -d .claude/skills/bdg && rm skill.zip

Installs to .claude/skills/bdg

Activation

This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.

Use bdg CLI for browser automation via Chrome DevTools Protocol. Provides direct CDP access (60+ domains, 300+ methods) for DOM queries, navigation, screenshots, network control, and JavaScript execution. Use this skill when you need to automate browsers, scrape dynamic content, or interact with web pages programmatically.
324 chars✓ has a “when” triggerlonger than Claude Code's old 250-char listing cap (fine on current versions)
Intermediate

Key capabilities

  • Start and stop browser sessions
  • Take full-page, viewport, or element screenshots
  • Fill forms and interact with DOM elements
  • Inspect DOM elements and execute JavaScript
  • Access Chrome DevTools Protocol directly
  • Manage session cleanup and troubleshooting

How it works

The skill uses the `bdg` CLI to automate browser interactions via the Chrome DevTools Protocol, allowing for session management, DOM manipulation, screenshots, and direct CDP command execution.

Inputs & outputs

You give it
URL, CSS selectors, CDP commands, form data
You get back
Browser session status, screenshots, filled forms, DOM inspection results, CDP command output

When to use bdg

  • Scrape dynamic content
  • Take full-page screenshots
  • Automate browser interaction
  • Network traffic inspection

About this skill

bdg - Browser Automation CLI

Quick Start

bdg https://example.com          # Start session (launches Chrome)
bdg dom screenshot /tmp/page.png # Take screenshot
bdg stop                         # End session

Session Management

bdg <url>                  # Start session (1920x1080, headless if no display)
bdg <url> --headless       # Force headless mode
bdg <url> --no-headless    # Force visible browser window
bdg status                 # Check session status
bdg peek                   # Preview collected telemetry
bdg stop                   # End session (use sparingly)
bdg cleanup --force        # Kill stale session
bdg cleanup --aggressive   # Kill all Chrome processes

Sessions run indefinitely by default (no timeout). With HMR/hot-reload dev servers, keep the session running:

bdg http://localhost:5173      # Start once
# ... make code changes, HMR updates the page ...
bdg dom screenshot /tmp/s.png  # Check anytime
bdg peek                       # Preview collected data
# No need to stop/restart - Chrome stays on the page

Don't stop sessions prematurely - use bdg peek to inspect data. Only call bdg stop when completely done with browser automation.

Screenshots

Always use bdg dom screenshot (raw CDP is blocked):

bdg dom screenshot /tmp/page.png                    # Full page
bdg dom screenshot /tmp/viewport.png --no-full-page # Viewport only
bdg dom screenshot /tmp/el.png --selector "#main"   # Element only
bdg dom screenshot /tmp/scroll.png --scroll "#target" # Scroll to element first

Form Interaction

# Discover forms
bdg dom form --brief              # Quick scan: field names, types, required

# Fill and interact
bdg dom fill "input[name='user']" "myuser"    # Fill by selector
bdg dom fill 0 "value"                         # Fill by index (from query)
bdg dom click "button.submit"                  # Click element
bdg dom submit "form" --wait-navigation        # Submit and wait for page load
bdg dom pressKey "input" Enter                 # Press Enter key

# Options
--no-wait          # Skip network stability wait
--wait-navigation  # Wait for page navigation (traditional forms)
--wait-network <ms> # Wait for network idle (SPA forms)
--index <n>        # Select nth element when multiple match

DOM Inspection

bdg dom query "selector"     # Find elements, returns [0], [1], [2]...
bdg dom get "selector"       # Get semantic a11y info (token-efficient)
bdg dom get "selector" --raw # Get full HTML
bdg dom eval "js expression" # Run JavaScript

CDP Access

Direct access to Chrome DevTools Protocol:

# Execute any CDP method
bdg cdp Runtime.evaluate --params '{"expression": "document.title", "returnByValue": true}'
bdg cdp Page.navigate --params '{"url": "https://example.com"}'
bdg cdp Page.reload --params '{"ignoreCache": true}'

# Discovery
bdg cdp --list                    # List all 53 domains
bdg cdp Network --list            # List methods in domain
bdg cdp Network.getCookies --describe  # Show method schema
bdg cdp --search cookie           # Search methods

Important: Always use returnByValue: true for Runtime.evaluate to get serialized values.

Common Patterns

Login Flow

bdg https://example.com/login
bdg dom form --brief
bdg dom fill "input[name='username']" "$USER"
bdg dom fill "input[name='password']" "$PASS"
bdg dom submit "button[type='submit']" --wait-navigation
bdg dom screenshot /tmp/result.png
bdg stop

Wait for Element

for i in {1..20}; do
  EXISTS=$(bdg cdp Runtime.evaluate --params '{
    "expression": "document.querySelector(\"#target\") !== null",
    "returnByValue": true
  }' | jq -r '.result.value')
  [ "$EXISTS" = "true" ] && break
  sleep 0.5
done

Extract Data

bdg cdp Runtime.evaluate --params '{
  "expression": "Array.from(document.querySelectorAll(\"a\")).map(a => ({text: a.textContent, href: a.href}))",
  "returnByValue": true
}' | jq '.result.value'

Exit Codes

CodeMeaningAction
0Success-
1Blocked commandRead error message, use suggested alternative
81Invalid argumentsCheck command syntax
83Resource not foundElement/session doesn't exist
101CDP connection failureRun bdg cleanup --aggressive and retry
102CDP timeoutIncrease timeout or check page load

Troubleshooting

bdg status --verbose      # Full diagnostics
bdg cleanup --force       # Kill stale session
bdg cleanup --aggressive  # Kill all Chrome processes

Chrome won't launch? Run bdg cleanup --aggressive then retry.

Session stuck? Run bdg cleanup --force to reset.

Custom Chrome Flags

Use --chrome-flags or BDG_CHROME_FLAGS for self-signed certificates, CORS, etc.:

# CLI option
bdg https://localhost:5173 --chrome-flags="--ignore-certificate-errors"

# Environment variable
BDG_CHROME_FLAGS="--ignore-certificate-errors" bdg https://localhost:5173

# Multiple flags
bdg https://example.com --chrome-flags="--ignore-certificate-errors --disable-web-security"

Common flags for development:

  • --ignore-certificate-errors - Self-signed SSL certs
  • --disable-web-security - CORS issues in development
  • --allow-insecure-localhost - Insecure localhost
  • --disable-features=IsolateOrigins,site-per-process - Cross-origin iframes

Verification Best Practices

Prefer DOM queries over screenshots for verification:

# GOOD: Fast, precise, scriptable
bdg cdp Runtime.evaluate --params '{
  "expression": "document.querySelector(\".error-message\")?.textContent",
  "returnByValue": true
}'

# GOOD: Check element exists
bdg dom query ".submit-btn"

# GOOD: Check text content
bdg cdp Runtime.evaluate --params '{
  "expression": "document.body.innerText.includes(\"Success\")",
  "returnByValue": true
}'

# AVOID: Screenshots for simple verification (slow, requires visual inspection)
bdg dom screenshot /tmp/check.png  # Only use when you need visual proof

When to use screenshots:

  • Visual regression testing
  • Capturing proof for user review
  • Debugging layout issues
  • When DOM structure is unknown

When to use DOM queries:

  • Verifying text content appeared
  • Checking element exists/visible
  • Validating form state
  • Counting elements
  • Any programmatic assertion

When NOT to Use bdg

  • Static HTML - Use curl + htmlq/pq
  • API calls - Use curl + jq
  • Simple HTTP - Use wget/curl

Use bdg when you need: JavaScript execution, dynamic content, browser APIs, screenshots, or network manipulation.

When not to use it

  • When scraping static HTML content
  • When making simple API calls
  • When performing basic HTTP requests

Limitations

  • Not suitable for static HTML scraping
  • Not suitable for simple API calls
  • Not suitable for basic HTTP requests

How it compares

This skill provides a command-line interface for direct, programmatic control over a Chrome browser using CDP, enabling automation of dynamic web content and interactions that are not possible with simple HTTP requests or static HTML parser

Compared to similar skills

bdg side by side with the closest alternatives in the catalog.

SkillInstallsUpdatedSafetyDifficulty
bdg (this skill)04moReviewIntermediate
playwright-mcp336moNo flagsIntermediate
dev-browser534moReviewIntermediate
chrome-devtools417moReviewIntermediate

Try saying

Example prompts that trigger this skill in your AI assistant.

You might also like

playwright-mcp

sfc-gh-dflippo

Browser testing, web scraping, and UI validation using Playwright MCP. Use this skill when you need to test Streamlit apps, validate web interfaces, test responsive design, check accessibility, or automate browser interactions through MCP tools.

33197

dev-browser

SawyerHood

Browser automation with persistent page state. Use when users ask to navigate websites, fill forms, take screenshots, extract web data, test web apps, or automate browser workflows. Trigger phrases include "go to [url]", "click on", "fill out the form", "take a screenshot", "scrape", "automate", "test the website", "log into", or any browser interaction request.

53176

chrome-devtools

mrgoonie

Browser automation, debugging, and performance analysis using Puppeteer CLI scripts. Use for automating browsers, taking screenshots, analyzing performance, monitoring network traffic, web scraping, form automation, and JavaScript debugging.

41157

agent-browser

vercel-labs

Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to "open a website", "fill out a form", "click a button", "take a screenshot", "scrape data from a page", "test this web app", "login to a site", "automate browser actions", or any task requiring programmatic web interaction.

3075

browser-tools

Whamp

Lightweight Chrome automation toolkit with shared configuration, JSON-first output, and six focused scripts for starting, navigating, inspecting, capturing, evaluating, and cleaning up browser sessions.

694

browser

cexll

This skill should be used for browser automation tasks using Chrome DevTools Protocol (CDP). Triggers when users need to launch Chrome with remote debugging, navigate pages, execute JavaScript in browser context, capture screenshots, or interactively select DOM elements. No MCP server required.

346

Search skills

Search the agent skills registry