hqman/claude-web-browser-skill

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.