MCP Browser Automation

MCP ブラウザー自動化

🌐 概要

Algonius Browser は、外部の AI システムにブラウザー自動化機能を提供するオープンソースの MCP（Model Context Protocol）サーバーです。MCP プロトコルを通じて包括的なブラウザー制御ツールを公開し、AI アシスタントやその他のツールがプログラムからウェブサイトを閲覧し、DOM 要素を操作し、ウェブコンテンツを抽出できるようにします。

🎯 主な機能

• MCP プロトコルとの統合：AI システムがブラウザー自動化を制御するための標準インターフェース
• Chrome 拡張機能：ブラウザーとのやり取りを処理するバックグラウンドサービスワーカー
• ネイティブメッセージング：Chrome 拡張機能と外部ツールをつなぐ Go ベースの MCP ホスト
• 包括的なツールセット：ブラウザー自動化ツール 5 個と MCP リソース 2 個
• 型安全性：構造化されたエラー処理を備えた、TypeScript による完全な実装
• テストスイート：すべての機能を対象とした包括的な統合テスト

🛠️ 利用可能な MCP ツール

ナビゲーションとタブ

• navigate_to：タイムアウトを設定して URL に移動
• manage_tabs：ブラウザータブの作成、終了、切り替え

DOM 操作

• get_dom_extra_elements：ページネーションとフィルタリングに対応した高度な DOM 要素の抽出
• click_element：CSS セレクターまたはテキスト照合を使用した DOM 要素のクリック
• set_value：入力フィールド、テキストエリア、フォーム要素への値の設定
• scroll_page：距離をカスタマイズしてページを上下にスクロール

📋 利用可能な MCP リソース

ブラウザー状態リソース

• browser://current/state：AI が扱いやすい Markdown 形式で現在のブラウザー状態をすべて表示

  • アクティブなタブの情報
  • URL、タイトル、ステータスを含むすべてのブラウザータブ
  • リソース通知によるリアルタイムの状態更新

• browser://dom/state：Markdown 形式で現在の DOM 状態の概要を表示

  • ページのメタデータ（URL、タイトル、スクロール位置）
  • 最初の 20 個のインタラクティブ要素
  • 「さらに利用可能」の表示を含む要素の合計数
  • 簡略化された DOM 構造
  • ページが変更されると自動更新

🚀 クイックスタート

1. Chrome 拡張機能をインストールする

Chrome ウェブストアから（推奨）：

1. Chrome ウェブストアのページにある「Chrome に追加」ボタンをクリックします
2. 確認画面が表示されたら、インストールを確定します
3. 拡張機能が自動的にインストールされ、使用可能になります

ソースから（開発用）：

# Clone and build
git clone https://github.com/algonius/algonius-browser.git
cd algonius-browser
pnpm install
pnpm build

# Load in Chrome
# 1. Open chrome://extensions/
# 2. Enable "Developer mode"
# 3. Click "Load unpacked"
# 4. Select the 'dist' folder

⚠️ 重要：Chrome 拡張機能を正常に動作させるには、MCP ホストのバックエンドサービスが必要です。インストールを完了するには、ステップ 2 に進んでください。

2. MCP ホストをインストールする

ワンクリックインストール（推奨）：

Linux/macOS：

curl -fsSL https://raw.githubusercontent.com/algonius/algonius-browser/master/install-mcp-host.sh | bash

Windows（PowerShell）：

iwr -useb https://raw.githubusercontent.com/algonius/algonius-browser/master/install-mcp-host.ps1 | iex

手動インストール：

# Download latest release
wget https://github.com/algonius/algonius-browser/releases/latest/download/mcp-host-linux-x86_64.tar.gz

# Extract and install
tar -xzf mcp-host-linux-x86_64.tar.gz
cd mcp-host-linux-x86_64
./install.sh

3. インストールを確認する

# Test the MCP host installation
mcp-host-go --version

# The MCP host will be automatically started when needed by the Chrome extension
# You should see the extension icon in your Chrome toolbar

✅ 成功：両方のコンポーネントがインストールされました！ブラウザー自動化が要求されると、Chrome 拡張機能は MCP ホストと自動的に通信します。

🔧 統合例

AI アシスタントでの使用

インストール後、AI システムは MCP プロトコルを通じてブラウザー自動化ツールとリソースを使用できます。

ツールの使用：

{
  "method": "tools/call",
  "params": {
    "name": "navigate_to",
    "arguments": {
      "url": "https://example.com",
      "timeout": 30000
    }
  }
}

リソースへのアクセス：

{
  "method": "resources/read",
  "params": {
    "uri": "browser://current/state"
  }
}

一般的なワークフロー

ウェブスクレイピング：

1. navigate_to → 対象サイトに移動します
2. browser://dom/state を読み取る → ページの概要を取得します
3. get_dom_extra_elements → ページネーションを使用して特定の要素を取得します
4. click_element → 要素を操作します
5. browser://dom/state を読み取る → 更新されたコンテンツを抽出します

フォームの自動化：

1. navigate_to → フォームページに移動します
2. browser://dom/state を読み取る → フォーム要素を特定します
3. set_value → フォームフィールドに入力します
4. click_element → フォームを送信します
5. browser://current/state を読み取る → 完了を確認します

複数タブの管理：

1. browser://current/state を読み取る → 現在のタブを確認します
2. manage_tabs → タブを作成／切り替えます
3. navigate_to → 各タブでコンテンツを読み込みます
4. browser://current/state を読み取る → すべてのタブの状態を監視します

スクロールによるページナビゲーション：

1. navigate_to → 対象ページに移動します
2. browser://dom/state を読み取る → 初期ページの状態を取得します
3. scroll_page → スクロールしてコンテンツをさらに読み込みます
4. get_dom_extra_elements → 新たに読み込まれた要素を抽出します

🏗️ アーキテクチャ

External AI System
       ↓ (MCP Protocol)
   MCP Host (Go)
       ↓ (Native Messaging)
Chrome Extension
       ↓ (Chrome APIs)
    Browser Tabs

コンポーネント

• MCP ホスト：MCP プロトコルを実装する Go ベースのネイティブメッセージングホスト
• Chrome 拡張機能：ツールハンドラーを備えたバックグラウンドサービスワーカー
• コンテンツスクリプト：DOM の操作およびデータ抽出ユーティリティ
• 統合テスト：すべてのツールを対象とする包括的なテストスイート

🧪 開発

ソースからビルドする

前提条件：

• Node.js 22.12.0+
• pnpm 9.15.1+
• Go 1.21+（MCP ホスト用）

拡張機能をビルドする：

pnpm install
pnpm build

MCP ホストをビルドする：

cd mcp-host-go
make build

テストを実行する：

# Extension tests
pnpm test

# MCP host tests  
cd mcp-host-go
make test

開発モード

# Extension development
pnpm dev

# MCP host development
cd mcp-host-go
make dev

📊 対応プラットフォーム

MCP ホスト：

• Linux x86_64
• macOS Intel（x86_64）および Apple Silicon（arm64）
• Windows x86_64

Chrome 拡張機能：

• Chrome／Chromium 88+
• Microsoft Edge 88+

📚 ドキュメント

詳細なドキュメントは docs/ ディレクトリにあります：

• MCP ホストの統合
• 要素クリックツール
• 値設定ツール
• ナビゲーションのタイムアウト
• 統合テスト

🤝 貢献

貢献を歓迎します！ガイドラインについては、CONTRIBUTING.mdをご確認ください。

貢献方法：

• バグや機能リクエストを報告する
• 改善のためのプルリクエストを送信する
• 統合テストを追加する
• ドキュメントを改善する
• 使用例を共有する

🔒 セキュリティ

セキュリティの脆弱性については、公開の課題を作成するのではなく、GitHub セキュリティアドバイザリを作成してください。

💬 コミュニティ

• Discord - 開発者やユーザーと交流できます
• GitHub Discussions - アイデアを共有したり、質問したりできます

📄 ライセンス

このプロジェクトは Apache License 2.0 のライセンスに基づいています。詳細については、LICENSEファイルをご覧ください。

👏 謝辞

以下の優れたオープンソースプロジェクトを使用して構築されています：

• Chrome Extension Boilerplate
• Model Context Protocol

---

Algonius Browser チームが ❤️ を込めて開発しました

このプロジェクトがより優れたブラウザー自動化の構築に役立ったら、スター 🌟 をお願いします！