YouTip

Claude Code's Chrome integration allows you to control your browser directly from the command line (CLI) or VS Code extension. Claude can: * Open web pages, click buttons, fill out forms * Read browser console logs (console errors, network requests, DOM state) * Interact with any website you're logged into (Gmail, Notion, Google Docs, etc.) * Record browser actions as GIF files * Work across multiple tabs **Key Advantage**: Claude shares your browser's login state, so no additional API keys or re-authentication required. > This feature is currently in Beta, allowing you to use natural language commands in the terminal (CLI) or VS Code to have Claude directly control your Chrome browser for navigation, clicking, inputting, debugging, and data extraction without manually switching windows. * * * ## Installation and Setup ### Prerequisites Before using this feature, you must meet the following requirements: | Requirement | Description | | --- | --- | | Claude Code Version | v2.0.73 or higher | | Chrome Extension Version | Claude in Chrome v1.0.36 or higher | | Anthropic Account | Requires **direct paid plan** (Pro, Max, Teams, or Enterprise) | | Unsupported Channels | Users accessing via Amazon Bedrock, Google Vertex AI, or Microsoft Foundry **are not supported** | ### Installation Steps **1. Install the Browser Extension**: * Open Chrome/Edge and visit (https://chromewebstore.google.com/detail/claude/fcoeoabgfenejglbffodgkkbkcdhcgfn). * Click "Add to Chrome" and install. * After installation, it's recommended to restart your browser to ensure the Native Messaging Host loads correctly. !(#) **2. Install/Update Claude Code**: * Follow the official quick start guide to install Claude Code (CLI or VS Code extension). **3. Permissions and Connection**: * On first run, the extension will automatically install the Native Messaging Host. * Common path (macOS example): `~/Library/Application Support/Google/Chrome/NativeMessagingHosts/com.anthropic.claude_code_browser_extension.json` * * * ## How to Start and Connect #### Starting in CLI * **Recommended Method**: Launch directly with Chrome claude --chrome * Or enable in an existing session: /chrome Then choose to enable or reconnect. * **Set as Default** (convenient but increases context usage): Select "Enabled by default" in the `/chrome` menu. ### Using in VS Code * Type `@browser` followed by your instruction in the prompt box, for example: @browser open localhost:3000 and check if there are any console errors ### Checking Connection Status In a Claude Code session, type `/chrome` to view status, manage permissions, and reconnect the extension. * * * ## Basic Usage Claude Code controls the browser through **natural language prompts**, without requiring complex code. Claude automatically parses your instructions, performs the corresponding actions, and returns results (including screenshots, console logs, extracted data, etc.). **Core Capabilities**: * Navigation: Open URLs * Interaction: Click elements, input text, scroll pages * Reading: View DOM, console errors, network requests * Automation: Form filling, data extraction, cross-tab operations * Others: Record GIF demos, save CSV files, etc. **Prompt Tips**: * Be clear and step-by-step (e.g., "First open the URL, then click the search box, enter XXX, and tell me the results"). * You can combine with local files (e.g., read CSV for batch operations). * For long tasks, Claude will execute step-by-step and report progress. * * * ## Practical Examples **Example 1: Simple Navigation and Interaction** Go to https://www.baidu.com, click the search box, enter "python", and tell me the search results. **Example 2: Local Web Page Testing and Debugging** I just updated the login form validation. Please open localhost:3000, submit the form with invalid data, check if the error messages display correctly, and review the console logs. **Example 3: Form Automation (Combined with Local Files)** I have a contacts.csv file with customer contact information. For each row, open crm.example.com, click “Add Contact”, fill in name, email, and phone number, then submit. **Example 4: Working on Logged-in Websites like Google Docs** Based on recent Git commits, draft a project update and add it to my Google Doc (URL: docs.google.com/document/d/abc123). **Example 5: Data Extraction and Saving** Open the product list page, extract the name, price, and inventory status of each item, and save them as a CSV file. **Example 6: Recording Demo GIF** Record a GIF showing the complete process of adding items to cart and completing checkout. **Example 7: Multi-site Workflow** Check my calendar for tomorrow, and for each meeting with external participants, find their company website and add notes.