MCP Webブラウザサーバー

Playwright を搭載した Model Context Protocol (MCP) 用の高度な Web ブラウジング サーバーで、柔軟で安全な API を通じてヘッドレス ブラウザー インタラクションが可能になります。

🌐 特徴

• ヘッドレスWebブラウジング：SSL証明書の検証をバイパスして任意のWebサイトに移動する

• フルページコンテンツ抽出: 動的に読み込まれたJavaScriptを含む完全なHTMLコンテンツを取得します。

• マルチタブサポート: 複数のブラウザタブを作成、管理、切り替え

• 高度なWebインタラクションツール:

  • テキストコンテンツを抽出する

  • ページ要素をクリック

  • フォームフィールドにテキストを入力する

  • スクリーンショットをキャプチャする

  • フィルタリング機能を使用してページリンクを抽出します

  • ページを任意の方向にスクロールします

  • ページでJavaScriptを実行する

  • ページを更新

  • ナビゲーションが完了するまでお待ちください

• リソース管理: 非アクティブ後の未使用リソースの自動クリーンアップ

• 拡張ページ情報: 現在のページに関する詳細なメタデータを取得します

Related MCP server: Cloudflare Playwright MCP

🚀 クイックスタート

前提条件

• Python 3.10以上

• MCP SDK

• 劇作家

インストール

# Install MCP and Playwright
pip install mcp playwright

# Install browser dependencies
playwright install

Claudeデスクトップの設定

claude_desktop_config.jsonに追加します:

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

💡 使用例

基本的なウェブナビゲーション

# 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")

ウェブインタラクション

# 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バイパス制御

• クッキー盗難防止

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

よくある問題

• SSL証明書エラー: 自動的にバイパスされます

• ページの読み込みが遅い: browse_to()メソッドのタイムアウトを調整する

• 要素が見つかりません: セレクターを慎重に確認してください

• ブラウザのリソース使用状況: 非アクティブ期間後の自動クリーンアップ

ログ記録

すべての重要なイベントは詳細な情報とともに記録され、デバッグが容易になります。

📋 ツールパラメータ

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

• url : 移動するウェブサイト

• 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ライセンス

🔗 関連プロジェクト

• モデルコンテキストプロトコル

• 劇作家

• クロードデスクトップ

💬 サポート

問題や質問については、GitHub で問題を開いてください。

Maintenance

Resources

• GitHub Repository
Need Help?
• Reddit Discussion
Related Servers

Tools

• browse_toA
• click_elementC
• extract_text_contentA
• get_page_linksB
• get_page_screenshotsA
• input_textB