claude-browser-bridge

Name: claude-browser-bridge
Author: softwaresoftware-dev

Stars

How to install claude-browser-bridge?

softwaresoftware-dev/claude-browser-bridge

$git clone https://github.com/softwaresoftware-dev/claude-browser-bridge

Installs into the current project.

›Prefer a prompt? Paste this to your agent

Install & use

Install claude-browser-bridge by running `git clone https://github.com/softwaresoftware-dev/claude-browser-bridge`, then use it for the current task and follow its documentation at https://github.com/softwaresoftware-dev/claude-browser-bridge.

Files · 1

View on GitHub

README.md

1	# claude-browser-bridge
2
3	Give Claude Code full control of your real browser. Navigate pages, fill forms, click buttons, take screenshots, and run JavaScript — all through your actual browser sessions with your real cookies, extensions, and logins.
4
5	```
6	┌─────────────┐ stdio ┌─────────────┐ WebSocket ┌─────────────┐
7	│ Claude Code │ ◄────────────► │ MCP Server │ ◄────────────► │ Extension │
8	│ (terminal) │ (JSON-RPC) │ (Node.js) │ (port 7225) │ (Brave/Chrome)│
9	└─────────────┘ └─────────────┘ └──────┬──────┘
10	│
11	chrome.* APIs
12	CDP protocol
13	│
14	┌──────▼──────┐
15	│ Browser │
16	│ Tabs │
17	└─────────────┘
18	```
19
20	## Why
21
22	Browser automation tools usually mean headless browsers, fake sessions, and fighting CAPTCHAs. claude-browser-bridge flips that — it connects Claude Code to your real browser where you're already logged in everywhere. Claude sees what you see and interacts with pages as you would.
23
24	## Quick Start
25
26	1. Install the plugin
27
28	Install via the softwaresoftware marketplace (installs this plugin and its dependencies):
29
30	```
31	/softwaresoftware:install claude-browser-bridge
32	```
33
34	The browser extension ships bundled with the plugin — no separate download.
35
36	2. Load the extension into your browser
37
38	Run the setup skill for guided instructions:
39
40	```
41	/claude-browser-bridge:setup
42	```
43
44	Or do it manually:
45
46	1. Open `brave://extensions` (or `chrome://extensions`, `edge://extensions`)
47	2. Enable Developer mode
48	3. Click Load unpacked → select the `extension/` folder inside the installed plugin directory
49	4. The Browser Bridge extension shows a green ON badge when connected
50
51	The plugin directory is at `~/.claude/plugins/cache/softwaresoftware-plugins/claude-browser-bridge/<version>/`.
52
53	3. Use it
54
55	Ask Claude to navigate to a page, fill a form, or take a screenshot. The daemon starts automatically on first tool use; the extension connects to it over WebSocket.
56
57	### Development install
58
59	To work on the plugin locally:
60
61	```bash
62	cd claude-browser-bridge
63	make install
64	claude --plugin-dir $(pwd)
65	```
66
67	Load the extension from `./extension/` using the same "Load unpacked" flow above.
68
69	## Tools
70
71	\| Tool \| Description \|
72	\|------\|-------------\|
73	\| `list_tabs` \| List all open tabs with IDs, URLs, and titles \|
74	\| `get_tab_info` \| Get URL, title, and status of a specific tab \|
75	\| `screenshot` \| Capture the visible tab as a PNG image \|
76	\| `get_page_content` \| Get page text or full HTML \|
77	\| `navigate` \| Navigate a tab to a URL and wait for load \|
78	\| `click` \| Click an element by CSS selector \|
79	\| `type` \| Type text into an input field \|
80	\| `eval_js` \| Execute JavaScript in the page context (main world) \|
81	\| `fill_form` \| Fill multiple form fields at once \|
82	\| `get_element_info` \| Get attributes, text, and bounding box of an element \|
83	\| `wait_for` \| Wait for a CSS selector to appear on the page \|
84	\| `scroll` \| Scroll the page or a specific element \|
85
86	All tools accept an optional `tab_id` parameter. Omit it to target the active tab.
87
88	## How It Works
89
90	Trusted input via CDP. Clicks and keystrokes aren't simulated with JavaScript events — they go through the Chrome DevTools Protocol as trusted input events. The browser treats them exactly like real user actions, so sites that detect synthetic events won't notice a difference.
91
92	Persistent WebSocket connection. The extension maintains a WebSocket connection to the local MCP server with automatic reconnection and exponential backoff (1s up to 30s). A keepalive alarm prevents the service worker from being killed by the browser.
93
94	Main world execution. `eval_js` runs code in the page's actual JavaScript context, not an isolated content script world. It can access page globals, call functions defined by the site, and interact with frameworks like React or Vue directly.
95
96	Smart form filling. `fill_form` dispatches both `input` and `change` events after setting values, so reactive frameworks (React, Angular, Vue) pick up the changes properly.
97
98	## Configuration
99
100	\| Variable \| Default \| Description \|
101	\|----------\|---------\|-------------\|
102	\| `BROWSER_BRIDGE_PORT` \| `7225` \| WebSocket port for extension connection \|
103
104	Timeouts:
105	- Default tool timeout: 30 seconds
106	- `navigate`: 60 seconds (pages can be slow)
107	- `wait_for`: configurable per call (default 10 seconds)
108
109	## Limitations
110
111	- No internal browser pages. Extensions can't access `chrome://` or `brave://` URLs — the browser blocks it. If you need to interact with extens

6 picks

Type

Install claude-browser-bridge by running `git clone https://github.com/softwaresoftware-dev/claude-browser-bridge`, then use it for the current task and follow its documentation at https://github.com/softwaresoftware-dev/claude-browser-bridge.

claude-browser-bridge

How to install claude-browser-bridge?

Related

claude-browser-bridge

How to install claude-browser-bridge?

Related