playbooks

home / skills / hqman / claude-web-browser-skill / web-browser

web-browser skill

/web-browser

This skill helps you browse web pages by controlling a Chrome browser via CDP to navigate, fill forms, and inspect elements.

npx playbooks add skill hqman/claude-web-browser-skill --skill web-browser

Review the files below or copy the command above to add this skill to your agents.

Files (9)
SKILL.md
1.5 KB
---
name: web-browser
description: "Allows to interact with web pages by performing actions such as clicking buttons, filling out forms, and navigating links. It works by remote controlling Google Chrome or Chromium browsers using the Chrome DevTools Protocol (CDP). When Claude needs to browse the web, it can use this skill to do so."
license: Stolen from Mario
---

# Web Browser Skill

Minimal CDP tools for collaborative site exploration.

## Start Chrome

default start the profile chrome

\`\`\`bash
./tools/start.js --profile    # Copy your profile (cookies, logins)
./tools/start.js              # Fresh profile
\`\`\`

Start Chrome on `:9222` with remote debugging.

## Navigate

\`\`\`bash
./tools/nav.js https://example.com
./tools/nav.js https://example.com --new
\`\`\`

Navigate current tab or open new tab.

## Evaluate JavaScript

\`\`\`bash
./tools/eval.js 'document.title'
./tools/eval.js 'document.querySelectorAll("a").length'
./tools/eval.js 'JSON.stringify(Array.from(document.querySelectorAll("a")).map(a => ({ text: a.textContent.trim(), href: a.href })).filter(link => !link.href.startsWith("https://")))'
\`\`\`

Execute JavaScript in active tab (async context).  Be careful with string escaping, best to use single quotes.

## Screenshot

\`\`\`bash
./tools/screenshot.js
\`\`\`

Screenshot current viewport, returns temp file path

## Pick Elements

\`\`\`bash
./tools/pick.js "Click the submit button"
\`\`\`

Interactive element picker. Click to select, Cmd/Ctrl+Click for multi-select, Enter to finish.

Overview

This skill lets the agent interact with web pages by remote controlling Google Chrome or Chromium via the Chrome DevTools Protocol (CDP). It provides navigation, element interaction, form filling, JavaScript evaluation, screenshots, and an interactive element picker for precise targeting. Use it when the agent needs to explore, extract, or manipulate live web content programmatically.

How this skill works

The skill launches or connects to a Chrome/Chromium instance with remote debugging enabled (default on :9222). It can open or reuse tabs, run arbitrary JavaScript in the page context, click elements, fill forms, and capture screenshots. An interactive picker lets you visually select elements in the page, and all actions are executed through CDP commands sent to the browser.

When to use it

  • Scraping or extracting structured data from dynamic pages that require real browser execution.
  • Automating form submission, login flows, or multi-step interactions that rely on client-side scripts.
  • Testing or debugging complex UI behavior by running JS snippets and taking screenshots.
  • Navigating single-page apps where links and content are rendered client-side.
  • Selecting specific elements visually when CSS selectors are hard to craft.

Best practices

  • Start Chrome with a profile copy to preserve cookies and logins when necessary, otherwise use a fresh profile for isolated runs.
  • Prefer single-quoted JS strings when sending scripts to avoid escaping complexity.
  • Use the interactive picker for complex element selection and Cmd/Ctrl+Click to multi-select.
  • Limit heavy DOM queries and long-running scripts to avoid slowing the remote browser.
  • Take screenshots after major UI updates to verify state before extracting data.

Example use cases

  • Open a product page, run a script to extract title, price, and available variants, then screenshot the result.
  • Automate login to a site using stored cookies from a copied profile and navigate to a dashboard page.
  • Test a checkout flow by filling forms, clicking buttons, and verifying the resulting page content via JS evaluation.
  • Enumerate all links on a page and filter by hostname using an evaluated JS array transformation.
  • Visually pick an upload button with the element picker, then trigger a file input interaction.

FAQ

Do I need Chrome installed?

Yes, the skill controls a local Chrome or Chromium instance via CDP and requires a browser that supports remote debugging.

How do I preserve logins and cookies?

Start Chrome using a copied profile to retain cookies and logged-in sessions; otherwise a fresh profile starts without persisted state.