Automation★ 12.5k

Puppeteer ブラウザ自動化とウェブスクレイピング

MCPを通じてウェブブラウザを完全に制御します。ボット対策を回避し、複雑なSPAをスクレイピングし、動的JavaScriptを実行し、スクリーンショットを撮り、自然言語でシームレスにブラウザのワークフローを自動化します。

解決される課題と中核的価値

従来のウェブスクレイピングスクリプトは、DOM構造が変わったりサイトがCAPTCHAを導入すると頻繁に壊れます。Puppeteer Browser Automation MCPは、OpenClawにヘッドレス（またはヘッドフル）なChromeブラウザを与え、人間と全く同じようにページを「見て」「クリック」させることで、この脆弱性を排除します。

  • 動的SPAレンダリング：API呼び出しを通じてコンテンツが非同期に読み込まれるNext.js、React、Vueサイトでも完璧に機能します。
  • 視覚的なナビゲーション：CSSセレクターや視覚的な座標を観察することで、エージェントは複雑なログインフロー、メニュー、ポップアップを操作できます。
  • アクションの再現：ポータルからの請求書のダウンロードや在庫の確認など、日常的な単調なタスクを、PythonやNode.jsのロジックを一行も書かずに自動化します。

内部アーキテクチャ

このスキルは、モデルコンテキストプロトコル（MCP）とGoogleのPuppeteerライブラリを橋渡しします。「Kayakで東京行きの最も安いフライトを見つけて」とエージェントに指示すると、動的にPuppeteerコマンド（例：page.goto()、page.click()、page.type()）が生成され、ブラウザのDOM状態とスクリーンショットがエージェントのコンテキストウィンドウにストリーミングされます。これにより、閉ループの視覚的推論サイクルが作成されます。

試すべき魔法のプロンプトトップ5

  1. 「Twitterを開いて『$NVDA』を検索し、トップ3の投稿のスクリーンショットを撮って、市場心理を要約して。」
  2. 「AWSコンソールに移動し、ローカルボールトの認証情報を使ってログインし、先月の請求額PDFをダウンロードして。」
  3. 「booking.comに行き、今週末の150ドル以下のパリのトップ10ホテルをスクレイピングして、結果をマークダウンの表形式にまとめて。」
  4. 「履歴書のデータを使ってこの巨大なGoogleフォームのリンクに記入し、すべての複数ページの『次へ』ボタンを処理して。」
  5. 「この不動産検索ページを5分ごとに監視して。予算以下の新しい物件が出たら、警告音を鳴らして。」

サーバー設定例（config.json）

このスキルを有効にするには、OpenClawまたはAnthropic Desktopのconfig.jsonに以下の設定を注入します：

"mcpServers": {
  "puppeteer": {
    "command": "npx",
    "args": [
      "-y",
      "@modelcontextprotocol/server-puppeteer",
      "--headless=false",
      "--window-size=1920,1080"
    ]
  }
}

プロのヒント：--headless=falseに設定すると、画面上で自動化が展開される様子を見ることができ、デバッグやセキュリティ監査に非常に役立ちます！

トラブルシューティングのメモ

  • 問題：要素が見つからない。ボットが立ち往生した場合は、「スクリーンショットを撮って現在のビューポートのレイアウトを理解して」と指示してください。
  • 問題：Chromiumのダウンロードの失敗。PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true npm installを実行し、引数を介してローカルのChromeバイナリを手動で指定してください。

セキュリティと権限

高リスクの警告：ブラウザMCPはローカルネットワークへの完全なアクセス権を持っており、悪意のあるリンクをクリックしたりセッションクッキーを漏洩させたりする可能性があります。非常に機密性の高い金融口座において、ヒューマン・イン・ザ・ループの承認ステップなしに、このプラグインを自律型のマルチエージェントシステムと組み合わせて使用することは絶対に避けてください。

$ cd ../* END_OF_FILE */