Chrome Extension Bridge MCP

🚀 Chrome Extension WebSocket Bridging MCP

A Chrome extension that establishes a bridge between web pages and a local MCP server via WebSocket connections. This enables accessing web page resources and executing functions from your MCP server.

Inspired by playcanvas/editor-mcp-server.

🚀 Quick Start

This project consists of two main parts:

1. Chrome Extension: Injects client scripts into web pages and establishes a WebSocket connection with the local server.
2. Local MCP Server: A WebSocket server that can send commands to the extension and receive responses.

With this setup, you can:

• Access browser APIs and DOM elements.
• Execute JavaScript functions in the context of web pages.
• Retrieve web page resources and information.
• In particular, access global objects, such as editors like https://threejs.org/editor/. You can control the editor via window.editor, just like playcanvas/editor-mcp-server.

📦 Installation

Setup

1. Clone the repository:

git clone https://github.com/yourusername/chrome-extension-socket-mcp.git
cd chrome-extension-socket-mcp

2. Install dependencies:

npm install

💻 Usage Examples

Development

Run the following command to build the extension in development mode:

npm run debug

Loading the Extension

1. Open Chrome and navigate to chrome://extensions/.
2. Enable "Developer mode" (via the toggle in the top - right corner).
3. Click "Load unpacked" and select the extension folder in this project.
4. The extension is now installed. You should see a small red dot in the top - right corner of any web page, indicating "MCP Extension Loaded".

Server - side

import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import { z } from "zod"; 
import { Client } from "../src/client";

// Define the WebSocket connection port
// This port should match the WebSocket connection in the Chrome extension
const port = 54319;
const client = new Client(port);

// Establish a connection with the Chrome extension
await client.connect();

// Create a new MCP server instance, specifying the name and version
const server = new McpServer({
  name: "Extension - Socket - Server",
  version: "1.0.0",
});

// Register a tool to execute the window.alert function in the browser
// This demonstrates how to access browser APIs from the server
server.tool(
  "alert",                  // Tool name
  "Call the alert function in the browser", 
  {
    description: "Display an alert message.",
    params: []
  },
  async () => {
    return true;
  }
);

// Register a resource to get the user - agent string
server.resource(
  "navigator.userAgent",
  async () => {
    return navigator.userAgent;
  }
);

// Start the server to listen for connections
server.listen(port);

Client - side

// Script injected into the web page
const client = new Client();

// Call the resource to get the user - agent string
client.getResource("navigator.userAgent").then(userAgent => {
  console.log("User Agent:", userAgent);
});

// Call the tool to execute alert
client.tool("alert");

🔧 Technical Details

WebSocket Protocol

The extension uses a simple JSON - RPC protocol:

Request:

{
  "id": "Unique request identifier",
  "method": "mcp:resource.navigator.userAgent",
  "params": {}
}

Response:

{
  "id": "Unique request identifier",
  "result": "Mozilla/5.0 ..."
}

📄 License

MIT