browser-tools

Automate Chrome browser interactions via Chrome DevTools Protocol for web testing and scraping.

Updated Mar 12, 2026
One-click install
npx skills add https://github.com/RavitejaKarra24/dotfiles --skill browser-tools-ravitejakarra24
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: browser-tools
Source: https://github.com/RavitejaKarra24/dotfiles/tree/main/pi/.pi/agent/skills/pi-skills/browser-tools
Command: npx skills add https://github.com/RavitejaKarra24/dotfiles --skill browser-tools-ravitejakarra24

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires puppeteer-core, puppeteer, puppeteer-extra, puppeteer-extra-plugin-stealth, @mozilla/readability, jsdom, turndown, turndown-plugin-gfm, cheerio.

What problem does it solve? Manually testing web pages, debugging frontend behavior, and extracting content from JavaScript-heavy sites is slow and error-prone. This Skill gives an AI agent direct control over a real Chrome browser so it can navigate pages, run JavaScript, capture screenshots, and extract readable content on demand. ## Core Features & Use Cases - Browser Automation via CDP: Launch Chrome with remote debugging on port 9222, navigate tabs, evaluate arbitrary JavaScript, and take screenshots using puppeteer-core. - Interactive Element Picker: Let the user visually click DOM elements in the browser to get CSS selectors, supporting multi-select with Cmd/Ctrl+Click. - Content Extraction: Convert web pages to clean markdown using Mozilla Readability and Turndown, plus inspect cookies for debugging authentication and session issues. - Use Case: Ask the agent to open your local dev server, click through a checkout flow, inspect the resulting DOM state, and screenshot the result to verify a frontend fix. ## Quick Start Ask the agent to start Chrome with browser-start.js, navigate to a URL, and evaluate JavaScript on the page to inspect its state.

Frequently Asked Questions about browser-tools

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate Chrome with the DevTools Protocol from Node.js?

Launch Chrome with --remote-debugging-port=9222, then connect using puppeteer-core's browserURL option pointing at http://localhost:9222. From there you can navigate pages, evaluate JavaScript, and capture screenshots.

How to extract readable article content from a web page as markdown?

Fetch the page HTML, parse it with Mozilla Readability to isolate the article body, then convert the HTML to markdown with Turndown. The browser-content.js script does this in one step and handles JavaScript-rendered pages.

Can I use my existing Chrome login sessions for browser automation?

Yes. Run browser-start.js with the --profile flag to rsync your default Chrome profile into the automation profile directory, preserving cookies and logins while excluding session lock files.

Why does the script fail to connect to the browser?

Connection fails when Chrome is not running with remote debugging enabled on port 9222. Run browser-start.js first; it launches Chrome with the correct flags and waits until the debugging endpoint responds.

What are the limitations of screenshot-based page inspection?

Screenshots only capture the current viewport and cannot be queried programmatically. The Skill's efficiency guide recommends evaluating JavaScript against the DOM directly to extract structured state instead of relying on images.