OverviewHistoryStatsSecurity
npx skills add ...
Documentation
SKILL.md
npx skills add badlogic/pi-skills --skill browser-tools
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.
npx skills add badlogic/pi-skills --skill browser-tools
Chrome DevTools Protocol tools for agent-assisted web automation. These tools connect to Chrome running on :9222 with remote debugging enabled.
Run once before first use:
Launch Chrome with remote debugging on :9222. Use --profile to preserve user's authentication state.
Navigate to URLs. Use --new flag to open in a new tab instead of reusing current tab.
Execute JavaScript in the active tab. Code runs in async context. Use this to extract data, inspect page state, or perform DOM operations programmatically.
Capture current viewport and return temporary file path. Use this to visually inspect page state or verify UI changes.
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:
Display all cookies for the current tab including domain, path, httpOnly, and secure flags. Use this to debug authentication issues or inspect session state.
Navigate to a URL and extract readable content as markdown. Uses Mozilla Readability for article extraction and Turndown for HTML-to-markdown conversion. Works on pages with JavaScript content (waits for page to load).
Don't take screenshots to see page state. Do parse the DOM directly:
Wrap everything in an IIFE to run multi-statement code:
Don't make separate calls for each click. Do batch them:
Extract structured state in one call:
If DOM updates after actions, add a small delay with bash:
Always start by understanding the page structure:
Then target specific elements based on what you find.
{baseDir}/browser-eval.js 'document.title'
{baseDir}/browser-eval.js 'document.querySelectorAll("a").length'{baseDir}/browser-screenshot.js{baseDir}/browser-pick.js "Click the submit button"{baseDir}/browser-cookies.js{baseDir}/browser-content.js https://example.com// Get page structure
document.body.innerHTML.slice(0, 5000)
// Find interactive elements
Array.from(document.querySelectorAll('button, input, [role="button"]')).map(e => ({
id: e.id,
text: e.textContent.trim(),
class: e.className
}))(function() {
// Multiple operations
const data = document.querySelector('#target').textContent;
const buttons = document.querySelectorAll('button');
// Interactions
buttons[0].click();
// Return results
return JSON.stringify({ data, buttonCount: buttons.length });
})()(function() {
const actions = ["btn1", "btn2", "btn3"];
actions.forEach(id => document.getElementById(id).click());
return "Done";
})()(function() {
const text = "HELLO";
for (const char of text) {
document.getElementById("key-" + char).click();
}
document.getElementById("submit").click();
return "Submitted: " + text;
})()(function() {
const state = {
score: document.querySelector('.score')?.textContent,
status: document.querySelector('.status')?.className,
items: Array.from(document.querySelectorAll('.item')).map(el => ({
text: el.textContent,
active: el.classList.contains('active')
}))
};
return JSON.stringify(state, null, 2);
})()sleep 0.5 && {baseDir}/browser-eval.js '...'(function() {
return {
title: document.title,
forms: document.forms.length,
buttons: document.querySelectorAll('button').length,
inputs: document.querySelectorAll('input').length,
mainContent: document.body.innerHTML.slice(0, 3000)
};
})()