MCP Browser Extension Installation Guide

# 🚀 MCP Browser Extension Installer

Complete guide to installing and configuring the MCP Browser Console Capture Extension

Checking Extension Status...
1
Download
2
Extract
3
Install
4
Verify
1
Verify Extension Files

First, ensure you have the extension files in your project. The extension folder should contain:

📁 extension/
├── manifest.json
├── background.js
├── content.js
├── popup.html
├── popup.js
└── icon-*.png (optional)
Note: If you don't have these files, you can download them from the project repository or generate a manifest.json using the test page.
2
Open Chrome Extensions Page

Navigate to Chrome's extension management page using one of these methods:

- Type chrome://extensions in the address bar
- Or click Menu (⋮) → More tools → Extensions
- Or use keyboard shortcut: `Alt+F → L → E`

Chrome Extensions Page Screenshot
3
Enable Developer Mode

Toggle the "Developer mode" switch in the top-right corner of the extensions page.

Important: Developer mode must be enabled to load unpacked extensions. This is required for local development.
Developer Mode Toggle Screenshot
4
Load Unpacked Extension

Click the "Load unpacked" button that appears after enabling Developer mode.

1. Click "Load unpacked" button
2. Navigate to your project's `extension` folder
3. Select the folder and click "Select Folder"

/path/to/your/project/extension
Success! The extension has been loaded. You should see it in your extensions list.
5
Verify Installation

After loading the extension, verify it's working correctly:

1. The extension should appear in your Chrome toolbar
2. Click the extension icon to see the popup
3. Check that the status shows "Connected" when the MCP server is running
4. Open any webpage and check the console for "[mcp-browser] Console capture initialized"

Open Test Page

## 🔧 Troubleshooting

Extension doesn't appear after loading?
• Check that all required files are present in the extension folder
• Ensure Developer mode is enabled
• Check for errors in the Chrome Extensions page
• Try refreshing the extensions page (F5)
Console messages not being captured?
• Refresh the webpage after installing the extension
• Check that the content script is injected (look for "[mcp-browser]" in console)
• Ensure the MCP server is running on the correct port (8875-8895)
• Check the extension popup for connection status
Extension shows "Not Connected"?
• Start the MCP server with `make dev`
• Check that the server is listening on ports 8875-8895
• Ensure no firewall is blocking local WebSocket connections
• Try refreshing the extension (disable and re-enable)
How to update the extension after code changes?
• Go to chrome://extensions
• Find your extension and click the refresh icon (↻)
• Or use the "Update" button at the top of the extensions page
• Refresh any open tabs to load the new content script

### ⚡ Quick Actions