mcpField
D
dev-browser

dev-browser

github.com/sawyerhood生産性6.7k2.5k 回インストール1 週間前に更新
リポジトリ

dev-browser について

dev-browserは、短いPuppeteerスクリプトで実際のChromeを操作するコマンドラインツールです。常駐デーモンと名前付きページにより、実行をまたいでブラウザーセッションを維持できます。

主な機能

  1. 01PuppeteerスクリプトでChromeを操作
  2. 02名前付きページを実行間で維持
  3. 03操作可能なARIAスナップショットを取得

活用シーン

  1. 01ページを開いて構造を確認
  2. 02スナップショットから要素を特定してクリック

インストール

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

$npx skills add https://github.com/sawyerhood/dev-browser --skill dev-browser

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

詳細

dev-browser

短い Puppeteer スクリプトで実際の Chrome を操作する CLI です。デーモンは 1 つ起動しておけばよく、名前付きページは実行間で保持されます。

npm install -g dev-browser   # bun add -g dev-browser works too; the first run downloads the binary if the install script was blocked
dev-browser install          # only if the first run says "No Chrome found"

重要な作業を始める前に、dev-browser --help（完全ガイド。1 つのセクションを読むには dev-browser help <topic>）を実行してください。クイックスタート：

dev-browser <<'EOF'
const page = await browser.getPage("main");        // named page persists across runs
await page.goto("https://example.com");            // default waitUntil: domcontentloaded
await page.snapshot({ interactive: true })         // ARIA tree with refs; last expression is printed
EOF
dev-browser -e 'const p = await browser.getPage("main"); await p.click("ref/e6"); await p.waitForLoad(); p.url()'

注意点：行末にはセミコロンを付けてください（( で始まる行は前の行の続きとして扱われます）。オブジェクトを返すには ({ a, b }) としてください。page.click は待機しないため、先に waitForSelector を使用してください。ページ名はブラウザーごとに設定されます（--headless とヘッドありは別々の Chrome とプロファイルです）。ナビゲーションすると参照はリセットされるため、再度スナップショットを取得してください。ファイルパスは現在の作業ディレクトリを基準に解決されます （uploadFile、スクリーンショット／PDF の path）。同じ名前付きページに対して dev-browser の呼び出しを並列実行しないでください。

コメント

Markdown 対応