claude-chrome

Claude in Chrome スキル

Claude で実際の Chrome ブラウザーを操作できます。この拡張機能は、認証済みのブラウザーセッションで動作するため、Gmail、Google Docs、Notion、CRM など、すでにログインしているサイトを Claude が操作できます。

統合方法

Chrome を操作する方法は 2 つあります。

1. Claude Code + Chrome 拡張機能 - claude --chrome によるターミナルベースのブラウザー操作
2. Chrome DevTools MCP - 26 個のブラウザー自動化ツールを提供する MCP サーバー

どちらの方法でも、すでにログイン済みの実際の Chrome を使用できるため、再認証は不要です。

---

オプション 1：Claude Code + Chrome 拡張機能

前提条件

• Google Chrome ブラウザー
• Chrome ウェブストアの Claude in Chrome 拡張機能（v1.0.36+）
• Claude Code CLI（v2.0.73+）
• 有料の Claude プラン（Pro、Team、Enterprise、または Max）

セットアップ

Claude Code を更新します。

claude update

Chrome を有効にして起動します。

claude --chrome

接続状態を確認します。

/chrome

Chrome をデフォルトで有効にします。

/chrome
# Select "Enabled by default"

ブラウザーの機能

ナビゲーションと操作：

• URL に移動する
• 要素（ボタン、リンク、フォームフィールド）をクリックする
• 入力欄にテキストを入力する
• ページをスクロールする
• タブを作成、管理する
• ウィンドウのサイズを変更する

情報の取得：

• ページのコンテンツと DOM の状態を読み取る
• コンソールログとエラーにアクセスする
• ネットワークリクエストを監視する
• ページから構造化データを抽出する

高度な機能：

• フォームに自動入力する
• ブラウザー操作を GIF として記録する
• ブラウザーとターミナルのコマンドを連携させる
• 複数のタブにまたがって作業する

プロンプトの例

基本的なナビゲーション

Go to github.com/anthropics and click on the "Code" tab

フォームのテスト

Open localhost:3000, try submitting the login form with invalid data,
and check if error messages appear correctly

コンソールのデバッグ

Open the dashboard page and check the console for any errors when
the page loads

データの抽出

Go to the product listings page and extract the name, price, and
availability for each item. Save as CSV.

認証が必要なワークフロー

Draft a project update based on our recent commits and add it to
my Google Doc at docs.google.com/document/d/abc123

フォームの自動化

I have contacts in contacts.csv. For each row, go to crm.example.com,
click "Add Contact", and fill in the name, email, and phone fields.

デモ GIF の記録

Record a GIF showing the checkout flow from adding an item to cart
through to the confirmation page

仕組み

1. 拡張機能は Chrome の Native Messaging API を使用してコマンドを受信します
2. Claude はタスク用に新しいタブを開きます（既存のタブは操作しません）
3. ブラウザーのログイン状態を使用するため、再認証は不要です
4. CAPTCHA、ログインプロンプト、モーダルダイアログが表示されると一時停止します（対応してから続行できます）

トラブルシューティング

拡張機能が検出されない場合：

claude --version  # Should be 2.0.73+

次に、/chrome を実行して「拡張機能を再接続」を選択します

ブラウザーが応答しない場合：

• 操作を妨げているモーダルダイアログ（alert、confirm、prompt）がないか確認します
• Claude に新しいタブを作成して再試行するよう依頼します
• Chrome 拡張機能を再起動します（chrome://extensions で無効にしてから、再度有効にします）

---

オプション 2：Chrome DevTools MCP

Model Context Protocol を使用する代替または補完的な方法です。

インストール

claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

または、MCP の設定に追加します。

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

利用可能なツール（全 26 個）

入力の自動化（8 個のツール）：

• click - 要素をクリックする
• drag - ドラッグ＆ドロップする
• fill - 入力フィールドに入力する
• fill_form - フォーム全体に入力する
• handle_dialog - アラート／確認／プロンプトを処理する
• hover - 要素にカーソルを合わせる
• press_key - キーボード入力を行う
• upload_file - ファイルをアップロードする

ナビゲーション（6 個のツール）：

• navigate_page - URL に移動する
• new_page - 新しいタブを作成する
• close_page - タブを閉じる
• list_pages - 開いているページを一覧表示する
• select_page - ページを切り替える
• wait_for - 要素または条件を待つ

デバッグ（5 個のツール）：

• take_screenshot - ページのスクリーンショットを撮る
• take_snapshot - DOM を取得する
• evaluate_script - JavaScript を実行する
• get_console_message - コンソールログを取得する
• list_console_messages - すべてのログを取得する

ネットワーク（2 個のツール）：

• list_network_requests - リクエストを一覧表示する
• get_network_request - リクエストの詳細を取得する

パフォーマンス（3 個のツール）：

• performance_start_trace - トレースを開始する
• performance_stop_trace - トレースを停止する
• performance_analyze_insight - 結果を分析する

エミュレーション（2 個のツール）：

• emulate - デバイスをエミュレートする
• resize_page - ビューポートのサイズを変更する

設定オプション

# Connect to running Chrome
npx chrome-devtools-mcp@latest --browser-url http://localhost:9222

# Headless mode
npx chrome-devtools-mcp@latest --headless

# Custom viewport
npx chrome-devtools-mcp@latest --viewport 1920x1080

# Use Chrome Canary
npx chrome-devtools-mcp@latest --channel canary

---

Claude in Chrome 拡張機能の機能

ワークフローのショートカット

再利用可能なショートカットを作成します（拡張機能で「/」を入力）：

ワークフローを記録する：

1. カーソルアイコンをクリックするか「/」を入力 →「ワークフローを記録」
2. Claude が確認している間に操作を行います
3. Claude が名前、説明、URL を含むショートカットを生成します

会話から保存する：

• 会話ヘッダーの「タスクに変換」をクリックします
• または、送信済みのプロンプトにカーソルを合わせて保存します

スケジュール済みタスク

ブラウザーの自動化を定期的に実行するよう設定します：

1. ショートカットの作成時に「スケジュール」を切り替えます
2. 頻度を設定します：毎日、毎週、毎月、毎年
3. 日付／時刻とモデルを選択します
4. Claude が通知とともに自動実行します

スケジュール済みタスクの例：

• 毎朝9時に受信トレイを整理する
• 毎週月曜日に競合他社を調査する
• 毎月、経費報告書を提出する

複数タブのワークフロー

Claude は、同じタブグループ内の複数のタブを確認して操作できます：

• 複数のタブから情報を参照する
• タブ間でデータをコピーする
• 複数のサイトにまたがる操作を連携させる

ワークフローの例

メール管理：

/inbox-cleanup
Archive emails from newsletters, star emails mentioning deadlines,
delete obvious spam

調査：

/competitor-scan
Check competitor blogs, pricing pages, and careers pages.
Summarize any changes since last week.

フォーム入力：

/vendor-application
Fill vendor application form using our company documents.
Pause before final submission for review.

会議の準備：

/stakeholder-map
Research LinkedIn profiles of meeting attendees.
Summarize their backgrounds and priorities.

---

ベストプラクティス

ブラウザー自動化を使用する場面

適している作業：

• フォーム入力とデータ入力
• ボタンのクリックとページ移動
• 認証が必要なページからのデータ抽出
• Web アプリケーションのテスト
• 事前定義されたワークフローの実行
• ログインが必要な作業

手動のほうが適している作業：

• ワンクリックで済む作業（手動のほうが速い）
• 主観的な判断
• 探索的な調査（代わりに Claude.ai のチャットを使用）

ヒント

1. 具体的に指示する - 曖昧な指示では、結果にばらつきが生じます
2. 検証を追加する - 長いリストの場合は、「すべての項目を完了したことを確認してください」と追加します
3. モーダルに対処する - アラートを手動で閉じてから、Claude に続行するよう伝えます
4. 新しいタブを使用する - タブが応答しなくなった場合は、新しいタブを開くよう依頼します
5. コンソール出力をフィルタリングする - すべてのログを要求するのではなく、パターンを指定します

セキュリティ

• サイト単位の権限で、Claude がアクセスできるサイトを制御します
• リスクの高い操作（公開、購入、データ共有）には確認が必要です
• 一部のサイトカテゴリはブロックされています（金融サービス、成人向けコンテンツ）
• 拡張機能の設定で権限を管理します

---

Clawdbot でよく使われるワークフロー

ローカル開発のテスト

"Open localhost:3000, test the new form validation, check console for errors,
and screenshot any issues you find"

認証が必要なデータの抽出

"Go to my Google Analytics, get this week's traffic summary,
and save it to a file"

コンテンツ管理

"Open my Notion workspace, find the Q4 planning doc,
and add a new section with today's meeting notes"

メールの下書き

"Open Gmail, find unread emails from the engineering team,
and draft replies for each one without sending"

複数サイトの調査

"Compare pricing on our product page vs the top 3 competitors.
Create a markdown table with the differences."

---

要件

コンポーネント	最低バージョン
Google Chrome	最新の安定版
Claude in Chrome Extension	1.0.36+
Claude Code CLI	2.0.73+
Claude Plan	Pro、Team、Enterprise、または Max
Node.js（DevTools MCP 用）	20.19+

サポート対象外：

• その他の Chromium ブラウザー（Brave、Arc、Edge）
• WSL（Windows Subsystem for Linux）
• ヘッドレスモード（拡張機能では非対応。DevTools MCP はヘッドレスに対応）
• モバイルデバイス