mcpField
B
Browser Daemon

Browser Daemon

github.com/jackspaceテスト・品質1640 回インストール12 週間前に更新
リポジトリ

Browser Daemon について

コマンドラインスクリプトとファイルベースのIPCで、Playwright制御のChromeを操作するスキルです。ブラウザーを開いたままページやコンソールを調べる開発・テストに向いています。

主な機能

  1. 01Chromeセッションの継続
  2. 02URL移動とJavaScript実行
  3. 03コンソールログの取得と消去
  4. 04ビューポート変更と状態確認
  5. 05ブラウザーの自動再起動とURL復元
  6. 06ファイルによるコマンドと結果の受け渡し

活用シーン

  1. 01開発中のページの確認
  2. 02ブラウザーコンソールとエラー発生元の調査
  3. 03DOM状態やページ情報の取得
  4. 04複数手順のブラウザーテスト実行

インストール

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

$npx skills add https://github.com/jackspace/claudeskillz --skill browser-daemon

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

同梱ファイル

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

META_COMMANDS.md
browser-client.js
package.json
browser-daemon.js
SKILL.json

詳細

Browser Daemon - 永続的なブラウザー自動化

Chrome を開いたままにし、ファイルベースの IPC 経由でコマンドを受け付ける永続的なブラウザーデーモンです。

クイックスタート

デーモンを起動する（セッションごとに1回）
cd ~/.claude/skills/playwright-skill
node browser-daemon.js

または、「ブラウザーデーモンをバックグラウンドで起動して」と依頼してください。

ブラウザーウィンドウが開き、そのまま開いた状態になります。

コマンドを送信する

絶対パスを使用します（ディレクトリを変更する必要がなく、より簡単です）。

# Navigate
~/.claude/skills/playwright-skill/browser-client.js navigate "http://localhost:8080/..."

# Execute JavaScript
~/.claude/skills/playwright-skill/browser-client.js exec "document.title"
~/.claude/skills/playwright-skill/browser-client.js exec "document.querySelectorAll('div').length"

# Console logs
~/.claude/skills/playwright-skill/browser-client.js console
~/.claude/skills/playwright-skill/browser-client.js console-clear

# Status
~/.claude/skills/playwright-skill/browser-client.js status

# Resize viewport
~/.claude/skills/playwright-skill/browser-client.js resize 1920 1080

どちらのスクリプトにもシバンがあり、実行可能なため、直接呼び出せます。

アーキテクチャ

Claude (Bash tool)
    ↓
browser-client.js (writes .browser-command)
    ↓
browser-daemon.js (polls, executes, writes .browser-result)
    ↓
Chrome Browser (Playwright-controlled)

IPC ファイル：

  • .browser-command - コマンド入力（JSON）
  • .browser-result - コマンド出力（JSON）
  • .browser-ready - 準備完了シグナル（デーモンの実行中に存在）

ファイルは処理中に自動で作成・削除されます。

コマンド

navigate

URL に移動し、ページの読み込みを待ちます。

node browser-client.js navigate "http://localhost:8080/page"

戻り値：{ success: true, url: string, title: string }

exec

ブラウザーコンテキストで JavaScript を実行します。

node browser-client.js exec "document.querySelectorAll('div').length"

戻り値：{ success: true, result: any }

console

収集したすべてのコンソールログを取得します。

node browser-client.js console

戻り値：{ success: true, logs: [{ type, text, location }] }

console-clear

コンソールログのバッファーをクリアします。

node browser-client.js console-clear

戻り値：{ success: true }

status

デーモンの状態と現在のページ情報を確認します。

node browser-client.js status

戻り値：{ success: true, url, title, consoleLogsCount }

resize

ブラウザーのビューポートのサイズを変更します。

node browser-client.js resize 1920 1080

戻り値：{ success: true, width, height }

デーモンの動作

  • H.264 コーデックをサポートするため、Chromium ではなく Chrome を起動します
  • 起動時に、ビューポートを利用可能な画面全体のサイズに設定します
  • すべてのコンソール出力（log、warn、error、debug、pageerror）を自動的に収集します
  • 100ms ごとにコマンドを確認します
  • 遅延再起動：ブラウザーが閉じられた状態でコマンドが送信されると、デーモンは終了を検出してブラウザーを再起動し、最後の URL を復元してからコマンドを実行します

ブラウザーの設定

chromium.launch({
  channel: 'chrome',      // Use Google Chrome, not Chromium
  headless: false,        // Visible window
  args: ['--start-maximized']
})

重要な注意点

ウィンドウを手動でサイズ変更しても反映されません：

  • Playwright はウィンドウとは独立してビューポートを制御します
  • ブラウザーウィンドウを手動でサイズ変更しても、ビューポートは変わりません
  • ウィンドウのサイズ変更では JavaScript の resize イベントは発生しません
  • 代わりに resize コマンドを使用してください：node browser-client.js resize 1024 768

DevTools のオーバーレイ：

  • DevTools を開いてもビューポートのサイズは変わらず、上に重なって表示されます
  • resize イベントは発生しません
  • window.innerWidth/Height は変わりません

ビューポートとウィンドウ：

  • window.innerWidth/Height - ビューポート（Playwright が制御）
  • window.outerWidth/Height - ウィンドウのサイズ
  • resize コマンドで変更できるのはビューポートのみです

ユースケース

インタラクティブな開発： 変更をテストする間ブラウザーを開いたままにして、手動操作なしで再読み込みし、コンソールを確認できます。

コンソールログのデバッグ： ソース位置を自動で記録して、ログの発生元を特定できます。

ページ状態の確認： JavaScript の実行を通じて DOM を照会し、要素数を確認し、計算済みスタイルを調べられます。

ワークフローのテスト： 複数段階のブラウザー操作（移動、フォーム入力、送信、結果の確認）を自動化できます。

トラブルシューティング

デーモンが応答しない場合：

ls ~/.claude/skills/playwright-skill/.browser-ready
cd ~/.claude/skills/playwright-skill && node browser-daemon.js

コマンドがタイムアウトする場合：

  • ブラウザーウィンドウがまだ開いているか確認します
  • デーモンを終了して再起動します
  • 停滞したファイルをクリーンアップします：rm -f .browser-command .browser-result

ブラウザーウィンドウが閉じた場合：

  • デーモンを終了します（Ctrl+C）
  • 再起動します：node browser-daemon.js
  • または任意のコマンドを送信します。遅延再起動が自動的に実行されます

セットアップ（初回のみ）

cd ~/.claude/skills/playwright-skill
npm install

これにより Playwright がインストールされ、Chrome ブラウザーがダウンロードされます。

高度な機能

基本的なテスト以外の Playwright のメタレベル機能については、詳しいリファレンスの META_COMMANDS.md を参照してください。

  • ページイベント（コンソール、ネットワーク、ダイアログ、ワーカー、フレーム、ライフサイクル）
  • コンテンツの取得（スクリーンショット、PDF、HTML、動画）
  • ネットワーク制御（インターセプト、モック、HAR の再生、WebSocket）
  • スクリプトの挿入と Node.js 関数の公開
  • パフォーマンス指標とガベージコレクション
  • 低レベルのブラウザー制御のための Chrome DevTools Protocol（CDP）アクセス
  • ブラウザーコンテキストのイベントとメタメソッド

統合に関する注意事項

ユーザーからブラウザー操作を依頼された場合：

  1. デーモンが実行中か確認します（.browser-ready ファイルが存在するか確認します）
  2. 実行中でない場合は、バックグラウンドタスクとして起動するかユーザーに確認します
  3. browser-client.js コマンドを使用して操作を実行します
  4. 結果をユーザーに報告します

ユーザーは追加機能をリクエストできます。コードベースは拡張しやすく、ドキュメントも充実しています。

コメント

Markdown 対応