mcpField
C
chrome-bridge-automation

chrome-bridge-automation

github.com/hainrixz生産性28448 回インストール4 日前に更新
リポジトリ

chrome-bridge-automation について

Midscene ExtensionのBridgeモードを通じて、ユーザーの実際のChromeブラウザーを操作する自動化スキルです。スクリーンショットと自然言語の指示を使い、ブラウザーのセッションとログイン状態を保持します。

主な機能

  1. 01Chrome Bridge経由の接続
  2. 02スクリーンショットによるページ確認
  3. 03自然言語でのUI操作
  4. 04Cookieとログインセッションの保持
  5. 05同期コマンドでの実行

活用シーン

  1. 01ウェブページの移動と操作
  2. 02既存のブラウザーセッションでのフォーム入力
  3. 03ページ情報の抽出と結果の報告

インストール

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

$npx skills add https://github.com/hainrixz/claude-webkit --skill chrome-bridge-automation

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

詳細

Chrome Bridge による自動化

重要なルール — 違反するとワークフローが壊れます：

  1. midscene コマンドをバックグラウンドで実行しないでください。 各コマンドは同期的に実行し、次の操作を決める前に出力（特にスクリーンショット）を確認する必要があります。バックグラウンド実行は、スクリーンショットを確認して分析し、操作するというサイクルを壊します。
  2. midscene コマンドは一度に1つだけ実行してください。 前のコマンドが完了するのを待ち、スクリーンショットを確認してから、次の操作を決めてください。複数のコマンドを連結して実行しないでください。
  3. 各コマンドが完了するまで十分な時間を確保してください。 Midscene コマンドは AI 推論と画面操作を伴うため、一般的なシェルコマンドより時間がかかることがあります。通常は約1分かかり、複雑な act コマンドではさらに時間がかかる場合があります。
  4. 終了前に必ずタスクの結果を報告してください。 自動化タスクの完了後、見つかった重要なデータ、完了した操作、撮影したスクリーンショット、関連する調査結果などを含め、結果をユーザーに積極的に要約して報告する必要があります。最後の自動化手順の後に何も報告せず終了しないでください。ユーザーは1回のやり取りで完全な回答を期待しています。

Midscene Chrome Extension（Bridge モード）を使って、ユーザーの実際の Chrome ブラウザーを自動操作します。Cookie、セッション、ログイン状態は維持されます。あなた（AI エージェント）が判断役となり、スクリーンショットに基づいて実行する操作を決定します。

コマンド形式

重要 — すべてのコマンドは、この正確な形式に従う必要があります。コマンドのプレフィックスは変更しないでください。

npx @midscene/web@1 --bridge <subcommand> [args]
  • --bridge フラグは必須です。これにより Bridge モードが有効になり、ユーザーのデスクトップ版 Chrome ブラウザーに接続します。

前提条件

ユーザーはすでに Chrome と Midscene Extension の準備を済ませています。接続前にブラウザーや拡張機能の状態を確認せず、そのまま接続してください。

Midscene では、視覚的なグラウンディング能力に優れたモデルが必要です。次の環境変数をシステム環境変数として、または現在の作業ディレクトリにある .env ファイル内で設定してください（Midscene は .env を自動的に読み込みます）。

MIDSCENE_MODEL_API_KEY="your-api-key"
MIDSCENE_MODEL_NAME="model-name"
MIDSCENE_MODEL_BASE_URL="https://..."
MIDSCENE_MODEL_FAMILY="family-identifier"

例：Gemini（Gemini-3-Flash）

MIDSCENE_MODEL_API_KEY="your-google-api-key"
MIDSCENE_MODEL_NAME="gemini-3-flash"
MIDSCENE_MODEL_BASE_URL="https://generativelanguage.googleapis.com/v1beta/openai/"
MIDSCENE_MODEL_FAMILY="gemini"

例：Qwen 3.5

MIDSCENE_MODEL_API_KEY="your-aliyun-api-key"
MIDSCENE_MODEL_NAME="qwen3.5-plus"
MIDSCENE_MODEL_BASE_URL="https://dashscope.aliyuncs.com/compatible-mode/v1"
MIDSCENE_MODEL_FAMILY="qwen3.5"
MIDSCENE_MODEL_REASONING_ENABLED="false"
# If using OpenRouter, set:
# MIDSCENE_MODEL_API_KEY="your-openrouter-api-key"
# MIDSCENE_MODEL_NAME="qwen/qwen3.5-plus"
# MIDSCENE_MODEL_BASE_URL="https://openrouter.ai/api/v1"

例：Doubao Seed 2.0 Lite

MIDSCENE_MODEL_API_KEY="your-doubao-api-key"
MIDSCENE_MODEL_NAME="doubao-seed-2-0-lite"
MIDSCENE_MODEL_BASE_URL="https://ark.cn-beijing.volces.com/api/v3"
MIDSCENE_MODEL_FAMILY="doubao-seed"

よく使われるモデル：Doubao Seed 2.0 Lite、Qwen 3.5、Zhipu GLM-4.6V、Gemini-3-Pro、Gemini-3-Flash。

モデルが設定されていない場合は、ユーザーに設定を依頼してください。対応プロバイダーについては、モデル設定を参照してください。

コマンド

Web ページに接続する
npx @midscene/web@1 --bridge connect --url https://example.com
スクリーンショットを撮る
npx @midscene/web@1 --bridge take_screenshot

スクリーンショットを撮影したら、次の操作を決める前に、保存された画像ファイルを読み込んで現在のページの状態を把握してください。

操作を実行する

act を使ってページを操作し、結果を取得します。クリック、入力、スクロール、ホバー、待機、ページ移動などの UI 操作はすべて内部で自律的に処理されます。そのため、細かい手順に分けるのではなく、複雑で高レベルなタスクをまとめて指示してください。自然な言葉で、実行したいことと望む結果を説明してください。

# specific instructions
npx @midscene/web@1 --bridge act --prompt "click the Login button and fill in the email field with '[email protected]'"
npx @midscene/web@1 --bridge act --prompt "scroll down and click the Submit button"

# or target-driven instructions
npx @midscene/web@1 --bridge act --prompt "click the country dropdown and select Japan"
接続を切断する
npx @midscene/web@1 --bridge disconnect

ワークフローのパターン

Bridge モードは、ユーザーの実際の Chrome ブラウザーに接続します。CLI コマンドを実行するたびに一時的な接続が確立されますが、切断の有無にかかわらず、ブラウザー、タブ、すべての状態（Cookie、ログインセッション）は常に保持されます。そのため、再接続は手軽で、状態も失われません。

次のパターンに従ってください。

  1. 接続して、URL にアクセスしセッションを確立します
  2. スクリーンショットを撮影して現在の状態を確認し、ページが読み込まれていることを確かめます。
  3. act を使って目的の操作または目標に基づく指示を実行します。
  4. 結果を報告します。完了した内容を要約し、タスク中に得られた重要な情報やデータを提示し、生成されたファイル（スクリーンショット、ログなど）があればパスとともに列挙します。
  5. ユーザーのタスク全体が完了した場合に限り、接続を切断します。ユーザーが追加の操作を行う可能性がある場合は切断せず、後続の会話でも続けて操作できるようセッションを維持してください。

ベストプラクティス

  1. 必ず最初に接続する：操作を行う前に、connect --url を使って対象の URL に移動します。
  2. UI 要素を具体的に指定する：「ボタン」ではなく、「お問い合わせフォームにある青い送信ボタン」のように指定します。
  3. 自然言語を使う：CSS セレクターではなく、ページ上で見えるものを説明します。"#buy-btn" ではなく、「赤い今すぐ購入ボタン」と伝えます。
  4. 読み込み状態に対応する：ページの読み込みが発生するナビゲーションや操作の後は、スクリーンショットを撮ってページが読み込まれたことを確認します。
  5. すべて完了してから切断する：ユーザーのタスク全体が完全に終了し、後続の操作が予定されていない場合にのみ切断します。複数ターンの会話では、ブラウザー操作を続けられるよう、切断せずにおきます。切断しても問題ありません。閉じるのは CLI 側のブリッジ接続だけで、ブラウザーやタブは閉じません。ただし、ユーザーが続けて操作したい場合に再接続すると、不要なオーバーヘッドが発生します。
  6. バックグラウンドで実行しない：すべての midscene コマンドを同期的に実行する必要があります。バックグラウンド実行すると、スクリーンショットの撮影、分析、操作のループが機能しなくなります。
  7. 関連する操作は単一の act コマンドにまとめる：同じページで連続して操作する場合は、別々のコマンドに分けず、1 つの act プロンプトにまとめます。たとえば、「メールアドレスとパスワードの欄に入力してから、ログインボタンをクリックする」は、3 つのコマンドではなく、1 回の act 呼び出しにします。これにより、やり取りの回数や不要なスクリーンショット撮影・分析サイクルを減らし、大幅に高速化できます。
  8. 完了後は必ず結果を報告する：自動化タスクが終了したら、ユーザーに尋ねられるのを待たず、必ず積極的に結果を提示します。これには、（1）ユーザーからの元の質問への回答、または依頼されたタスクの結果、（2）実行中に取得または確認した重要なデータ、（3）スクリーンショットやその他の生成ファイルとそのパス、（4）実施した手順の簡潔な要約が含まれます。最後の自動化コマンドを実行した後、結果を伝えずに終わらせないでください。ユーザーは 1 回のやり取りで完全な結果を得られることを期待しています。

例 — ドロップダウンの選択：

npx @midscene/web@1 --bridge act --prompt "click the country dropdown and select Japan"
npx @midscene/web@1 --bridge take_screenshot

例 — フォームの操作：

npx @midscene/web@1 --bridge act --prompt "fill in the email field with '[email protected]' and the password field with 'pass123', then click the Log In button"
npx @midscene/web@1 --bridge take_screenshot

トラブルシューティング

ブリッジモードの接続に関する問題
タイムアウト
  • ウェブページの読み込みには時間がかかる場合があります。接続後、操作を始める前にスクリーンショットを撮り、準備ができていることを確認します。
  • ページの読み込みが遅い場合は、手順の間に少し待ちます。
スクリーンショットが表示されない
  • スクリーンショットのパスは、ローカルファイルへの絶対パスです。Read ツールを使って表示します。

コメント

Markdown 対応