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.
- Click "Load unpacked" button
- Navigate to your project's
extensionfolder - Select the folder and click "Select Folder"
/path/to/your/project/extension
5
Verify Installation
After loading the extension, verify it's working correctly:
- The extension should appear in your Chrome toolbar
- Click the extension icon to see the popup
- Check that the status shows "Connected" when the MCP server is running
- Open any webpage and check the console for "[mcp-browser] Console capture initialized"
🔧 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)
• 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
• 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
• 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)
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
• 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