BrowserConnect
MCP Server · Chrome Extension · v1.1.3

Give Claude eyes, ears, and hands in your browser.

A Chrome extension and MCP server that wire Claude Code straight into your live browser. See pages, read console errors, intercept network, click, fill, and capture — without leaving your terminal.

$ npm install -g browserconnect
View on npm →
MIT licensed Node 18+ localhost:2222 · loopback only Zero telemetry
01 · IN CHROME

A side panel, not a tab

Manifest V3 extension with the Side Panel API. It lives beside the page, follows the tab you're viewing, and reads the DOM in the MAIN world.

02 · ON LOCALHOST

An Express bridge

A Node MCP server on 127.0.0.1:2222 relays messages and actions between the panel and Claude over a long-poll.

03 · IN YOUR TERMINAL

Claude Code, connected

The MCP tools appear in Claude's tool list. It captures, inspects, and drives the browser on demand — based on what you describe.

— Capabilities

Four ways Claude reads the page, and one way it acts.

Capture, inspection, and debugging flow into the panel. Automation flows back out as live actions in your active tab.

Visual capture

Annotate, crop, or stitch a full page. Record a filmstrip by holding R; diff a before/after at the pixel.

Annotate Region Full page Filmstrip Pixel diff

Page inspection

Pick any element for its selector and computed styles. Read storage, Core Web Vitals, accessibility, and SEO in one click.

Element picker DOM reader Storage Vitals A11y SEO

Debugging

Live console and network logs with stack traces and timings. Filter the noise, or auto-forward uncaught errors as they happen.

Console Network Noise filter Auto-error

Browser automation

Claude drives the active tab — click, fill, hover, scroll, navigate, type, and run JS, with framework-compatible events.

Click Fill Navigate Execute JS
— MCP Toolbox

Twenty tools, named for Claude.

Claude calls the right one automatically — get_console_log when you describe a JS error, get_network_requests when you describe an API failure. No need to ask.

take_screenshot Capture the visible tab as a JPEG.
click_element Click any DOM element by CSS selector.
fill_input Set field values with framework-compatible events.
hover_element Trigger hover to reveal tooltips and dropdowns.
scroll_page Scroll to top, bottom, or by exact pixels.
navigate_to Open a URL and wait for the page to load.
wait_for_element Poll until a selector appears, with a timeout.
type_text Type into focused elements via real key events.
press_key Press Enter, Tab, Escape, arrows, Backspace.
find_element Locate an element by natural-language description.
get_dom Read the full page HTML or a single element.
execute_js Run arbitrary JavaScript in the page's MAIN world.
get_console_log Fetch live console output with stack traces.
get_network_requests Fetch the intercepted fetch / XHR request log.
get_storage Read localStorage, sessionStorage, and cookies.
get_performance Core Web Vitals plus full navigation timing.
get_selected_text Return whatever text is highlighted on the page.
get_pending_message Read the next message sent from the panel.
send_response Send a reply back to the side panel.
clear_messages Empty the panel-to-Claude message queue.
— Architecture

A long-poll bridge between tab and terminal.

Chrome panel
Side panel · MAIN world
Express bridge
Held open · :2222
Claude
MCP · stdio
Request · action → ← Response · result
CHROME PANEL

You capture or type in the side panel, then execute Claude's actions in the active tab.

POST /message POST /action
EXPRESS · :2222

A loopback server queues messages and actions, holding requests open so replies land the instant they're ready.

/handshake /action-pending
CLAUDE · MCP

Claude reads pending messages, dispatches tools over stdio, and replies back to the panel.

stdio transport send_response()
01
Long-poll

Responses arrive the instant Claude sends them — no fixed polling interval.

02
Pull

Claude requests console and network data on demand; the panel fetches it fresh from the tab.

03
Push

Claude dispatches actions; the panel executes them in the active tab and returns the result.

04
Auto-demand

The right tool fires automatically based on how you describe the problem.

— Security model

Local by default. Loopback only.

The HTTP bridge listens on 127.0.0.1:2222 — unreachable from the network. It defends against malicious web content in your tabs, and is honest about where the trust boundary sits.

Enforced
Protected

Per-session token + CORS preflight

Every endpoint but /health needs a fresh 192-bit token from /handshake. The custom header forces a preflight the server rejects unless the origin is a chrome-extension:// URL.

By design
Trust boundary

Same OS user, not the network

Any process running as you can reach loopback — an intentional trade-off. Local software running as you is already trusted, the same way it can read your files. BrowserConnect defends against web pages, not your own shell.

Planned fix
Residual

Origin allowlist not yet pinned

Any chrome-extension:// origin currently passes CORS. Pinning to the exact extension ID lands once it has a stable Web Store ID. Until then, keep installed extensions to ones you trust.

— Quickstart

Five steps to connected.

01Install the MCP server
$ npm install -g browserconnect
02Configure Claude Code
$ npx browserconnect --init

Writes .mcp.json and appends instructions to CLAUDE.md.

03Load the Chrome extension

Open chrome://extensions, enable Developer mode, click Load unpacked, and pick the chrome-extension folder in the package.

04Restart Claude Code

The MCP server starts and browser-connect appears in your tool list.

05Open the side panel

Click the BrowserConnect icon in Chrome's toolbar. The panel opens alongside the page — you're ready.

TEAM SETUP · ZERO-CONFIG

Teammates with Node installed need one command per project, then the extension.

$ npx browserconnect --init
Requires: Node.js 18+ Chromium browser Claude Code CLI