MCPMonkey

MCPMonkey

MCPMonkey は Violentmonkey のフォークで、強力なユーザースクリプト機能を拡張し、Model Context Protocol（MCP）サーバーをサポートします。このプロジェクトは、AI 言語モデルとブラウザー操作の間のギャップを埋めることを目指しています。

MCPMonkey について

MCPMonkey は Violentmonkey のブラウザー拡張機能を強化し、Model Context Protocol（MCP） サーバーを管理して使用するための使いやすいインターフェースを提供します。これにより、Cursor で使用されるもののような AI 言語モデルが、意味のある方法でブラウザーを操作できるようになります。

現在の機能

MCPMonkey は現在、次の主要な機能を実装しています。

• タブ管理（browserAction ツール）：

  • 開いているすべてのタブの情報を取得
  • 新しいタブを作成
  • タブを閉じる
  • タブをアクティブ化（フォーカス）
  • タブを複製

• ページスタイルの抽出（getPageStyles ツール）：

  • AI による分析のために、ウェブページからスタイル情報を抽出
  • スタイルに関する構造化された JSON データを返す
  • グローバルスタイル、計算済みスタイル、配色、タイポグラフィを含む

• ユーザースクリプトのサポート：既存のユーザースクリプトとの完全な互換性（Violentmonkey から継承）

今後予定されている機能

今後の開発では、次の機能を予定しています。

• MCP サーバー管理：複数の MCP サーバーをブラウザーから直接インストールして管理
• ブラウザーアクセスの強化：AI ツールが次の情報を操作できるようにする：
  • 閲覧履歴
  • ブックマーク
  • 開発者コンソールのログ
  • その他のインストール済み拡張機能
• 権限の制御：各 MCP サーバーがアクセスできるリソースを細かく制御
• コミュニティハブ：MCP サーバーやスクリプトを共有、発見

Cursor MCP との連携

MCPMonkey は、次の順序でインストールする必要がある 2 つの主要コンポーネントで構成されています。

1. MCP サーバー
2. ブラウザー拡張機能

1. MCP サーバーを Cursor に追加する

公開済みの NPM パッケージを使用する場合：

• Cursor で Settings > Features > MCP Servers に移動します
• + Add New MCP Server ボタンをクリックします
• 次の接続設定を行います：
  • 名前：mcpmonkey-server
  • 種類：command
  • コマンド：npx mcpmonkey-server

自分でビルドする場合：

# Navigate to the server directory
cd mcpmonkey-server

# Install dependencies
yarn

# Build the server
yarn build

# Run the server
node build/index.js

• Cursor での設定：
  • 名前：mcpmonkey-server
  • 種類：command
  • コマンド：node /absolute/path/to/mcpmonkey-server/build/index.js

Cursor は MCP 通信に stdio トランスポートを使用して MCPMonkey サーバーに接続します。設定が完了すると、Composer の Cursor エージェントが、関連する場合に利用可能な MCP ツールを自動的に使用します。

注：Cursor 0.46 以降では、MCP 設定は専用のタブにあり、.cursor/mcp.json ファイルもサポートされています。詳細はこちら。

2. ブラウザー拡張機能のインストール

Firefox へのインストール

1. 以下の開発手順に従ってプロジェクトをビルドします
2. Firefox を開き、about:debugging に移動します
3. 左側のサイドバーで「This Firefox」をクリックします
4. 「Load Temporary Add-on...」をクリックします
5. MCPMonkey のビルドディレクトリにある dist フォルダーに移動します
6. dist フォルダー内の任意のファイルを選択して、拡張機能を読み込みます

注：一時インストールのため、Firefox を再起動するたびに拡張機能を再読み込みする必要があります。

.xpi ファイルは近日中に提供する予定です。

MCPMonkeyのブラウザツール

MCP ツールの実装により、Cursorなどで使用されるAI言語モデルは、強力なブラウザ操作機能を利用できます。

• browserAction Tool：

  • 開いているすべてのタブの情報を取得
  • 新しいタブを作成
  • タブを閉じる
  • タブをアクティブにする（フォーカスする）
  • タブを複製する

• getPageStyles Tool：

  • ページのスタイル情報（グローバルスタイル、計算済みスタイル、カラースキーム、タイポグラフィ）を抽出
  • AIによる分析用に構造化されたJSONデータを返す
  • Webページとの通信にコンテンツスクリプトブリッジを使用

これらのツールを使うと、ポート3025のWebSocket接続を介して、AIモデルがブラウジングセッションと有意義でコンテキストを考慮したやり取りを行えます。

開発とテストには、MCPインスペクターを使ってサーバーを実行できます。

# Run with MCP inspector for debugging
npx @modelcontextprotocol/inspector node build/index.js

サーバーはstdioとWebSocketの両方のインターフェースを実装しており、ブラウザー拡張機能との内部通信にはポート3025で動作するWebSocketサーバーを使用します。

ユースケース

• 開発者向け：

  • Cursorやその他のAIツールからブラウザーのリソースに直接アクセス
  • AI開発環境でコンソールログやデバッグ情報を確認
  • 特定の開発ニーズに合わせたカスタムMCPサーバーを作成

• ユーザー向け：

  • デスクトップチャットボットに、先週訪れたWebサイトを探してもらう
  • AIツールを使って、ソーシャルメディアのメッセージやメールの下書きを作成
  • 自然言語のコマンドでブラウザー操作を自動化

開発

拡張機能の開発

Node.jsとYarn v1.xをインストールしてください。
Node.jsのバージョンは、package.jsonの"node"キーと一致している必要があります。

# Install dependencies
$ yarn

# Watch and compile
$ yarn build

その後、'dist/'から拡張機能を読み込んでください。

技術的な詳細

現在、以下の技術コンポーネントを実装しています。

• WebSocket通信：拡張機能とサーバーは、ポート3025のWebSocketを介して内部通信します
• コンテンツスクリプトブリッジ：セキュアなメッセージングを通じてWebページのコンテンツとのやり取りを可能にします
• Zodスキーマ検証：実行時の型チェックにより、コンポーネント間のデータ整合性を確保します
• Stdioトランスポート：Cursorなどの外部MCPクライアントは、stdioトランスポート経由で接続します

クレジット

このプロジェクトは、MCPMonkeyの拡張機能の基盤となる優れたユーザースクリプトマネージャー、Violentmonkeyをベースにしています。素晴らしい活動をされているViolentmonkeyのチームと貢献者の皆様に感謝いたします。

コミュニティ

https://mcpmonkey.com - ドキュメントとMCPツールスクリプトはこちら

ライセンス

このプロジェクトはViolentmonkeyと同じ条件でライセンスされています。詳しくはLICENSEファイルをご覧ください。

将来的に有料機能を追加する可能性があります。