>_ DevTrendsja

言語

ホーム

言語

セクション

フロントエンド バックエンド モバイル DevOps AI / ML ゲーム開発 ブロックチェーン 組み込み セキュリティ
Python

Browser Harnessでニューラルネットワークをライブブラウザに接続する方法

Browser Harness

言語モデルでWeb自動化を試みたことがある人なら 누구나、この痛みを知っているでしょう。エージェントは喜んでボタンをクリックし始めますが、標準的でない入力フィールドや厄介なCAPTCHAが出た途端に完全に立ち往生してしまいます。従来のフレームワークはクリック、入力、スクロールという硬直的なツールセットしか提供しません。もし必要なアクションがエージェントのコードベースに含まれていなければ、タスクは崩壊します。

browser-useチームはbrowser-harnessプロジェクトで別のアプローチを提案しました。すべての可能なWebページシナリオを事前に予測しようとする代わりに、LLMをChrome DevTools Protocol(CDP)を介して実際のブラウザに接続し、モデルが不足している関数をその場で記述する能力を与えるラッパーを作成しました。

自己学習型ラッパーのアイデアとは

通常のブラウザエージェントは隔離された環境で動作します。保存されたセッション、クッキー、認証のない隔離されたヘッドレスブラウザが提供されます。その結果、半分以上の時間がログインの試みに費やされます。

Browser Harnessはデバッグポート経由で実行中のChromeに直接接続します。モデルはすぐに開いているタブ、プロファイル、動作環境を確認できます。

最も興味深い部分は、コード処理のメカニズムにあります:

  1. エージェントはタスクを受け取ります。例えば、ソーシャルメディアプロフィールから最後の20本の動画をダウンロードしたり、ファイルドロップゾーンのある複雑なフォームに記入したりします。
  2. モデルはローカルファイルagent-workspace/agent_helpers.pyをチェックします。要素を操作するための適切な関数がない場合、エージェントは自分でヘルパースクリプトを記述します。
  3. スクリプトはすぐにページコンテキストで実行されます。正常に動作すれば、関数はワークスペースに保存されます。
  4. 次の同様のタスクを実行する際、エージェントは車輪の再発明をせず、以前に記述したヘルパーを使用します。

同時に、ライブラリ自体はsrc/browser_harness/フォルダ内のコアが変更から保護されたままです。モデルは自分のローカルのワークスペースのみを拡張するため、コアロジックを壊すリスクは最小限です。

Download my latest 20 X videos

起動の仕組み

このプロジェクトはClaude CodeやCodexのようなエージェント型開発環境と緊密に統合されています。始めるには、アシスタントに完成済みのインストールプロンプトを入力するだけです:

Install or upgrade browser-harness to the latest stable version with uv using Python 3.12, register the skill from `browser-harness skill`, and connect it to my browser. Ask whether I want local browser recordings enabled; default to no and preserve my existing preference on upgrades. Follow https://github.com/browser-use/browser-harness/blob/main/install.md if setup or connection fails.

コマンドを実行すると、chrome://inspect/#remote-debuggingタブが開きます。そこでリモートデバッグのチェックボックスをオンにして、エージェントがCDP WebSocketにアクセスできるようにする必要があります:

Remote debugging setup

スタック全体は3つの明確なファイルで支えられています:

  • install.md命令はデバッグポート経由でブラウザへの初期接続を処理します。
  • SKILL.mdファイルはLLMのためのページとのインタラクションパターンを記述します。
  • src/browser_harness/ディレクトリのモジュールは持続的なソケットを維持し、コマンドを渡します。

内部構造と使用されている技術

内部では、プロジェクトはPython 3.12とuvパッケージマネージャーを使用しています。セッション管理にはSeleniumのような重いラッパーを使わず、CDPへの直接WebSocketを使用します。

このアプローチにより、2つの実用的な利点が得られます:

  • 入力イベント、スクロール、クリックの伝送時のレイテンシが最小限。
  • DOM、ネットワークリクエスト、ブラウザストレージへの完全なアクセスが可能で、追加のブリッジを設定する必要がありません。

dozens of tasksを並行して実行する必要がある場合、作成者は готовые прокси、bot-detector保護、CAPTCHA解決を備えたBrowser Use Cloudインフラストラクチャを提供しています。しかし、日常的なローカル実行では、自分のブラウザで十分です。

実用的なユースケース

このようなツールが本当に時間を節約できる場面:

  • パブリックAPIがなく、二要素認証が設定されているプライベートダッシュボードからのデータ収集。手動で一度だけ認証すれば、ルーティンなレポートエクスポートをエージェントに任せられます。
  • 一括メディアファイルのダウンロード。エージェントはページを開き、フィードをスクロールし、必要な動画プレーヤーのセレクターを見つけ、ローカルフォルダにファイルを保存します。
  • レイアウトとユーザーシナリオのテスト。エージェントはユーザージャーニーを辿り、不足しているチェックを自分で記述し、ヘルパーに保存します。
  • スプレッドシートからCRMシステムへの一括データ移行が必要な場合、企業向けCRMシステムでの反復的なフォーム入力。

試してみる価値はあるか

Claude Codeのようなエージェント型CLIツールを積極的に使っていて、ページからターミナルにデータを手動でコピーするのに疲れているなら、このプロジェクトは確かに試す価値があります。エージェント自体が永続的なヘルパーを通じてツールキットを拡張するというコンセプトは、システムプロンプトを際限なく肥大化させるよりもはるかに実行可能です。

欠点としては、プロジェクトにはセキュリティへの注意深い注意が必要だという点を指摘しておきます。LLMにメインブラウザへのアクセスを与えることで、すべての開いているセッションを共有することになります。だから実験には、リンクされた銀行カードや重要なサービスのない別々のChromeプロファイルを作成する方が賢明です。シンプルなパースcenarioから始めて、エージェントがagent_helpers.pyで最初の関数をどのように生成するかを確認し、この形式がいつものスタックにどの程度適合するかを評価してください。

関連プロジェクト