Chrome Extension Bridge MCP

🚀 Chrome拡張WebSocketブリッジMCP

このChrome拡張機能は、WebSocket接続を介してウェブページとローカルのMCPサーバー間にブリッジを構築します。これにより、MCPサーバーからウェブページのリソースにアクセスし、関数を実行することが可能になります。

playcanvas/editor-mcp-serverに触発されて開発されました。

🚀 クイックスタート

このプロジェクトは、次の2つの主要部分で構成されています：

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

この設定により、以下のことが可能になります：

• ブラウザAPIとDOM要素にアクセスする
• ウェブページのコンテキストでJavaScript関数を実行する
• ウェブページのリソースと情報を取得する
• 特に、https://threejs.org/editor/ のようなエディターなどのグローバルオブジェクトにアクセスできます。playcanvas/editor-mcp-server と同様に、window.editor を介してエディターを制御できます。

📦 インストール

セットアップ

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

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

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

npm install

💻 使用例

基本的な使用法

サーバー側

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";

// WebSocket接続のポートを定義します
// このポートはChrome拡張機能内のWebSocket接続と一致する必要があります
const port = 54319;
const client = new Client(port);

// Chrome拡張機能との接続を確立します
await client.connect();

// 新しいMCPサーバーインスタンスを作成し、名前とバージョンを指定します
const server = new McpServer({
  name: "Extension-Socket-Server",
  version: "1.0.0",
});

// ブラウザでwindow.alert関数を実行するためのツールを登録します
// これは、サーバーからブラウザAPIにアクセスする方法を示しています
server.tool(
  "alert",                  // ツール名
  "ブラウザ内で alert 関数を呼び出す", 
  {
    description: "アラートメッセージを表示します。",
    params: []
  },
  async () => {
    return true;
  }
);

// ユーザーエージェント文字列を取得するためのリソースを登録します
server.resource(
  "navigator.userAgent",
  async () => {
    return navigator.userAgent;
  }
);

// サーバーを起動して接続を待機します
server.listen(port);

クライアント側

// ウェブページに注入されるスクリプト
const client = new Client();

// リソースを呼び出してユーザーエージェント文字列を取得します
client.getResource("navigator.userAgent").then(userAgent => {
  console.log("User Agent:", userAgent);
});

// ツールを呼び出して alert を実行します
client.tool("alert");

高度な使用法

開発

開発モードで拡張機能をビルドするには、以下のコマンドを実行します。

npm run debug

拡張機能の読み込み

1. Chromeを開き、chrome://extensions/ に移動します。
2. 「開発者モード」を有効にします（右上のスイッチを使用）。
3. 「パッケージ化されていない拡張機能を読み込む」をクリックし、このプロジェクト内の extension フォルダを選択します。
4. 拡張機能がインストールされました。任意のウェブページの右上に、「MCP拡張機能が読み込まれました」と表示される赤い小さなドットが表示されるはずです。

📚 ドキュメント

WebSocketプロトコル

拡張機能は、単純なJSON - RPCプロトコルを使用します。

リクエスト：

{
  "id": "一意のリクエスト識別子",
  "method": "mcp:resource.navigator.userAgent",
  "params": {}
}

レスポンス：

{
  "id": "一意のリクエスト識別子",
  "result": "Mozilla/5.0 ..."
}

📄 ライセンス

MIT