Browser Controller

Browser Controller Workflow

Instructions

1. Preflight:

   • 概要: Browser Controller Chrome拡張機能を使用し、任意のWebサイトをプログラムから操作する。
   • 前提条件:
     • Python 3.8以上
     • Browser Controller Chrome拡張機能がインストール済み
     • 拡張機能のWebSocket接続が有効
   • ドキュメント精査原則（Preflight必須）：テンプレート確認後、生成前に必ず以下を実施すること。
     • アジェンダ・依頼文に記載された参照資料を全て読み込む。
     • Flow/Stock配下の関連資料を網羅的に検索・確認する。
     • 確認できなかった資料は「未参照一覧」として成果物に明記する。
     • これらを完了するまで生成を開始しない。
   • ./guide/guide.md を先に読み、詳細な使用方法を確認する（テンプレートファースト）。

2. 実行:

   • スクリプト実行パス: ./scripts/browser_controller.py
   • 実行方法:
     • cd .codex/skills/browser-controller/scripts && python browser_controller.py <command>
     • python .codex/skills/browser-controller/scripts/browser_controller.py <command>
   • ブリッジサーバーは自動起動（手動起動不要）。接続確認:
     • python browser_controller.py status

3. QC（必須）:

   • recommended_subagents のQC Subagentに評価・チェックを委譲する。
   • Subagentは最初に ./evaluation/evaluation_criteria.md をReadし、評価指標に基づいてQCを実施する。
   • 指摘を最小差分で反映する。
   • 再度SubagentでQCする。これを最大3回まで繰り返し確定する。
   • 指摘に対し「修正した/しない」と理由を成果物に残す。

4. バックログ反映:

   • 次アクション（追加タスク、レビュー依頼等）を抽出しバックログへ反映する。
   • 反映先・編集制約・差分提示は AGENTS.md / CLAUDE.md の全体ルールに従う。

subagent_policy:

• 品質ループ（QC/チェック/フィードバック）は必ずサブエージェントへ委譲する
• サブエージェントの指摘を反映し、反映結果（修正有無/理由）を成果物に残す

recommended_subagents:

• qa-skill-qc: コマンド実行結果、DOM操作の成功/失敗、スクリプトエラーを検査

CLI Reference

タブ操作

DOM操作

調査・キャプチャ

インスペクトモード

バッチ実行（高速化）

複数コマンドを1リクエストで実行し、WebSocket往復回数を削減する。

Python API

# 複数コマンドを1リクエストで実行（WebSocket往復削減）
await ctrl.batch_execute([
    {'type': 'click', 'selector': '#btn1'},
    {'type': 'get_text', 'selector': 'h1'},
    {'type': 'screenshot'},
])

# 複数DOM操作を1回のexecuteScriptで実行（さらに高速）
await ctrl.batch_dom_ops([
    {'op': 'type', 'selector': '#search', 'text': 'query'},
    {'op': 'click', 'selector': '#submit'},
])

# 複数タブで並列実行
await ctrl.parallel_tabs({
    123: [{'type': 'screenshot'}],
    456: [{'type': 'get_text', 'selector': 'h1'}],
})

柔軟な要素特定（batch_dom_ops用）

操作タイプ（batch_dom_ops用）

BrowserController クラス API

初期化

ctrl = BrowserController(
    timeout=30,        # タイムアウト（秒）
    auto_bridge=True   # ブリッジ自動起動
)

タブ操作

await ctrl.get_tabs()              # タブ一覧
await ctrl.new_tab(url)            # 新しいタブ
await ctrl.close_tab(tab_id)       # タブを閉じる
await ctrl.switch_tab(tab_id)      # タブ切り替え
await ctrl.get_active_tab()        # アクティブタブ取得

DOM操作

await ctrl.click(selector, tab_id)
await ctrl.type_text(text, selector, tab_id)
await ctrl.get_text(selector, tab_id)
await ctrl.get_html(selector, tab_id)
await ctrl.get_attribute(selector, attribute, tab_id)

要素検索

await ctrl.get_elements(tab_id)
await ctrl.search_elements(query, tab_id)
await ctrl.query_selector(selector, tab_id)
await ctrl.query_selector_all(selector, tab_id)
await ctrl.wait_for_element(selector, tab_id, timeout)

ページ情報

await ctrl.get_page_info(tab_id)
await ctrl.get_page_text(tab_id, selector)

ナビゲーション

await ctrl.navigate(url, tab_id)
await ctrl.reload(tab_id)
await ctrl.go_back(tab_id)
await ctrl.go_forward(tab_id)

その他

await ctrl.screenshot(tab_id, save_path)
await ctrl.inspect_dom(tab_id, selector, mode, text)
await ctrl.execute_script(script, tab_id)

Resources

• guide: ./guide/guide.md
• evaluation: ./evaluation/evaluation_criteria.md
• scripts: ./scripts/browser_controller.py

Next Action

• 操作が完了したら、結果を確認し次のタスクへ進む。
• エラーが発生した場合は、status で接続状態を確認する。

Subagent Execution

このSkillはサブエージェントとして独立実行可能。

• サブエージェント: agents/browser-controller-agent.md
• 用途: 任意のWebサイトのブラウザ自動化、DOM操作、スクレイピング
• 入力: url, commands（実行するコマンドリスト）
• 出力: 操作結果、取得データ、スクリーンショット