browser-tools_skill

This skill enables automated browser interactions using Chrome DevTools Protocol to navigate pages, extract data, and debug frontends.

JavaScript

217

GitHub Stars

12

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill badlogic/pi-skills --skill browser-tools

.gitignore134 B
browser-content.js3.1 KB
browser-cookies.js861 B
browser-eval.js1.3 KB
browser-hn-scraper.js3.0 KB
browser-nav.js1.0 KB
browser-pick.js4.9 KB
browser-screenshot.js838 B
browser-start.js2.3 KB
package-lock.json82.8 KB
package.json487 B
SKILL.md2.8 KB

Overview

This skill provides interactive browser automation via the Chrome DevTools Protocol to control a visible Chrome instance. It is designed for tasks that need a real browser, such as frontend testing, scraping JavaScript-driven sites, or letting a user select page elements. The tools connect to Chrome on :9222 and include navigation, evaluation, screenshots, cookie inspection, content extraction, and an interactive element picker.

How this skill works

The skill launches or connects to a Chrome instance with remote debugging enabled and issues DevTools Protocol commands to navigate, run JavaScript, capture screenshots, and read or modify page state. It can run arbitrary JS in the page context, extract readable article content as markdown, and present an interactive picker that returns CSS selectors for user-chosen elements. Cookies and session details are exposed for debugging authentication and session issues.

When to use it

Testing or debugging frontend code in a real browser environment
Interacting with or scraping pages that rely on JavaScript execution
When a visible browser or screenshots are needed to verify UI changes
Debugging authentication, cookies, or session-related problems
When the user must select specific DOM elements interactively

Best practices

Run npm install in the tool directory once before first use
Start Chrome with the provided launcher to ensure remote debugging on :9222
Use --profile when you need the user's cookies and authenticated sessions
Prefer the interactive picker for ambiguous or complex page structures
Keep injected JavaScript short and avoid long-running synchronous loops

Example use cases

Open a page, run JS to extract a list of items, and return structured data
Ask the user to click a button in the interactive picker, then perform the click programmatically
Capture a screenshot after a UI change to verify a bug fix or visual regression
Extract article content as markdown from a dynamically rendered news page
Inspect cookies for the current tab to diagnose login or session faults

FAQ

No. Use the provided browser-start script to launch Chrome with remote debugging enabled; you can choose a fresh profile or --profile to reuse user data.

How does the interactive picker work?

The picker lets the user click elements in the visible page; selected elements return CSS selectors. Multi-select with Cmd/Ctrl+Click and press Enter when done.

Can I run arbitrary JavaScript on the page?

Yes. The evaluate tool executes JavaScript in an async page context for data extraction or DOM operations.