Chrome Extension Bridge MCP

Chrome Extension Bridge MCP

ウェブページとローカル MCP サーバーの間に WebSocket 接続を確立する Chrome 拡張機能です。これにより、ウェブページのリソースを操作し、MCP サーバーから関数を実行できます。

playcanvas/editor-mcp-server に着想を得ています。

概要

このプロジェクトは、次の 2 つの主要なコンポーネントで構成されています。

1. Chrome 拡張機能：ウェブページにクライアントスクリプトを挿入し、ローカルサーバーへの WebSocket 接続を確立します。
2. ローカル MCP サーバー：拡張機能にコマンドを送信し、応答を受信する WebSocket サーバーです。

この構成により、次のことができます。

• ローカルサーバーからブラウザー API と DOM 要素にアクセスする
• ウェブページのコンテキストで JavaScript 関数を実行する
• ウェブページからリソースや情報を取得する
• 特に、エディターなどのグローバルオブジェクトにアクセスする（例：https://threejs.org/editor/）。ウェブサイトによって公開されている window.editor を使用して、エディターを操作できます。playcanvas/editor-mcp-server と同様です。

インストール

セットアップ

1. リポジトリをクローンします。

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

2. 依存関係をインストールします。

npm install

開発

次のコマンドを実行して、開発モードで拡張機能をビルドします。

npm run debug

拡張機能の読み込み

1. Chrome を開き、chrome://extensions/ に移動します。
2. 右上のスイッチを切り替えて「デベロッパーモード」を有効にします。
3. 「パッケージ化されていない拡張機能を読み込む」をクリックし、このプロジェクトの extension フォルダーを選択します。
4. 拡張機能がインストールされます。ウェブページの右上に「MCP Extension Loaded」を示す小さな赤いインジケーターが表示されます。

使用方法

サーバー側

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 port for WebSocket connection
// This should match the port in your Chrome extension's WebSocket connection
const port = 54319;
const client = new Client(port);

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

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

// Register a tool that executes the window.alert function in the browser
// This demonstrates how to interact with browser APIs from your server
server.tool(
  "alert",                  // Tool name
  "use window.alert",       // Tool description
  { message: z.string() },  // Tool parameters schema using Zod
  async ({ message }) => {  // Tool implementation function
    // Call the extension to execute alert in the browser context
    const response = await client.callToolExtension("alert", { message });
    return response;
  }
);

// Register a resource to retrieve the browser's user agent
// This demonstrates how to access browser properties from your server
server.resource(
  "userAgent",              // Resource name
  "useragent://chrome",     // Resource URI template
  async (uri) => {          // Resource handler function
    // Get the user agent from the browser
    const { content } = await client.callResourceExtension("navigator.userAgent");
    // Return the formatted resource
    return {
      contents: [
        {
          uri: uri.href,
          text: content[0].text,
        },
      ],
    };
  }
);

// Set up a transport layer for the MCP server
// StdioServerTransport uses standard input/output for communication
const transport = new StdioServerTransport();
await server.connect(transport);

// Handle application termination gracefully
process.on("SIGINT", async () => {
  console.log("SIGINT signal received");  // Log when SIGINT is received
  await client.dispose();                 // Close the WebSocket connection
  process.exit(0);                        // Exit the process
});

拡張機能側

拡張機能は、デフォルトで ws://localhost:54319 に自動接続します。この設定は extension/content.js で変更できます。

拡張機能は、サーバーコマンド用に次の 2 つの主要なエントリーポイントを公開します。

• mcp:resource.* - ブラウザーのリソースやプロパティへのアクセス用
• mcp:tool.* - ブラウザーのコンテキストでの関数実行用

API リファレンス

クライアント

• new Client(port) - 指定したポートに接続する新しいクライアントインスタンスを作成します
• connect() - MCP サーバーに接続します
• callToolExtension(toolName, params) - ブラウザーでツールを呼び出します
• callResourceExtension(resourceName, params) - ブラウザーからリソースを取得します
• dispose() - 接続を閉じます

WebSocket プロトコル

拡張機能は、シンプルな JSON-RPC に似たプロトコルを使用します。

リクエスト：

{
  "id": "unique-request-id",
  "method": "mcp:resource.navigator.userAgent",
  "params": {}
}

レスポンス：

{
  "id": "unique-request-id",
  "result": "Mozilla/5.0 ..."
}

ライセンス

MIT