Brawl345

browser-tools

0
0
# Install this skill:
npx skills add Brawl345/browser-tools

Or install specific skill: npx add-skill https://github.com/Brawl345/browser-tools

# Description

Interact with a web browser. Can start a browser, connect to it, evaluate JavaScript, make screenshots, read console logs and let the user select DOM elements. Use when interacting with unknown websites (e.g. scraping or Userscripts) or debugging browser-stuff. Requires uv.

# SKILL.md


name: browser-tools
description: Interact with a web browser. Can start a browser, connect to it, evaluate JavaScript, make screenshots, read console logs and let the user select DOM elements. Use when interacting with unknown websites (e.g. scraping or Userscripts) or debugging browser-stuff. Requires uv.


Browser Tools

This skill provides various scripts to interact with a web browser. There is no need to use "sleep" since all scripts will wait automatically. Always change the working directory to the project root before running any script.

Start

Always start Chrome with remote debugging first:

uv run scripts/start.py
uv run scripts/navigate.py https://example.com
# or open a new tab
uv run scripts/navigate.py https://example.com --new

Execute JavaScript

NOTE: Prefer get-html or pick whenever possible to save on token usage.

uv run scripts/evaluate.py "document.querySelectorAll('a').length"
# For multi-line scripts, use STDIN with heredoc
uv run scripts/evaluate.py - <<'EOF'
const elements = document.querySelectorAll('.item');
elements.forEach(el => el.classList.add('processed'));
return elements.length;
EOF
# Or from a file
uv run scripts/evaluate.py path/to/script.js

Pick DOM elements

Use an interactive element picker to instruct the user to pick DOM elements that should be debugged or shown:

uv run scripts/pick.py "Click the submit button"
uv run scripts/pick.py "Select all product cards"

Returns element information including tag, id, class, text content, HTML, and parent hierarchy.

Mouse actions

uv run scripts/mouse.py click "button#submit"
uv run scripts/mouse.py dblclick ".item"
uv run scripts/mouse.py hover "nav .menu-item"
uv run scripts/mouse.py right-click ".context-menu-trigger"
uv run scripts/mouse.py drag ".draggable" --to ".drop-zone"

Fill text fields

uv run scripts/fill.py "input#username" "john_doe"
uv run scripts/fill.py "textarea#comment" "Hello, world!" --clear
uv run scripts/fill.py "input[name='email']" "[email protected]"

Check/uncheck checkboxes

uv run scripts/check.py "input#accept-terms"
uv run scripts/check.py "input[name='newsletter']" --uncheck
uv run scripts/check.py "input[type='radio'][value='option1']"

Press keyboard keys

uv run scripts/press-key.py "Enter"
uv run scripts/press-key.py "Escape"
uv run scripts/press-key.py "a" --selector "input#search"

Upload files

uv run scripts/upload.py "input[type='file']" /path/to/file.pdf
uv run scripts/upload.py "#file-upload" /path/to/image1.jpg /path/to/image2.png

Download files

uv run scripts/download.py "a[href='/report.pdf']"
uv run scripts/download.py "button#download" --output ~/Documents/report.pdf

Select dropdown options

uv run scripts/select-dropdown.py "select#country" "US"
uv run scripts/select-dropdown.py "select[name='color']" "Red" --by-label
uv run scripts/select-dropdown.py "#quantity" "2" --by-index

Cookies

List cookies

uv run scripts/cookies.py

Clear cookies

uv run scripts/clear-cookies.py

Local/Session storage

List storage items

uv run scripts/storage.py

Clear local/session storage

uv run scripts/clear-storage.py

Get console messages

uv run scripts/console.py
uv run scripts/console.py --errors-only

Capture network requests

ALWAYS start this script in a background agent. During this time, you can manually interact with the page to trigger network requests. The script then logs all requests made.

uv run scripts/network.py
uv run scripts/network.py --type fetch --show-body
uv run scripts/network.py --filter "api\\.example\\.com" --show-headers

Get HTML content

Outputs HTML with optional filtering and additional context.

uv run scripts/get-html.py
uv run scripts/get-html.py --filter "<button.*submit.*>"
uv run scripts/get-html.py --filter "data-id=\"\d+\"" --lines 10

Manage tabs

List all open tabs, switch to a specific tab, or close a tab:

uv run scripts/tabs.py
uv run scripts/tabs.py --switch 0
uv run scripts/tabs.py --close 1

More

For detailed API reference, see REFERENCE.md.

# README.md

Browser Tools

A Claude Code skill for browser automation using Playwright. Requires uv. And yes, this was coded by Claude Code. Inspired by this blogpost.

Features

  • Start Browser: Launch Chrome with remote debugging enabled
  • Navigate: Open URLs in active or new tabs
  • Execute JavaScript: Run inline code or scripts from files
  • Element Picker: Interactive DOM element selection
  • Mouse Actions: Click, double-click, hover, right-click, and drag elements
  • Fill Text Fields: Fill input and textarea elements with text
  • Check Elements: Check/uncheck checkboxes and select radio buttons
  • Press Key: Press keyboard keys (Enter, Escape, Tab, etc.)
  • Upload Files: Upload single or multiple files to file inputs
  • Download Files: Click download links/buttons and save files
  • Select Dropdown: Choose options from dropdown menus
  • Console Logs: Capture browser console messages and errors
  • Network Monitor: Track HTTP requests with filtering and body inspection
  • HTML Extraction: Get page HTML with optional context search
  • Screenshots: Capture timestamped screenshots
  • Cookie Management: List and clear cookies for the current site or all origins
  • Storage Management: List and clear localStorage and sessionStorage
  • Tab Management: List all open tabs and switch between them

Quick Start

Clone this directory into your Claude skills directory. I won't bother making a plugin.

Then just mention "use the browser-tools skill to do XY" and Claude should invoke it automatically. It's recommended to set CLAUDE_BASH_MAINTAIN_PROJECT_WORKING_DIR to 1 in your environment.

Documentation

  • SKILL.md - Quick reference for Claude
  • REFERENCE.md - Complete API documentation, read by Claude when needing more context

Requirements

  • Python 3.11+
  • uv package manager
  • Chrome/Chromium browser

All dependencies are automatically installed via uv.

Platform Support

  • macOS: Chrome variants in /Applications/
  • Windows: Chrome in %PROGRAMFILES% or %LOCALAPPDATA%
  • Linux: Chrome via which or /usr/bin/

User Profile Location

Remote debugging is not allowed in the main Chrome profile so a new one is created and re-used everytime. It's stored
here, per Chrome variant:

  • macOS/Linux: ~/.cache/claude-browser-tools/<variant>/
  • Windows: %LOCALAPPDATA%\claude-browser-tools\<variant>\

# Supported AI Coding Agents

This skill is compatible with the SKILL.md standard and works with all major AI coding agents:

Learn more about the SKILL.md standard and how to use these skills with your preferred AI coding agent.