[FEATURE] Integration with Claude Chrome Extension for Browser Automation and Debugging

Preflight Checklist

• [x] I have searched existing requests and this feature hasn't been requested yet
• [x] This is a single feature request (not multiple features)

Problem Statement

Currently, Claude Code operates primarily within the terminal and filesystem context. However, when developing web applications, there is a significant disconnection between the code generation environment (CLI) and the runtime environment (Browser).

To debug a UI issue, verify a layout change, or investigate a console error, I currently have to manually copy-paste DOM snippets, error logs, or describe the visual state to Claude Code. Claude Code lacks direct visibility into the rendered state of the application, making "visual debugging" and end-to-end testing workflows inefficient.

Proposed Solution

I propose implementing a bidirectional communication bridge (interoperability) between Claude Code and the Claude Chrome Extension.

This integration should allow Claude Code to:

1. Read Browser State: Access the current DOM, computed styles, console logs, and network activity of the active tab.
2. Operate the Browser: Perform actions such as clicking elements, filling forms, and navigating URLs directly from the CLI context.
3. Debug Applications: Correlate runtime errors in the browser directly with the source code in the local project.

Ideally, the CLI could discover the running browser instance (via the extension) and request permission to attach to it, effectively giving Claude Code "eyes" and "hands" inside the browser.

Alternative Solutions

• Manual Context Transfer: Manually copying HTML/CSS and console logs into the chat, which is slow and error-prone.
• Headless Libraries (e.g., Puppeteer/Playwright): While Claude can write scripts for these, they require setting up a separate testing environment and do not allow for debugging the current open session where the user is working.

Priority

High - Significant impact on productivity

Feature Category

CLI commands and flags

Use Case Example

1. I am developing a React application and notice the navigation bar breaks on mobile view in my local Chrome browser.
2. In the terminal, I run Claude Code and ask: "Why is the navbar collapsing incorrectly on mobile width? Check the browser."
3. Claude Code sends a request to the Claude Chrome Extension.
4. The Extension captures the current DOM structure and CSS properties of the navbar elements.
5. Claude Code analyzes this data, identifies a conflicting @media query in the CSS, and proposes a code fix in my local file.
6. Claude Code then instructs the browser to reload (via the extension) to verify the fix works.

Additional Context

• This could potentially be implemented using the Model Context Protocol (MCP) to expose the Chrome Extension as a "resource" or "tool" that the Claude Code client can connect to.
• Security measures (like an authorization handshake) would be needed to ensure the CLI allows user confirmation before accessing browser tabs.