MCP Web Browser Server

MCP Web Browser Server

Model Context Protocol（MCP）向けの、Playwright を活用した高度な Web ブラウジングサーバーです。柔軟で安全な API を通じて、ヘッドレスブラウザの操作を可能にします。

🌐 機能

• ヘッドレス Web ブラウジング: SSL 証明書の検証をバイパスして、任意の Web サイトにアクセスできます
• ページ全体のコンテンツ抽出: 動的に読み込まれた JavaScript を含む、完全な HTML コンテンツを取得できます
• マルチタブ対応: 複数のブラウザタブを作成、管理、切り替えできます
• 高度な Web 操作ツール:
  • テキストコンテンツの抽出
  • ページ要素のクリック
  • フォームフィールドへのテキスト入力
  • スクリーンショットのキャプチャ
  • フィルタリング機能付きのページリンク抽出
  • 任意の方向へのページスクロール
  • ページ上での JavaScript 実行
  • ページの再読み込み
  • ナビゲーション完了の待機
• リソース管理: 非アクティブ状態が続いた未使用リソースを自動的にクリーンアップします
• 拡張されたページ情報: 現在のページに関する詳細なメタデータを取得できます

🚀 クイックスタート

前提条件

• Python 3.10+
• MCP SDK
• Playwright

インストール

# Install MCP and Playwright
pip install mcp playwright

# Install browser dependencies
playwright install

Claude Desktop の設定

claude_desktop_config.json に以下を追加します:

{
  "mcpServers": {
    "web-browser": {
      "command": "python",
      "args": [
        "/path/to/your/server.py"
      ]
    }
  }
}

💡 使用例

基本的な Web ナビゲーション

# Browse to a website
page_content = browse_to("https://example.com")

# Extract page text
text_content = extract_text_content()

# Extract text from a specific element
title_text = extract_text_content("h1.title")

Web 操作

# Navigate to a page
browse_to("https://example.com/login")

# Input text into a form
input_text("#username", "your_username")
input_text("#password", "your_password")

# Click a login button
click_element("#login-button")

スクリーンショットのキャプチャ

# Capture full page screenshot
full_page_screenshot = get_page_screenshots(full_page=True)

# Capture specific element screenshot
element_screenshot = get_page_screenshots(selector="#main-content")

リンクの抽出

# Get all links on the page
page_links = get_page_links()

# Get links matching a pattern
filtered_links = get_page_links(filter_pattern="contact")

マルチタブブラウジング

# Create a new tab
tab_id = create_new_tab("https://example.com")

# Create another tab
another_tab_id = create_new_tab("https://example.org")

# List all open tabs
tabs = list_tabs()

# Switch between tabs
switch_tab(tab_id)

# Close a tab
close_tab(another_tab_id)

高度な操作

# Scroll the page
scroll_page(direction="down", amount="page")

# Execute JavaScript on the page
result = execute_javascript("return document.title")

# Get detailed page information
page_info = get_page_info()

# Refresh the current page
refresh_page()

# Wait for navigation to complete
wait_for_navigation(timeout_ms=5000)

🛡️ セキュリティ機能

• SSL 証明書の検証バイパス
• 安全なブラウザコンテキスト管理
• カスタムユーザーエージェントの設定
• エラーハンドリングと包括的なログ記録
• 設定可能なタイムアウト設定
• CSP バイパスの制御
• Cookie 窃取からの保護

🔧 トラブルシューティング

よくある問題

• SSL 証明書エラー: 自動的にバイパスされます
• ページの読み込みが遅い: browse_to() メソッドでタイムアウトを調整してください
• 要素が見つからない: セレクターを慎重に確認してください
• ブラウザのリソース使用量: 非アクティブ期間後に自動クリーンアップされます

ログ記録

重要なイベントはすべて詳細な情報とともにログに記録されるため、デバッグが容易です。

📋 ツールパラメータ

browse_to(url: str, context: Optional[Any] = None)

• url: アクセスする Web サイト
• context: オプションのコンテキストオブジェクト（現在は未使用）

extract_text_content(selector: Optional[str] = None, context: Optional[Any] = None)

• selector: 特定のコンテンツを抽出するためのオプションの CSS セレクター
• context: オプションのコンテキストオブジェクト（現在は未使用）

click_element(selector: str, context: Optional[Any] = None)

• selector: クリックする要素の CSS セレクター
• context: オプションのコンテキストオブジェクト（現在は未使用）

get_page_screenshots(full_page: bool = False, selector: Optional[str] = None, context: Optional[Any] = None)

• full_page: ページ全体のスクリーンショットをキャプチャします
• selector: スクリーンショットを撮るオプションの要素
• context: オプションのコンテキストオブジェクト（現在は未使用）

get_page_links(filter_pattern: Optional[str] = None, context: Optional[Any] = None)

• filter_pattern: リンクをフィルタリングするためのオプションのテキストパターン
• context: オプションのコンテキストオブジェクト（現在は未使用）

input_text(selector: str, text: str, context: Optional[Any] = None)

• selector: 入力要素の CSS セレクター
• text: 入力するテキスト
• context: オプションのコンテキストオブジェクト（現在は未使用）

create_new_tab(url: Optional[str] = None, context: Optional[Any] = None)

• url: 新しいタブでアクセスするオプションの URL
• context: オプションのコンテキストオブジェクト（現在は未使用）

switch_tab(tab_id: str, context: Optional[Any] = None)

• tab_id: 切り替えるタブの ID
• context: オプションのコンテキストオブジェクト（現在は未使用）

list_tabs(context: Optional[Any] = None)

• context: オプションのコンテキストオブジェクト（現在は未使用）

close_tab(tab_id: Optional[str] = None, context: Optional[Any] = None)

• tab_id: 閉じるタブのオプションの ID（デフォルトは現在のタブ）
• context: オプションのコンテキストオブジェクト（現在は未使用）

refresh_page(context: Optional[Any] = None)

• context: オプションのコンテキストオブジェクト（現在は未使用）

get_page_info(context: Optional[Any] = None)

• context: オプションのコンテキストオブジェクト（現在は未使用）

scroll_page(direction: str = "down", amount: str = "page", context: Optional[Any] = None)

• direction: スクロールする方向（'up'、'down'、'left'、'right'）
• amount: スクロールする量（'page'、'half'、または数値）
• context: オプションのコンテキストオブジェクト（現在は未使用）

wait_for_navigation(timeout_ms: int = 10000, context: Optional[Any] = None)

• timeout_ms: 待機する最大時間（ミリ秒）
• context: オプションのコンテキストオブジェクト（現在は未使用）

execute_javascript(script: str, context: Optional[Any] = None)

• script: 実行する JavaScript コード
• context: オプションのコンテキストオブジェクト（現在は未使用）

🤝 コントリビューション

コントリビューションを歓迎します！お気軽にプルリクエストを送信してください。

開発環境のセットアップ

# Clone the repository
git clone https://github.com/random-robbie/mcp-web-browser.git

# Create virtual environment
python -m venv venv
source venv/bin/activate  # On Windows use `venv\Scripts\activate`

# Install dependencies
pip install -e .[dev]

📄 ライセンス

MIT ライセンス

🔗 関連プロジェクト

• Model Context Protocol
• Playwright
• Claude Desktop

💬 サポート

問題や質問については、GitHub で issue を作成してください。