Browser Bridge

Browser Bridge connects Chrome to the Browser Bridge CLI and MCP tools, enabling coding agents and developer workflows that can both take actions in the browser and read back page state for verification and debugging.

This extension is built for development and QA workflows: navigate through real sites, fill forms, click and type like a user would, and capture page state (DOM snapshots, console output, network data, performance metrics) to support a fast build-test-fix loop.

KEY FEATURES

BROWSER CONTROL (ACTIONS)

- Navigate to URLs and manage tabs
- Click, hover, scroll, type, drag, and select options
- Fill multi-field forms
- Handle JavaScript dialogs (accept/dismiss)
- Wait for page conditions when needed

PAGE INSPECTION (STATE AND DEBUGGING)

- Capture DOM snapshots (accessibility tree or HTML)
- Compare recent snapshots to spot UI changes
- Find elements by role, label, or text and return stable references
- Extract main page content (Markdown, text, or structured article output)
- Collect console entries for debugging
- Export network traffic as HAR
- Evaluate JavaScript expressions
- Read performance metrics

ARTIFACTS AND DIAGNOSTICS

- Capture screenshots as artifacts
- Run a “doctor” diagnostic to verify extension connectivity and debugger status

HOW IT WORKS

Browser Bridge is a companion extension. Your agent, CLI, or MCP client sends structured commands to Browser Bridge, and the extension performs the requested actions in Chrome or returns the requested inspection data.

IMPORTANT NOTES

- The Chrome Debugger API shows an infobar when attached, and it cannot attach to a tab if DevTools is already open on that tab.
- Some internal or restricted pages (for example chrome:// pages and the Chrome Web Store) cannot be automated or inspected.
- This extension is intended for developer workflows and testing, not background automation.

PERMISSIONS (WHY THEY ARE NEEDED)

- Read and change all your data on all websites: Required so the extension can drive and inspect whichever site you are actively working with.
- Tabs and web navigation: Needed to list tabs, activate a target tab, navigate, and observe page lifecycle events.
- Scripting: Needed to run the content script that performs actions like clicking and typing.
- Debugger: Needed for inspection features like DOM snapshots, console, network HAR, evaluation, and performance metrics.
- Storage: Used to store small configuration values (for example, connection settings).

GETTING STARTED

1. Install this extension.
2. Install Browser Bridge (Node.js 20+): npm i -g @btraut/browser-bridge
3. Drive and inspect from the CLI or from your coding agent. Optionally install the skill or MCP for best results.