mcpField
W
web-browser

web-browser

github.com/mitsuhikoエージェントワークフロー3.2k677 回インストール4 週間前に更新
リポジトリ

web-browser について

web-browser は、エージェントが共同でサイトを調査するための軽量な CDP ツールを備えたスキルです。Chrome を操作し、ページ移動、JavaScript 実行、スクリーンショット、デバイスエミュレーション、ログ収集を行います。

主な機能

  1. 01ヘッドレスまたは表示状態で Chrome を起動
  2. 02タブやページの移動
  3. 03アクティブなタブで JavaScript を実行
  4. 04表示領域またはページ全体を撮影
  5. 05モバイルデバイスのエミュレーション
  6. 06コンソール、エラー、ネットワークログの収集

活用シーン

  1. 01ページの内容やリンクを調査
  2. 02モバイル表示でサイトを確認
  3. 03スクリーンショットを撮りブラウザーエラーを確認

インストール

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

$npx skills add https://github.com/mitsuhiko/agent-stuff --skill web-browser

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

同梱ファイル

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

scripts/
browser-processes.js
browser-processes.test.js
cdp.js
devices.js
dismiss-cookies.js
emulate.js
emulation-state.js
eval.js
logs-tail.js
nav.js
net-summary.js
package-lock.json
package.json
pick.js
screenshot.js
start.js
stop.js
watch.js

詳細

Web Browser Skill

共同でのサイト探索に対応する最小限の CDP ツールです。

Chrome の起動（ヘッドレスを推奨）

./scripts/start.js --headless            # Recommended: isolated reusable profile
./scripts/start.js --headless --profile  # Headless with a copy of your profile
./scripts/start.js                       # Visible browser window when needed
./scripts/start.js --headless --reset-profile  # Clear cached profile before launch

リモートデバッグを有効にして Chrome を起動します（デフォルトのポートは :9222 です）。エージェントは、デフォルトで --headless を使用してください。操作の妨げになりにくく、ナビゲーション、評価、スクリーンショット、エミュレーション、ログ記録に対応しています。ヘッドレス起動ではユーザーの拡張機能は無効になります。プロファイルをコピーした場合も Cookie などのブラウザー状態は引き継がれますが、拡張機能に依存する機能は使用できません。ヘッドありで起動すると、通常どおり拡張機能が読み込まれます。人がブラウザーを見たり操作したりする必要がある場合（pick.js の使用、手動での認証、ヘッドレス環境特有の差異のデバッグなど）に限り、ヘッドありモードを使用してください。

起動スクリプトは、プロファイルと起動設定が一致する場合にのみ、実行中のブラウザーを再利用します。ヘッドレスモードとヘッドありモードを切り替える前に、実行中のスキルブラウザーを停止してください。デバッグポートを変更しても、プロファイルが分離されるわけではありません。起動時に、別のポートですでに使用されているプロファイルの変更は拒否され、Chrome のプロファイルロックも維持されます。

プロファイルの動作：

  • デフォルトモードでは、~/.cache/agent-web/browser/fresh-profile を使用します
  • --profile モードでは、~/.cache/agent-web/browser/profile-copy を使用します
  • このスキルは実際に使用中の Chrome プロファイルに直接接続しません
  • :9222 が不明なインスタンスによってすでに使用されている場合、既存のインスタンスを再利用せず、起動に失敗します

Chrome が標準以外の場所にインストールされている場合は、次のように設定してください。

BROWSER_BIN=/path/to/chrome ./scripts/start.js --headless

デバッグエンドポイントのオプション指定：

BROWSER_DEBUG_PORT=9333 ./scripts/start.js --headless

Chrome の停止

./scripts/stop.js                         # Stop skill Chrome on :9222
BROWSER_DEBUG_PORT=9333 ./scripts/stop.js  # Stop skill Chrome on :9333
./scripts/stop.js --all                   # Stop all skill Chrome instances

ヘッドレスブラウザーとヘッドありブラウザーの両方で動作します。スキルのキャッシュ済みプロファイルを使用しているプロセスのみが停止され、通常使用している Chrome は停止されません。シャットダウン後も Cookie などのキャッシュ済み状態は保持されます。Chrome を強制終了することはありません。--reset-profile を使用する前に停止してください。

ブラウザーを表示するには、次のようにします。

./scripts/stop.js
./scripts/start.js

ナビゲーション

./scripts/nav.js https://example.com
./scripts/nav.js https://example.com --new

現在のタブに移動するか、新しいタブを開きます。

デバイスエミュレーション（モバイル）

./scripts/emulate.js --list
./scripts/emulate.js iphone-14
./scripts/emulate.js pixel-7 --landscape
./scripts/emulate.js --reset

ブラウザースキルのコマンドに適用するデバイスエミュレーション設定（ビューポート、DPR、タッチ、UA）を指定します。解除するには --reset を使用します。

nav.js、eval.js、pick.js、dismiss-cookies.js、screenshot.js などのコマンドには、アクティブな設定が自動的に適用されます。

JavaScript の評価

./scripts/eval.js 'document.title'
./scripts/eval.js 'document.querySelectorAll("a").length'
./scripts/eval.js 'document.querySelector("button")?.click(); "clicked"'
./scripts/eval.js 'await Promise.resolve(document.title)'
./scripts/eval.js 'JSON.stringify(Array.from(document.querySelectorAll("a")).map(a => ({ text: a.textContent.trim(), href: a.href })).filter(link => !link.href.startsWith("https://")))'

アクティブなタブで JavaScript を実行します。入力には式または文のリストを指定でき、コンソール形式の評価結果が出力されます。また、Promise とトップレベルの await は待機してから結果を返します。文字列のエスケープには注意してください。シングルクォートを使用するのがおすすめです。

スクリーンショット

./scripts/screenshot.js
./scripts/screenshot.js --full-page
./scripts/screenshot.js --device iphone-14
./scripts/screenshot.js --device pixel-7 --full-page

スクリーンショットを撮影し、一時ファイルのパスを返します。

  • デフォルト：現在のビューポート
  • --full-page：ドキュメント全体の高さを撮影します
  • --device <preset>：そのスクリーンショットの撮影時のみ、一時的にモバイルエミュレーションを行います

要素の選択

./scripts/pick.js "Click the submit button"

インタラクティブな要素選択ツールです。クリックで選択し、Cmd/Ctrl を押しながらクリックすると複数選択できます。Enter キーで終了します。ヘッドありの Chrome が必要です。start.js を --headless を付けずに起動してください。

Cookie ダイアログの閉じ方

./scripts/dismiss-cookies.js          # Accept cookies
./scripts/dismiss-cookies.js --reject # Reject cookies (where possible)

EU の Cookie 同意ダイアログを自動的に閉じます。

ページに移動した後に実行します：

./scripts/nav.js https://example.com && ./scripts/dismiss-cookies.js

モバイルの簡易デバッグ手順

./scripts/start.js --headless
./scripts/nav.js https://example.com
./scripts/emulate.js iphone-14
./scripts/nav.js https://example.com      # reload with mobile UA
./scripts/dismiss-cookies.js
./scripts/screenshot.js --full-page

バックグラウンドログ（コンソール、エラー、ネットワーク）

start.js によって自動的に開始され、ログは次の場所に JSONL 形式で書き込まれます。

~/.cache/agent-web/logs/YYYY-MM-DD/<targetId>.jsonl

手動で開始するには、次のようにします。

./scripts/watch.js

最新のログを表示するには、次のようにします。

./scripts/logs-tail.js           # dump current log and exit
./scripts/logs-tail.js --follow  # keep following

ネットワークレスポンスを要約するには、次のようにします。

./scripts/net-summary.js

コメント

Markdown 対応