mcpField
C
chrome-devtools

chrome-devtools

github.com/oakoss生産性20138 回インストール11 週間前に更新
リポジトリ

chrome-devtools について

chrome-devtoolsは、Claudeから実際のChromeブラウザーを操作するためのスキルです。既存のログイン状態を利用し、拡張機能を使ったClaude Code操作とChrome DevTools MCPによる自動化・デバッグを扱います。

主な機能

  1. 01ログイン済みChromeセッションの操作
  2. 02タブ移動とページ操作
  3. 03DOM・コンソール・ネットワーク情報の確認
  4. 04スクリーンショットとパフォーマンストレースの取得
  5. 05ブラウザーワークフローの記録とスケジュール実行

活用シーン

  1. 01ログイン済みサイトでのフォーム入力自動化
  2. 02フロントエンドのコンソール・ネットワークエラー調査
  3. 03複数タブにまたがるデータ抽出
  4. 04定期的なブラウザータスクの実行

MCP 対応

Chrome DevTools MCPは、実際のChromeインスタンスをプログラムから操作する26種類のブラウザー自動化ツールを提供します。このスキルでは、Claude CodeとChrome拡張機能を使う設定・手順も説明します。

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/oakoss/agent-skills --skill chrome-devtools

インストール後、Claude Code で/chrome-devtoolsを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
automation-workflows.md
claude-code-integration.md
devtools-mcp.md
shortcuts-scheduling.md
troubleshooting.md

詳細

Chrome DevTools スキル

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

概要

統合方法は 2 つあります。Claude Code + Chrome 拡張機能（claude --chrome によるターミナルベースのブラウザー操作）と、Chrome DevTools MCP（Model Context Protocol による 26 個のブラウザー自動化ツール）です。どちらも既存のログイン情報を使用して実際の Chrome インスタンスを操作するため、再認証は不要です。また、Chrome 拡張機能は Claude Code とは独立して、ワークフローのショートカット、定期的なタスクのスケジュール設定、複数のタブの連携にも対応しています。

クイックリファレンス

統合方法セットアップ最適な用途
Claude Code + 拡張機能claude --chromeターミナルベースのブラウザー操作
Chrome DevTools MCPclaude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latestMCP ツールによるプログラムからの自動化
機能ツール／方法
ナビゲーションURL への移動、タブの作成／終了／切り替え、ウィンドウのサイズ変更
入力クリック、入力、フォームへの記入、ドラッグ、ホバー、キーの押下、ファイルのアップロード
抽出ページのコンテンツ、DOM の状態、コンソールログ、ネットワークリクエストの読み取り
デバッグスクリーンショット、DOM スナップショット、JavaScript の評価、パフォーマンスのトレース
エミュレーションデバイスのエミュレーション、ビューポートのサイズ変更
記録ブラウザー操作を GIF として記録、ワークフローのショートカットを保存
スケジュール設定日次／週次／月次／年次のトリガーを使ったワークフローのショートカット
要件最低バージョン
Google Chrome最新の安定版
Claude in Chrome 拡張機能1.0.36+
Claude Code CLI2.0.73+
Claude プランPro、Team、または Enterprise
Node.js（DevTools MCP）20.19+

サポート対象外：その他の Chromium ブラウザー（Brave、Arc、Edge）、WSL、ヘッドレスモード（拡張機能を使う場合のみ。DevTools MCP はヘッドレスに対応）、モバイルデバイス。

よくある間違い

間違い正しいパターン
--chrome フラグを指定せずにブラウザー自動化を実行するclaude --chrome で Claude Code を起動するか、/chrome の設定で Chrome をデフォルトで有効にします
既存のタブを引き継ごうとするClaude はタスク用に新しいタブを開きます。すでに開いているタブを乗っ取ることはありません
CAPTCHA やモーダルダイアログを手動で処理しないClaude は CAPTCHA、ログインプロンプト、モーダルで一時停止します。自分で閉じてから、Claude に続行を指示してください
フォーム入力に曖昧な指示を使うフィールド名、値、順序を具体的に指定してください。曖昧なプロンプトでは結果に一貫性がなくなります
絞り込まずにすべてのコンソールログを要求するログのパターンやエラーの種類を指定してください。すべてを要求すると、不要な情報でコンテキストが埋まります
必要がないのに Chrome をデフォルトで有効にするブラウザーツールが常に読み込まれるため、コンテキスト使用量が増えます。必要なときだけ --chrome フラグを使用してください
--scope user を指定せずに DevTools MCP を使うすべてのプロジェクトで MCP サーバーを利用できるように、--scope user を追加してください

委任

  • サイト間で繰り返し行うブラウザーワークフローを自動化する：Chrome 拡張機能を備えた Task エージェントを使って、フォームへの入力、データの抽出、複数ステップのフローの操作を行います
  • コンソールとネットワークを調査してフロントエンドの問題をデバッグする：DevTools MCP を備えた Explore エージェントを使って、コンソールエラー、ネットワーク障害、DOM の状態を記録します
  • 複数タブを使う複雑なデータ抽出パイプラインを計画する：ブラウザー自動化を実行する前に、Plan エージェントを使ってワークフローの手順を設計します
  • 定期的なブラウザータスクを記録してスケジュールする：Chrome 拡張機能のショートカットとスケジュール機能を使って、毎日または毎週の自動化を行います

参考資料

コメント

Markdown 対応