Chrome remote webtools

[afshawnlotfi]

Add Remote Browser Connection Feature

Overview

This PR adds the ability for Roo to connect to a remote Chrome browser instance instead of launching a local one. This feature is particularly useful in containerized environments or when users want to use a specific Chrome instance with custom configurations.

Features

• Remote Browser Connection: Connect to a Chrome browser running with remote debugging enabled (port 9222)
• Auto-discovery: Automatically discover Chrome instances on the local network
• Manual Configuration: Manually specify a custom URL for the Chrome DevTools Protocol
• Connection Testing: Test the connection to ensure it's working properly
• Fallback Mechanism: If remote connection fails, fall back to local browser

UI Changes

• Added "Use remote browser connection" checkbox in browser settings
• Added input field for custom Chrome DevTools Protocol URL
• Added "Test Connection" button to verify the connection
• Added success/failure feedback for connection attempts

Technical Implementation

• Created new browserDiscovery.ts module for finding Chrome instances on the network
• Enhanced BrowserSession.ts to support connecting to remote browsers
• Added state management for remote browser connection settings
• Added message handlers for testing and discovering browser connections
• Added comprehensive test coverage for the new functionality

How It Works

1. When enabled, Roo will first try to connect using the provided custom URL
2. If no URL is provided or connection fails, it will attempt auto-discovery
3. Auto-discovery searches for Chrome instances on localhost, Docker containers, and the local network
4. If a Chrome instance is found, it connects using the Chrome DevTools Protocol
5. If all remote connection attempts fail, it falls back to launching a local browser

Testing

• Added unit tests for all new functionality
• Manually tested in various environments including:
  • Local development
  • Docker containers
  • Remote machines

Setup Instructions

To use the remote browser connection feature:

1. Launch Chrome with Remote Debugging Enabled:

   /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug

   Alternatively, you can access Chrome's DevTools inspection page at chrome://inspect

2. Technical Details:

   • This establishes a WebSocket server with Chrome for communication
   • Roo connects to this WebSocket server to control the browser

3. DevContainer Configuration:
   If you're using a devcontainer, you need to establish a host bridge by adding this to your devcontainer.json:

   "runArgs": [
       "--network=host"  // Use host network mode to access the host's Chrome instance
   ]

---

Important

Adds remote Chrome connection feature with auto-discovery, manual configuration, and UI updates for connection testing and state management.

• Behavior:
  • Adds remote Chrome connection feature with auto-discovery and manual URL configuration in ClineProvider.ts.
  • Implements connection testing and fallback to local browser if remote connection fails.
• UI Changes:
  • Adds "Use remote browser connection" checkbox and input for custom URL in BrowserSettings.tsx.
  • Adds "Test Connection" button with feedback in BrowserSettings.tsx.
• State Management:
  • Updates ExtensionStateContext.tsx to handle remote browser settings.
  • Adds remoteBrowserEnabled and remoteBrowserHost to ExtensionState in ExtensionMessage.ts.
• Testing:
  • Adds tests for remote browser connection in ClineProvider.test.ts.
• Misc:
  • Adds discoverChromeInstances and testBrowserConnection functions in browserDiscovery.ts.
  • Updates BrowserSession.ts to manage remote connections and caching.

^{This description was created by for 71795d5. It will automatically update as commits are pushed.}

[changeset-bot]

⚠️ No Changeset found

Latest commit: ce3e22e

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[ellipsis-dev]

The use of vscode.window.withProgress for retrieving Docker gateway IP couples business logic with UI. Consider refactoring this to a utility function that can run headlessly (or use a child process directly) if no user feedback is required.

[afshawnlotfi]

Updated

[hannesrudolph]

@afshawnlotfi how does RooCodeInc/Roo-Code-Docs#72 look?

[afshawnlotfi]

Looks great