diff --git a/README.md b/README.md index d250f59..a41ce4f 100644 --- a/README.md +++ b/README.md @@ -1,59 +1,22 @@ -# Chrome DevTools CLI +# chrome-devtools-cli -Rust CLI that connects to an existing Chrome browser via the DevTools Protocol. Auto-connects by default — no manual WebSocket URL needed. +A high-performance, developer-friendly CLI for interacting with Chrome via the DevTools Protocol (CDP). -[![crates.io](https://img.shields.io/crates/v/chrome-devtools-cli.svg)](https://crates.io/crates/chrome-devtools-cli) -[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](./LICENSE) -[![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/aeroxy/chrome-devtools-cli) +## Key Features -## Installation - -### Homebrew (macOS, recommended) - -```bash -brew install aeroxy/tap/chrome-devtools -``` - -### Cargo - -```bash -cargo install chrome-devtools-cli -``` +- **Page Emulation**: Manage viewport size, mobile device emulation, device scale factor, and geolocation overrides in one place. +- **Smart Navigation**: URL navigation, back/forward, and reload with automatic page-load waiting and custom HTTP headers. +- **Visual Tools**: High-quality screenshots (including full-page) and accessibility tree snapshots. +- **Interaction**: Click, fill, type, and hover using CSS selectors or coordinates. +- **JS Evaluation**: Run JavaScript on the page with support for handling dialogs. +- **3rd Party Integration**: Access tools exposed by pages via custom protocol extensions. -The installed binary is named `chrome-devtools`. - -### Build from source +## Installation ```bash -cargo build --release -# Binary: ./target/release/chrome-devtools +cargo install --path . ``` -## Why this exists - -Inspired by [chrome-devtools-mcp](https://github.com/ChromeDevTools/chrome-devtools-mcp) — the official MCP server for Chrome DevTools. It works well, but MCP-based browser tools consume a lot of token context: every interaction sends and receives large protocol payloads through the MCP layer. - -99% of the time the browser being controlled is the user's own Chrome with their own credentials, so there is no need for a full headless browser stack like Puppeteer or Playwright, and no need for the MCP overhead. - -This is a lightweight Rust binary that talks directly to Chrome's DevTools Protocol. One command in, one result out. No separate browser process, no credential handoff, no heavyweight runtime. The agent skill for this tool is a single `SKILL.md` file — the entire context overhead is this documentation. - -## Architecture - -``` -chrome-devtools navigate https://example.com - │ - ├─ Try daemon (Unix socket /tmp/chrome-devtools-daemon.sock) - │ └─ If running → send command → get result - │ - ├─ If no daemon → spawn one (background process) - │ └─ Daemon connects to Chrome WebSocket (one-time approval) - │ └─ Listens on Unix socket, 5-min idle timeout - │ - └─ Fallback → direct WebSocket connection (no daemon) -``` - -The daemon keeps a persistent WebSocket connection to Chrome, so the browser only prompts for DevTools access once. Subsequent commands reuse the connection. - ## Prerequisites Chrome must have remote debugging enabled: @@ -62,168 +25,57 @@ Chrome must have remote debugging enabled: 2. Go to `chrome://inspect/#remote-debugging` 3. Enable the remote debugging server -## Auto-connect - -By default, the CLI reads `DevToolsActivePort` from Chrome's user data directory: - -| OS | Default path | -|----|-------------| -| macOS | `~/Library/Application Support/Google/Chrome/` | -| Linux | `~/.config/google-chrome/` | -| Windows | `%LOCALAPPDATA%\Google\Chrome\User Data\` | - -Override with `--user-data-dir`, `--channel` (beta/canary/dev), or `--ws-endpoint`. All three also read from environment variables: - -| Environment Variable | Corresponding Flag | -|----------------------|--------------------| -| `CHROME_WS_ENDPOINT` | `--ws-endpoint` | -| `CHROME_USER_DATA_DIR` | `--user-data-dir` | -| `CHROME_CHANNEL` | `--channel` | - -## Page targeting - -Every page-level command outputs a friendly target name like `[target:red-snake]`. This is a deterministic word-pair derived from Chrome's internal target ID — same page always gets the same name. +## Quick Start +### General Usage ```bash -# Navigate — note the target name -chrome-devtools navigate https://example.com -# Navigated to https://example.com -# [target:red-snake] - -# Pin subsequent commands to the same page -chrome-devtools --target red-snake screenshot --output /tmp/page.png -chrome-devtools --target red-snake evaluate "document.title" +chrome-devtools list-pages +chrome-devtools --page 0 navigate https://google.com +chrome-devtools --target main screenshot --output screenshot.png ``` -Without `--target`, commands default to page index 0, which may vary as Chrome reorders tabs. Always capture and reuse the target name. - -`list-pages` shows all pages with their friendly names: +### Emulation (Page-level Overrides) +Overrides like viewport size and geolocation are persistent per page. -``` -[0] (green-dog) My App — https://localhost:3000 -[1] (red-snake) Example Domain — https://example.com -[2] (bold-stag) GitHub — https://github.com -``` - -You can also use `--page ` for quick one-offs, or pass the raw hex target ID. - -## Commands +```bash +# Set viewport and geolocation +chrome-devtools emulate --viewport 1280x720 --geolocation 37.77,-122.41 -### Navigation +# Emulate mobile device +chrome-devtools emulate --viewport 375x812 --mobile --device-scale-factor 3 -| Command | Description | -|---------|-------------| -| `navigate ` | Go to URL (waits for load) | -| `navigate --back` | Go back in history | -| `navigate --forward` | Go forward | -| `navigate --reload` | Reload page | -| `new-page ` | Open new tab | -| `close-page ` | Close tab by index | -| `select-page ` | Bring tab to front | -| `list-pages` | List all open tabs | +# Navigate with emulation +chrome-devtools navigate https://example.com --viewport 1920x1080 --mobile -### Inspection +# Open new tab with emulation +chrome-devtools new-page https://example.com --viewport 375x812 --geolocation 40.71,-74.00 -| Command | Description | -|---------|-------------| -| `screenshot --output ` | Save screenshot to file | -| `screenshot --full-page` | Capture full scrollable page | -| `evaluate [--dialog-action ]` | Run JavaScript (optionally handle dialogs: accept, dismiss, or prompt text) | -| `snapshot` | Accessibility tree dump | +# Clear overrides +chrome-devtools emulate --clear-all +chrome-devtools emulate --clear-viewport +chrome-devtools emulate --clear-geolocation +``` ### Interaction - -| Command | Description | -|---------|-------------| -| `click ` | Click element by CSS selector | -| `click-at ` | Click at specific coordinates | -| `fill ` | Fill input field, dropdown (`