# Browser Tools

Interactive browser automation via Chrome DevTools Protocol.

- Repository: https://github.com/badlogic/pi-skills (2648 stars)
- Category: Design
- License: MIT
- Last updated: 2026-06-06
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add badlogic/pi-skills --skill browser-tools -g -a claude-code -y`
Codex: `npx skills add badlogic/pi-skills --skill browser-tools -g -a codex -y`
Cursor: `npx skills add badlogic/pi-skills --skill browser-tools -g -a cursor -y`
Gemini CLI: `npx skills add badlogic/pi-skills --skill browser-tools -g -a gemini-cli -y`

## Description

Interactive browser automation via Chrome DevTools Protocol. Use when you need to interact with web pages, test frontends, or when user interaction with a visible browser is required.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Browser Tools

Chrome DevTools Protocol tools for agent-assisted web automation. These tools connect to Chrome running on `:9222` with remote debugging enabled.

## Setup

Run once before first use:

```bash
cd {baseDir}/browser-tools
npm install
```

## Start Chrome

```bash
{baseDir}/browser-start.js              # Fresh profile
{baseDir}/browser-start.js --profile    # Copy user's profile (cookies, logins)
```

Launch Chrome with remote debugging on `:9222`. Use `--profile` to preserve user's authentication state.

## Navigate

```bash
{baseDir}/browser-nav.js https://example.com
{baseDir}/browser-nav.js https://example.com --new
```

Navigate to URLs. Use `--new` flag to open in a new tab instead of reusing current tab.

## Evaluate JavaScript

```bash
{baseDir}/browser-eval.js 'document.title'
{baseDir}/browser-eval.js 'document.querySelectorAll("a").length'
```

Execute JavaScript in the active tab. Code runs in async context. Use this to extract data, inspect page state, or perform DOM operations programmatically.

## Screenshot

```bash
{baseDir}/browser-screenshot.js
```

Capture current viewport and return temporary file path. Use this to visually inspect page state or verify UI changes.

## Pick Elements

```bash
{baseDir}/browser-pick.js "Click the submit button"
```

**IMPORTANT**: Use this tool when the user wants to select specific DOM elements on the page. This launches an interactive picker that lets the user click elements to select them. The user can select multiple elements (Cmd/Ctrl+Click) and press Enter when done. The tool returns CSS selectors for the selected elements.

Common use cases:
- User says "I want to click that button" → Use this tool to let them select it
- User says "extract data from these items" → Use this tool to let them select the elements
- When you need specific selectors but the page structure is complex or ambiguous

## Cookies

```bash
{baseDir}/browser-cookies.js
```

The rest: https://github.com/badlogic/pi-skills/blob/HEAD/browser-tools/SKILL.md