mcpField
B
browser-setup-devtools

browser-setup-devtools

github.com/different-aiエージェントワークフロー24.3k99 回インストール今日更新
リポジトリ

browser-setup-devtools について

Chrome DevTools MCP を使うエージェント向けのブラウザー設定スキルです。Chrome と MCP の利用可否を確認し、ページを開く手順を案内します。

主な機能

  1. 01Chrome のインストール確認
  2. 02DevTools MCP の利用確認
  3. 03ページの選択または作成
  4. 04MCP 接続のトラブルシューティング
  5. 05指定 URL への移動

活用シーン

  1. 01タスク前のブラウザー自動化の準備
  2. 02DevTools MCP の呼び出し失敗からの復旧
  3. 03設定後のウェブページ表示

MCP 対応

Chrome DevTools MCP を使ってページの一覧取得、選択、作成、URL への移動を行います。

インストール

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

$npx skills add https://github.com/different-ai/openwork --skill browser-setup-devtools

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

詳細

ブラウザー自動化のセットアップ（Chrome DevTools MCP）

原則

  • プロンプトは最小限にし、ツールとコマンドでできる限りの作業を行います。
  • Chrome DevTools MCP のみを使用します。

ワークフロー

  1. 「このコンピューターに Chrome はインストールされていますか？」と尋ねます。
  2. インストールされていない、または不明な場合：
    • 可能であれば、ダウンロードページを開いてインストールすることを提案し、実行します。
    • クリック可能なリンクを提示します：https://www.google.com/chrome/
    • インストールが確認できたら続行します。
  3. DevTools MCP が利用可能か確認します：
    • chrome-devtools_list_pages を呼び出します。
    • ページがある場合は、chrome-devtools_select_page で1つ選択します。
    • ページがない場合は、chrome-devtools_new_page で作成し（https://example.com を使用）、その後選択します。
  4. DevTools MCP の呼び出しに失敗した場合：
    • Chrome を開いたまま実行しておくようユーザーに依頼します。
    • chrome-devtools_list_pages を再試行します。
    • それでも失敗する場合は、opencode.jsonc にコマンド ['npx', '-y', 'chrome-devtools-mcp@latest'] を指定した mcp["chrome-devtools"] が含まれていることを確認し、OpenWork/OpenCode の再起動をユーザーに依頼します。
    • DevTools MCP の確認を再試行します。
  5. DevTools MCP が利用可能な場合：
    • 最初のタスク（「ウェブページを開いてみましょう」）を提案します。
    • はいの場合は、chrome-devtools_navigate_page または chrome-devtools_new_page を使って URL を開き、完了を確認します。

応答ルール

  • 可能な限り、ユーザーへの各プロンプトは短い1文にします。
  • 「今すぐ Chrome を開けます」のように直接提案し、その後にツール操作を行います。
  • リンクは常にクリック可能な URL として提示します。

コメント

Markdown 対応