browser

ブラウザーツール

共同でのサイト探索やスクレイピングに使える、最小限の CDP ツールです。

クレジット：Mario Zechner の記事 What if you don't need MCP? をベースに、Factory.ai を参考に調整しています。

セットアップ

初回使用の前に、依存関係をインストールします。

npm install --prefix skills/browser

Chrome の起動

./skills/browser/scripts/start.js              # Fresh profile
./skills/browser/scripts/start.js --profile    # Copy your profile (cookies, logins)

リモートデバッグを有効にして、:9222 で Chrome を起動します。

移動

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

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

JavaScript の評価

./skills/browser/scripts/eval.js 'document.title'
./skills/browser/scripts/eval.js 'document.querySelectorAll("a").length'

アクティブなタブで JavaScript を実行します（非同期コンテキスト）。

IMPORTANT：コードは単一の式にするか、複数の文を実行する場合は IIFE を使用してください。

• 単一の式：'document.title'
• 複数の文：'(() => { const x = 1; return x + 1; })()'
• コード文字列に改行を入れないでください。1 行にまとめてください。

スクリーンショット

./skills/browser/scripts/screenshot.js

現在のビューポートを撮影し、一時ファイルのパスを返します。

要素の選択

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

インタラクティブな要素選択ツールです。クリックで選択し、Cmd/Ctrl+クリックで複数選択し、Enter で完了します。

ワークフロー

1. 認証済みの状態を引き継ぐには、start.js --profile で Chrome を起動します。
2. nav.js https://target.app で移動するか、--new を付けて新しいタブを開きます。
3. eval.js を使って DOM を調査し、要素数の確認、属性のチェック、JSON ペイロードの抽出を素早く行います。
4. 視覚的な証拠が必要な場合は screenshot.js で成果物を取得し、正確なセレクターやテキストのスナップショットが必要な場合は pick.js を使用します。

使用上の注意

• ほかのツールを使用する前に Chrome を起動してください。
• --profile フラグは実際の Chrome プロファイルを同期するため、すべてのサイトにログインした状態になります。
• JavaScript の評価は、ページ内の非同期コンテキストで実行されます。
• Pick ツールでは、DOM 要素をクリックして視覚的に選択できます。