🐕

ChromeMCP設定とダウンロード実装ガイド

に公開
Chrome
Model Context Protocol
tech

概要

このドキュメントは、ChromeMCPの初期設定から実際のコンテンツダウンロード実装までの流れをまとめたものです。

1. 初期接続問題の発見と診断

問題の症状

  • MCPサーバーへの接続エラー: Failed to connect to MCP server
  • 原因: stdio（標準入出力）ベースの接続設定での互換性問題

エラーメッセージ

Error initializing MCP servers
Error: MCP server chrome-mcp-server connection error:
Error: write EPIPE

2. 設定ファイルの修正

修正前の設定（.roo/mcp.json）

{
  "mcpServers": {
    "chrome-mcp-server": {
      "type": "stdio",
      "command": "npm",
      "args": ["start"],
      "cwd": "..."
    }
  }
}

修正後の設定（HTTPベース接続）

{
  "mcpServers": {
    "chrome-mcp-server": {
      "type": "streamable-http",
      "url": "http://127.0.0.1:12306/mcp",
      "requestTimeoutMs": 300000,
      "responseTimeoutMs": 300000,
      "streamTimeoutMs": 300000
    }
  }
}

主な変更点

  • 接続タイプをstdioからstreamable-httpに変更
  • ローカルホストのポート12306でHTTP接続
  • 適切なタイムアウト設定（5分）を追加

3. ChromeMCPサーバーの動作確認

テスト手順

  1. サーバー接続の確認

    // chrome_get_windows_and_tabsツールで接続テスト

  2. 基本機能のテスト

    • ブラウザナビゲーション
    • スクリーンショット撮影
    • ページコンテンツの取得

確認結果

  • ✅ サーバー接続成功
  • ✅ ブラウザ操作機能の動作確認
  • ✅ セマンティックエンジン（multilingual-e5-small）の確認

4. ダウンロード機能の実装

実装の流れ

4.1 ダウンロードディレクトリの準備

mkdir -p downloads/target_content

4.2 ページアクセスとコンテンツ取得

  1. ChromeMCPを使用して対象ページにナビゲート
  2. ページの完全読み込みを待機（3秒）
  3. HTMLコンテンツを取得

4.3 動画要素の検出とダウンロード

<!-- 検出された動画要素の例 -->
<video src="https://example.com/video.mp4" ...>

4.4 ダウンロード実行

curl -L -o "downloads/target_content/filename.mp4" \
  "https://example.com/video.mp4" \
  -H "User-Agent: Mozilla/5.0..." \
  -H "Referer: https://example.com/"

重要なポイント

  • 適切なHTTPヘッダーの設定（User-Agent、Referer）
  • ChromeMCPによるクッキー認証の自動処理
  • ファイル名の日本語対応

5. 実装結果

成功した実装

  • ✅ ChromeMCPサーバーの安定接続
  • ✅ 認証が必要なサイトへのアクセス
  • ✅ 動画コンテンツの検出とダウンロード
  • ✅ ファイルの正常保存（1.7MB）

技術的な利点

  1. クッキー認証の自動処理: ChromeMCPが既存のブラウザセッションを利用
  2. 柔軟な接続方式: HTTPベース接続により安定性向上
  3. エラーハンドリング: 適切なタイムアウト設定による堅牢性

6. トラブルシューティング

よくある問題と解決策

接続エラーの場合

  1. ChromeMCPサーバーが起動しているか確認
  2. ポート12306が使用可能か確認
  3. .roo/mcp.jsonの設定を再確認

ダウンロードが失敗する場合

  1. ネットワーク接続を確認
  2. 対象サイトのアクセス制限を確認
  3. HTTPヘッダーの設定を見直す

まとめ

ChromeMCPの設定変更（stdio→HTTP）により、安定した接続とコンテンツダウンロードが実現できました。この実装は、認証が必要なWebサイトからのコンテンツ取得において特に有効です。

今後の展望

  • 複数ページの一括処理
  • HTMLページの完全保存（画像・CSS込み）
  • エラーリトライ機能の実装

Discussion