Browser Control MCP server

The Browser Control MCP server enables AI assistants like Claude Desktop to interact with your browser by managing tabs, accessing browser history, and extracting content from webpages. It creates a bridge between AI systems and your local browser environment for research and information retrieval tasks.

Installation

Prerequisites

• Node.js and npm
• Firefox browser
• Claude Desktop (for Claude integration)

Setup Process

First, clone the repository and build both the MCP server and browser extension:

npm install
npm install --prefix mcp-server
npm install --prefix firefox-extension
npm run build

Installing the Firefox Extension

1. Enter about:debugging in the Firefox URL bar
2. Click on "This Firefox"
3. Click on "Load Temporary Add-on..."
4. Navigate to the firefox-extension folder in the project and select the manifest.json file
5. When the extension's preferences page opens, copy the secret key - you'll need this for server configuration

Note: If you prefer not to install the extension in your main Firefox profile, you can use Firefox Developer Edition instead, which is available at https://www.mozilla.org/en-US/firefox/developer/

Configuration

Setting Up with Claude Desktop

After installing the Firefox extension, configure Claude Desktop to use the MCP server:

1. In Claude Desktop, access the Developer settings and click "Edit Config"
2. Add the following configuration to your claude_desktop_config.json:

{
    "mcpServers": {
        "browser-control": {
            "command": "node",
            "args": [
                "/path/to/repo/mcp-server/dist/server.js"
            ],
            "env": {
                "EXTENSION_SECRET": "<secret_from_extension>"
            }
        }
    }
}

3. Replace /path/to/repo with the actual path to your repository
4. Replace <secret_from_extension> with the secret key provided by the Firefox extension
5. Restart Claude Desktop

Optional: You can set the EXTENSION_PORT environment variable to specify a custom port for server-extension communication (default is 8089).

Using the MCP Server

Once set up, you can use natural language to instruct Claude to perform browser-related tasks:

Tab Management

• Ask Claude to close non-work related tabs
• Request tab reorganization based on content
• Have Claude clean up tabs that haven't been accessed recently

History Search

• Find specific articles from your browsing history
• Request Claude to open articles on specific topics you've visited recently

Research and Content Analysis

• Ask Claude to open websites, read content, and analyze information
• Request research on specific topics using Google Scholar or other search engines
• Have Claude compile information from multiple open tabs

The extension can be configured to limit the MCP server's actions through its preferences page. By default, accessing webpage content requires your explicit consent for each domain.

Human-in-the-Loop Controls

For privacy and security, the extension requires your permission when:

• Accessing content from a new domain for the first time
• Performing certain operations that might affect your browsing experience

You can adjust these permissions in the extension's preferences.

How to install this MCP server

For Claude Code

To add this MCP server to Claude Code, run this command in your terminal:

claude mcp add-json "browser-control" '{"command":"node","args":["/path/to/repo/mcp-server/dist/server.js"],"env":{"EXTENSION_SECRET":"<secret_from_extension>"}}'

See the official Claude Code MCP documentation for more details.

For Cursor

There are two ways to add an MCP server to Cursor. The most common way is to add the server globally in the ~/.cursor/mcp.json file so that it is available in all of your projects.

If you only need the server in a single project, you can add it to the project instead by creating or adding it to the .cursor/mcp.json file.

Adding an MCP server to Cursor globally

To add a global MCP server go to Cursor Settings > Tools & Integrations and click "New MCP Server".

When you click that button the ~/.cursor/mcp.json file will be opened and you can add your server like this:

{
    "mcpServers": {
        "browser-control": {
            "command": "node",
            "args": [
                "/path/to/repo/mcp-server/dist/server.js"
            ],
            "env": {
                "EXTENSION_SECRET": "<secret_from_extension>"
            }
        }
    }
}

Adding an MCP server to a project

To add an MCP server to a project you can create a new .cursor/mcp.json file or add it to the existing one. This will look exactly the same as the global MCP server example above.

How to use the MCP server

Once the server is installed, you might need to head back to Settings > MCP and click the refresh button.

The Cursor agent will then be able to see the available tools the added MCP server has available and will call them when it needs to.

You can also explicitly ask the agent to use the tool by mentioning the tool name and describing what the function does.

For Claude Desktop

To add this MCP server to Claude Desktop:

1. Find your configuration file:

• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
• Windows: %APPDATA%\Claude\claude_desktop_config.json
• Linux: ~/.config/Claude/claude_desktop_config.json

2. Add this to your configuration file:

{
    "mcpServers": {
        "browser-control": {
            "command": "node",
            "args": [
                "/path/to/repo/mcp-server/dist/server.js"
            ],
            "env": {
                "EXTENSION_SECRET": "<secret_from_extension>"
            }
        }
    }
}

3. Restart Claude Desktop for the changes to take effect