mcpField
D
dev-browser

dev-browser

github.com/numman-aliエージェントワークフロー1.1k35 回インストール7 週間前に更新
リポジトリ

dev-browser について

短い Puppeteer スクリプトで実際の Chrome を操作するコマンドラインスキルです。常駐デーモンを使い、名前付きページを実行間で保持でき、ブラウザーを使う開発作業に適しています。

主な機能

  1. 01Puppeteer スクリプトによる実 Chrome の操作
  2. 02名前付きページの実行間保持
  3. 03インタラクティブな ARIA スナップショットでの確認
  4. 04コマンドラインからのスクリプト実行

活用シーン

  1. 01開発中のブラウザーチェックの自動化
  2. 02スクリプト実行間でのページ再利用
  3. 03ページ上の操作可能な要素の確認
  4. 04Web ページの移動とクリック操作

インストール

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

$npx skills add https://github.com/numman-ali/n-skills --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 対応