0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

普段のChromeをMCPに接続する:BeatBrowserの構成と設定

0
Posted at

BeatBrowser 記事のコンセプト表紙

エージェントからブラウザーを操作する方法は、すでに多数あります。それでもBeatBrowserを作っているのは、対応するエージェントを選びつつ、普段のChromeとタスクの確認画面を使い続けたいからです。

この記事では、開発しているOSSの1.4.1を例に、Chrome拡張機能とローカルブリッジの構成、導入手順、確認項目を説明します。新しい性能測定や、特定クライアントでの今回の実測レポートではありません。

この構成で選んだこと

公式のブラウザー機能は、それぞれのエージェント製品に統合されています。BeatBrowserは接続ツールを独立させ、stdio MCPに対応するクライアントから利用します。Codex、Claude Code、WorkBuddy、OpenCodeなどが例です。

専用ブラウザーを別途導入せず、明示的に接続したChromeプロファイルを使います。Cookieを書き出す必要はありません。同じプロファイル内ではCookieやストレージを共有するため、タスクごとのアカウント分離にはなりません。

Playwright MCPにも既存Chromeへの拡張接続があり、ログイン状態の再利用はこのツールだけの機能ではありません。BeatBrowserでは、タスクウィンドウ、進捗、引き継ぎ、復元、クリーンアップを拡張機能のWorkspaceにまとめています。

接続経路

MCPクライアント
  → ローカルstdio MCPサーバー / ブリッジ
  → Chrome拡張機能
  → 明示的に選んだChromeプロファイル

ローカル利用に公開ドメインやトンネルは不要です。必要なのはNode.js 20以上、Chrome 116以上、ローカルstdio MCPを起動できるクライアントです。

1. ツールとクライアント設定

npm install --global @beatapi/beat-browser@1.4.1
beat-browser install --dry-run
beat-browser install
beat-browser extension

dry-runで変更予定を確認してから適用します。最後のコマンドは拡張機能のフォルダーを表示します。Chromeに自動で読み込むコマンドではありません。

2. 拡張機能の読み込み

使いたいChromeプロファイルでchrome://extensionsを開き、デベロッパーモードを有効にして、表示されたフォルダーを読み込みます。そのフォルダーは利用中も保持し、CLIと拡張機能を同じバージョンにそろえます。

Chromeウェブストアに登録済みではないため、手動の作業が必要です。自動設定できないクライアント向けの設定例は、インストール文書にあります。

初回設定と日常利用

3. 接続確認

beat-browser doctor --json

確認する項目はok: trueとextensionOnline: trueです。これは接続確認であり、任意のサイトのログイン状態やフォーム送信の成功を証明するものではありません。MCPクライアントも再起動します。

最初は次のような読み取り専用タスクが適しています。

接続中のChromeプロファイルを確認してください。
複数ある場合は、どれを使うか私に確認してください。
TaskSpaceで https://example.com を開き、タイトルを読み、
結果を報告して一時停止してください。

これは依頼例であり、実行結果ではありません。接続、ページへのアクセス、タスク状態をそれぞれ確認してから、ログイン済みサイトでの作業に進みます。

4. タスクの状態を確認する

人の確認待ちで停止した開発用タスク。UIは英語

使い捨ての開発用環境で撮影した実際の拡張機能UIです。2ページのタスクと引き継ぎ操作を示しており、顧客サイトでの業務成功や現在の全クライアントでの検証を示す画像ではありません。

タスクのウィンドウをアクティブにすると後続操作が一時停止します。再開は明示的に行います。送出済みの操作は取り消せず、サイトのポップアップやOSのダイアログが前面に出る場合もあります。

未完了のタスク記録は、拡張機能の再読み込み後に一時停止して復元されます。ブラウザー再起動後にはページの関連付けを人が行います。URLが一致するだけで操作権限を付与しません。

クラウド上のエージェントから使う場合

ローカルとクラウドの接続経路

クラウドAgentモードは、1.4.1に含まれる任意設定のプレビューです。自分で管理する認証付きトンネルを本機のremote adapterへ接続し、そこから同じブリッジと拡張機能を使います。通常のローカルブリッジをそのまま公開しません。

エージェントごとに認証情報を分けます。PCとChromeをオンラインに保ち、クライアント側の外部ツール対応も確認します。MuseとGrok Botは接続先の例で、全バージョンの動作保証ではありません。遠隔で提供するのは21ツールで、ローカルより範囲を絞っています。

ブラウザーの状態は本機にありますが、取得した内容は選んだエージェントやモデル提供者へ渡ります。設定と制約はREMOTEに記載しています。

参照

開発元として関わっているOSSです。翻訳と構成整理にAIを使用し、記載内容を公開実装・文書と照合しています。広い拡張権限、同一プロファイルの状態共有、最小化した有頭ウィンドウの撮影などの制約も、導入前に確認してください。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?