chrome-browser

Chrome ブラウザー自動化

インストール

スタンドアロンスクリプト：ダウンロードは不要です。このスキルは .claude/tools/chrome-browser/chrome-browser.cjs を呼び出します（Node.js v18+ が必要です）。

MCP 統合（完全な自動化向け）：

• Chrome DevTools MCP：通常は環境にバンドルされています。Chrome/Chromium がインストールされていることを確認してください（google.com/chrome）。
• Claude-in-Chrome：Claude-in-Chrome 拡張機能をインストールし、必要に応じて --chrome を指定して実行します。

チートシートとベストプラクティス

テスト：実装ではなく、ユーザーに見える動作をテストします。テストは分離し（専用のストレージ／Cookieを使用）、ログインやセットアップには前後のフックを使用します。稼働中のサービスに依存せず、サードパーティのネットワークをモックします。

DevTools Recorder：Recorder パネルでフローを記録し、JSON またはテストスクリプト（Puppeteer、Nightwatch）としてエクスポートします。CI では Puppeteer Replay で再生します。ユーザーフローのパフォーマンス測定に使用します。

ヒント：テスト／デバッグには Chrome DevTools MCP を優先します（常時利用可能）。認証済みセッションには Claude-in-Chrome を使用します（GIF、フォーム）。メモリの問題を避けるため、GIF のフレーム数を制限します（例：100）。構造の確認には take_snapshot、カスタムチェックには evaluate_script を使用します。

認定とトレーニング

公式認定資格はありません。 Chrome for Developers – DevTools。Frontend Masters / Udemy「Mastering Chrome DevTools」。**スキルデータ：**ユーザーに見える動作をテストすること、テストの分離、Recorder + Puppeteer Replay、パフォーマンスのトレース。

フックとワークフロー

**推奨フック：**任意：テスト失敗時にスクリーンショットを取得するポストテストフック。ブラウザテストで qa または frontend-pro にルーティングされる場合に使用します（chrome-browser を contextual に追加します：browser_testing など）。

**ワークフロー：**E2E／ブラウザのフローでは qa（contextual に追加）または frontend-pro と併用します。フロー：URL を開く → 操作する（クリック／入力）→ スナップショットを取得する、またはアサーションを行う。.claude/workflows/chrome-browser-skill-workflow.md を参照してください。

Chrome Browser Skill - 2 つの統合を使用した統合ブラウザー自動化：Chrome DevTools MCP（常時利用可能、パフォーマンスのトレース、ネットワークの検査）と Claude-in-Chrome 拡張機能（認証済みセッション、GIF の記録）。

2 つの統合 - 使い分け

機能	Chrome DevTools MCP	Claude-in-Chrome
ステータス	✅ 常時利用可能	⚠️ --chrome フラグが必要
有効化	自動（組み込み）	claude --chrome + 拡張機能
認証済みセッション	❌ 新規ブラウザー	✅ 保存済みのログインを使用
パフォーマンスのトレース	✅ Core Web Vitals 全項目	❌ 利用不可
ネットワークの検査	✅ ボディへのアクセスを含む詳細な検査	✅ 基本的な検査
デバイスのエミュレーション	✅ モバイル、位置情報、CPU	❌ 制限あり
GIF の記録	❌ なし	✅ あり（100 フレーム制限）
ページテキストの抽出	スナップショット経由	✅ 専用ツール
最適な用途	テスト、デバッグ、パフォーマンス	認証済みワークフロー、デモ

パフォーマンス制限（メモリ保護）

Chrome ブラウザー自動化では GIF 動画を記録できます。メモリの枯渇を防ぐには：

• GIF のフレーム数上限：100 フレーム（厳守）
• 各フレーム：5～20 KB（複雑さによって異なります）
• 100 フレーム × 平均 10 KB = 記録あたり約 1 MB
• ブラウザーセッションのメモリ効率を維持します

フレームの追跡：

• 1 フレームあたりの一般的な操作数：1～2（クリック、スクロール、入力）
• 50 フレーム = 25～50 操作
• 100 フレーム = 50～100 操作
• 長いワークフローでは、複数回に分けて記録します

判断ガイド

Need to test/debug a public site?     → Chrome DevTools MCP
Need performance analysis?            → Chrome DevTools MCP
Need to access authenticated apps?    → Claude-in-Chrome (--chrome)
Need to record a demo GIF?            → Claude-in-Chrome (--chrome)
Need to interact with Google Docs?    → Claude-in-Chrome (--chrome)
Need device/network emulation?        → Chrome DevTools MCP

**Chrome DevTools MCP:** - ページの移動とタブ管理 - 要素の操作（クリック、入力、ホバー、ドラッグ） - ページコンテキストでの JavaScript の実行 - コンソールメッセージの監視 - リクエスト本文にアクセスできるネットワークリクエストの調査 - Core Web Vitals を使用したパフォーマンスのトレース - デバイスのエミュレーション（モバイル、位置情報、CPU スロットリング） - スクリーンショットの撮影 - ダイアログの処理（alert、confirm、prompt）

Claude-in-Chrome:

• 認証が必要な Web アプリの操作（Google Docs、Gmail、Notion）
• GIF としてのセッション録画
• 自然言語による要素の検索
• 保存済みデータを使用したフォームの自動化
• ページテキストの抽出
• ショートカット／ワークフローの実行

Chrome DevTools MCP（常に利用可能）

セットアップは不要です。これらのツールはすぐに使用できます。

ステップ 1：ページの一覧表示と選択

// List all open pages
mcp__chrome - devtools__list_pages();

// Select a page to work with
mcp__chrome - devtools__select_page({ pageId: 1 });

// Create a new page
mcp__chrome - devtools__new_page({ url: 'https://example.com' });

ステップ 2：移動と操作

// Navigate to URL
mcp__chrome - devtools__navigate_page({ url: 'https://example.com' });

// Take accessibility snapshot (get element UIDs)
mcp__chrome - devtools__take_snapshot();

// Click element by UID from snapshot
mcp__chrome - devtools__click({ uid: 'ref_123' });

// Fill form field
mcp__chrome - devtools__fill({ uid: 'ref_456', value: '[email protected]' });

// Fill entire form
mcp__chrome -
  devtools__fill_form({
    elements: [
      { uid: 'ref_456', value: '[email protected]' },
      { uid: 'ref_789', value: 'password123' },
    ],
  });

ステップ 3：デバッグと調査

// Read console messages
mcp__chrome - devtools__list_console_messages({ types: ['error', 'warn'] });

// Get specific console message details
mcp__chrome - devtools__get_console_message({ msgid: 1 });

// List network requests
mcp__chrome - devtools__list_network_requests({ resourceTypes: ['xhr', 'fetch'] });

// Get request/response details
mcp__chrome - devtools__get_network_request({ reqid: 1 });

// Execute JavaScript
mcp__chrome -
  devtools__evaluate_script({
    function: '() => document.title',
  });

ステップ 4：パフォーマンス分析

// Start performance trace (with page reload)
mcp__chrome - devtools__performance_start_trace({ reload: true, autoStop: true });

// Or manual stop
mcp__chrome - devtools__performance_start_trace({ reload: true, autoStop: false });
// ... interact with page ...
mcp__chrome - devtools__performance_stop_trace();

// Analyze specific insight
mcp__chrome -
  devtools__performance_analyze_insight({
    insightSetId: 'navigation-1',
    insightName: 'LCPBreakdown',
  });

ステップ 5：デバイスのエミュレーション

// Emulate mobile device
mcp__chrome -
  devtools__emulate({
    viewport: {
      width: 375,
      height: 667,
      deviceScaleFactor: 2,
      isMobile: true,
      hasTouch: true,
    },
    userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X)...',
  });

// Emulate slow network
mcp__chrome - devtools__emulate({ networkConditions: 'Slow 3G' });

// Emulate geolocation
mcp__chrome -
  devtools__emulate({
    geolocation: { latitude: 37.7749, longitude: -122.4194 },
  });

---

Claude-in-Chrome（セットアップが必要）

前提条件

1. Chrome ウェブストアからClaude-in-Chrome 拡張機能をインストールします（v1.0.36 以降）。
2. フラグを指定して Claude を起動します：claude --chrome
3. Chrome が表示されている必要があります（ヘッドレスモードは使用できません）。
4. 有料の Claude プランが必要です（Pro、Team、または Enterprise）。

ステップ 1：タブのコンテキストを取得

// ALWAYS call first to get available tabs
mcp__claude-in-chrome__tabs_context_mcp({ createIfEmpty: true })

// Create a new tab for this conversation
mcp__claude-in-chrome__tabs_create_mcp()

ステップ 2：移動して読み取る

// Navigate to URL
mcp__claude-in-chrome__navigate({ url: "https://docs.google.com", tabId: 123 })

// Read page structure (accessibility tree)
mcp__claude-in-chrome__read_page({ tabId: 123 })

// Find elements by natural language
mcp__claude-in-chrome__find({ query: "login button", tabId: 123 })

// Extract page text
mcp__claude-in-chrome__get_page_text({ tabId: 123 })

ステップ 3：操作

// Click, type, screenshot via computer tool
mcp__claude-in-chrome__computer({
  action: "left_click",
  coordinate: [100, 200],
  tabId: 123
})

mcp__claude-in-chrome__computer({
  action: "type",
  text: "Hello world",
  tabId: 123
})

mcp__claude-in-chrome__computer({
  action: "screenshot",
  tabId: 123
})

// Fill form by element reference
mcp__claude-in-chrome__form_input({
  ref: "ref_1",
  value: "[email protected]",
  tabId: 123
})

ステップ 4：GIF デモを録画

// Start recording
mcp__claude-in-chrome__gif_creator({ action: "start_recording", tabId: 123 })

// Take screenshot to capture initial state
mcp__claude-in-chrome__computer({ action: "screenshot", tabId: 123 })

// ... perform actions ...

// Take final screenshot
mcp__claude-in-chrome__computer({ action: "screenshot", tabId: 123 })

// Stop and export
mcp__claude-in-chrome__gif_creator({ action: "stop_recording", tabId: 123 })
mcp__claude-in-chrome__gif_creator({
  action: "export",
  download: true,
  filename: "demo.gif",
  tabId: 123
})

録画のベストプラクティス

✓ GOOD なパターン：

• ログインのフロー：15～20 フレーム（5～10 アクション）
• フォームへの入力：10～15 フレーム（5～8 アクション）
• ナビゲーションのデモ：20～30 フレーム（10～15 アクション）
• ワークフロー全体：各 30～50 フレームの録画を 2～3 件

✗ BAD なパターン：

• 200 フレームを超える単一の録画
• 読み込みを待つ（毎秒 10 以上の空フレームが追加されます）
• 連続したスクロール（すぐに 100 フレーム以上に達することがあります）
• 複数の録画を同時に行う

100 フレームに達した場合：

1. 録画を停止します
2. 現在の GIF をエクスポートします
3. 次のパート用に新しい録画を開始します
4. ドキュメント内で録画同士をリンクします

タイムアウトの管理

• デフォルトのタイムアウト：録画 1 件あたり 30 秒
• 録画が 100 フレームを超える場合：30 秒の録画を複数回行います
• 読み込みが遅い場合は待たないでください（代わりにスクリーンショットを撮影します）
• アクションは素早く行います（待ち時間を最小限にします）

</execution_process>

<best_practices>

Chrome DevTools MCP

1. クリックや入力の前に、必ず最初にスナップショットを取得して、要素 UID を確認します
2. アクションで includeSnapshot: true を使用して、更新後の状態を取得します
3. ノイズを避けるため、resourceTypes でネットワークリクエストをフィルターします
4. 後で分析できるよう、filePath パラメーターを使ってトレースをファイルに保存します

Claude-in-Chrome

1. 有効なタブ ID を取得するため、最初にtabs_context_mcp を呼び出します
2. 既存のタブを再利用するのではなく、新しいタブを作成します
3. ページの構造を把握するため、find の前にread_page を使用します
4. 冗長な出力を避けるため、パターンでコンソールをフィルターします
5. すべてのイベントをブロックするため、モーダルダイアログは手動で閉じます

全般

1. 公開サイトでは Chrome DevTools MCP を優先します（常に利用可能です）
2. Claude-in-Chrome は認証が必要な場合にのみ使用します
3. alert／confirm／prompt を呼び出さないでください（ブラウザーのイベントがブロックされます）

</best_practices>

**ログインのフローをテスト（Chrome DevTools MCP）**：

// Create page and navigate
mcp__chrome - devtools__new_page({ url: 'https://example.com/login' });

// Take snapshot to get element UIDs
mcp__chrome - devtools__take_snapshot();

// Fill login form
mcp__chrome -
  devtools__fill_form({
    elements: [
      { uid: 'email_field', value: '[email protected]' },
      { uid: 'password_field', value: 'testpass123' },
    ],
  });

// Click submit
mcp__chrome - devtools__click({ uid: 'submit_button' });

// Check for errors
mcp__chrome - devtools__list_console_messages({ types: ['error'] });

</usage_example>

<usage_example> パフォーマンス監査（Chrome DevTools MCP）：

// Navigate to page
mcp__chrome - devtools__navigate_page({ url: 'https://example.com' });

// Run performance trace with reload
mcp__chrome -
  devtools__performance_start_trace({
    reload: true,
    autoStop: true,
    filePath: 'trace.json.gz',
  });

// Analyze LCP breakdown
mcp__chrome -
  devtools__performance_analyze_insight({
    insightSetId: 'navigation-1',
    insightName: 'LCPBreakdown',
  });

</usage_example>

<usage_example> Google Docs の編集（Claude-in-Chrome）：

// Get tab context
mcp__claude-in-chrome__tabs_context_mcp({ createIfEmpty: true })

// Navigate to Google Docs (uses your login)
mcp__claude-in-chrome__navigate({
  url: "https://docs.google.com/document/d/YOUR_DOC_ID",
  tabId: 123
})

// Read page to find elements
mcp__claude-in-chrome__read_page({ tabId: 123 })

// Click in document and type
mcp__claude-in-chrome__computer({
  action: "left_click",
  ref: "document_body",
  tabId: 123
})

mcp__claude-in-chrome__computer({
  action: "type",
  text: "Meeting notes for today...",
  tabId: 123
})

</usage_example>

<usage_example> デモ GIF を録画（Claude-in-Chrome）：

// Start recording
mcp__claude-in-chrome__gif_creator({ action: "start_recording", tabId: 123 })

// Initial screenshot
mcp__claude-in-chrome__computer({ action: "screenshot", tabId: 123 })

// Navigate
mcp__claude-in-chrome__navigate({ url: "https://example.com/product", tabId: 123 })
mcp__claude-in-chrome__computer({ action: "screenshot", tabId: 123 })

// Click add to cart
mcp__claude-in-chrome__computer({ action: "left_click", ref: "add_to_cart", tabId: 123 })
mcp__claude-in-chrome__computer({ action: "screenshot", tabId: 123 })

// Stop and export
mcp__claude-in-chrome__gif_creator({ action: "stop_recording", tabId: 123 })
mcp__claude-in-chrome__gif_creator({
  action: "export",
  download: true,
  filename: "add-to-cart-flow.gif",
  options: { showClickIndicators: true, showProgressBar: true },
  tabId: 123
})

</usage_example>

利用可能なツール

Chrome DevTools MCP（常に利用可能）

ツール	説明
mcp__chrome-devtools__list_pages	すべてのブラウザーページを一覧表示
mcp__chrome-devtools__select_page	操作するページを選択
mcp__chrome-devtools__new_page	URL を指定して新しいページを作成
mcp__chrome-devtools__close_page	ページを閉じる
mcp__chrome-devtools__navigate_page	ページを移動、再読み込み、戻る／進む
mcp__chrome-devtools__take_snapshot	UID 付きのアクセシビリティツリーを取得
mcp__chrome-devtools__take_screenshot	ページ／要素のスクリーンショットを撮影
mcp__chrome-devtools__click	UID で要素をクリック
mcp__chrome-devtools__fill	UID で入力欄／選択欄に入力
mcp__chrome-devtools__fill_form	複数のフォーム要素に入力
mcp__chrome-devtools__hover	要素にカーソルを合わせる
mcp__chrome-devtools__drag	要素を別の要素へドラッグ
mcp__chrome-devtools__press_key	キーまたはキーの組み合わせを押す
mcp__chrome-devtools__evaluate_script	JavaScript を実行
mcp__chrome-devtools__handle_dialog	ダイアログを承認／閉じる
mcp__chrome-devtools__upload_file	入力欄からファイルをアップロード
mcp__chrome-devtools__wait_for	テキストが表示されるまで待機
mcp__chrome-devtools__resize_page	ブラウザーウィンドウのサイズを変更
mcp__chrome-devtools__emulate	デバイス／ネットワーク／位置情報をエミュレート
mcp__chrome-devtools__list_console_messages	コンソール出力を一覧表示
mcp__chrome-devtools__get_console_message	メッセージの詳細を取得
mcp__chrome-devtools__list_network_requests	ネットワークリクエストを一覧表示
mcp__chrome-devtools__get_network_request	リクエスト／レスポンスの詳細を取得
mcp__chrome-devtools__performance_start_trace	パフォーマンス記録を開始
mcp__chrome-devtools__performance_stop_trace	パフォーマンス記録を停止
mcp__chrome-devtools__performance_analyze_insight	パフォーマンスの分析情報を分析

Claude-in-Chrome（--chrome フラグが必要です）

ツール	説明
mcp__claude-in-chrome__tabs_context_mcp	タブのコンテキストを取得します（最初に呼び出してください！）
mcp__claude-in-chrome__tabs_create_mcp	新しいタブを作成します
mcp__claude-in-chrome__navigate	URL に移動します
mcp__claude-in-chrome__read_page	アクセシビリティツリーを取得します
mcp__claude-in-chrome__find	説明をもとに要素を検索します
mcp__claude-in-chrome__get_page_text	ページのテキストを抽出します
mcp__claude-in-chrome__computer	クリック、入力、スクリーンショットの撮影、スクロールを行います
mcp__claude-in-chrome__form_input	フォームのフィールドに入力します
mcp__claude-in-chrome__fill_form	複数のフィールドに入力します
mcp__claude-in-chrome__javascript_tool	JavaScript を実行します
mcp__claude-in-chrome__read_console_messages	コンソールログを読み取ります
mcp__claude-in-chrome__read_network_requests	ネットワークリクエストを読み取ります
mcp__claude-in-chrome__resize_window	ブラウザーウィンドウのサイズを変更します
mcp__claude-in-chrome__upload_image	要素に画像をアップロードします
mcp__claude-in-chrome__gif_creator	GIF を記録／エクスポートします
mcp__claude-in-chrome__shortcuts_list	利用可能なショートカットを一覧表示します
mcp__claude-in-chrome__shortcuts_execute	ショートカットを実行します
mcp__claude-in-chrome__update_plan	承認用の計画を提示します

エージェントとの統合

このスキルは次のエージェントに自動的に割り当てられます。

• developer - テスト、デバッグ、データ抽出
• qa - 自動テスト、フォーム検証、ユーザーフローの確認
• security-architect - セキュリティテスト、認証フロー
• devops-troubleshooter - 本番環境のデバッグ、モニタリング
• researcher - ウェブスクレイピング、データ抽出

関連するワークフロー

このスキルを効果的に使用する方法については、対応するワークフローを参照してください。

• ワークフローファイル：.claude/workflows/chrome-browser-skill-workflow.md
• 使用する場面：テスト、デバッグ、認証が必要なワークフロー、デモの記録でブラウザーの自動化が必要な場合
• 統合方法：
  • スラッシュコマンドによる呼び出し（/chrome-browser）
  • エージェントへのスキル割り当て（frontmatter 経由）
  • スクリプトの直接実行

2 つの統合オプション：

• Chrome DevTools MCP（常に利用可能） - 公開サイトのテスト、パフォーマンス分析、デバッグ向け
• Claude-in-Chrome（--chrome フラグが必要） - 認証が必要なアプリのワークフロー、GIF の記録向け

このワークフローでは、呼び出し方法、エージェントへの割り当て、メモリ統合パターンの例を紹介しています。

トラブルシューティング

Claude-in-Chrome「ブラウザー拡張機能が接続されていません」

症状：--chrome フラグを使用すると、拡張機能がインストールされているにもかかわらず、ツールから「Browser extension is not connected」エラーが返されます。

根本原因：Claude.app（デスクトップ）と Claude Code は、競合するネイティブメッセージングホストを登録します。両方がインストールされている場合、Chrome 拡張機能は最後に登録されたホストに接続するため、接続に失敗します。

診断：

1. Claude.app と Claude Code の両方がインストールされているか確認します
2. Windows の場合：%APPDATA%\Claude\ChromeNativeHost\com.anthropic.claude_browser_extension.json を確認します
3. macOS の場合：~/Library/Application Support/Claude/ChromeNativeHost/ を確認します

既知のバグ：GitHub の課題で報告されています。

• #15336 - Windows でネイティブメッセージングホストがインストールされない
• #14894 - macOS で拡張機能の再接続に失敗する
• #20790 - 拡張機能が Claude Code ではなく Claude.app に接続する

回避策（macOS）：

# Disable Claude.app's native host (keep file for restoration)
cd ~/Library/Application\ Support/Google/Chrome/NativeMessagingHosts/
mv com.anthropic.claude_browser_extension.json com.anthropic.claude_browser_extension.json.disabled

# Restart Chrome completely (quit and reopen)
# Then start Claude Code with --chrome flag

回避策（Windows）：十分に文書化されていません。次の方法が考えられます。

# Rename the config to disable Claude.app's registration
cd $env:APPDATA\Claude\ChromeNativeHost
ren com.anthropic.claude_browser_extension.json com.anthropic.claude_browser_extension.json.disabled

# Restart Chrome and try again

代替案：Chrome DevTools MCP を使用してください。拡張機能がなくても動作し、ほとんどのユースケースで同様の機能を提供します。

モーダルダイアログによるイベントのブロック

症状：alert／confirm／prompt を実行すると、すべてのブラウザツールが応答しなくなります。

原因：JavaScript のモーダルダイアログは、拡張機能との通信を含むすべてのブラウザイベントをブロックします。

対処法：ユーザーがブラウザーでダイアログを手動で閉じる必要があります。自動化スクリプトでダイアログを実行しないでください。

メモリープロトコル（必須）

開始前：

cat .claude/context/memory/learnings.md

完了後：

• 新しいパターン → .claude/context/memory/learnings.md
• 見つかった問題 → .claude/context/memory/issues.md
• 決定事項 → .claude/context/memory/decisions.md

中断されることを前提にしてください。コンテキストがリセットされる場合があります。メモリーに記録されていないことは、起きていないのと同じです。