メインコンテンツへスキップ
This cookbook is inspired by Mario Zechner’s “What if you don’t need MCP?”, adapted into a reusable Factory skill so teams can share lightweight browser helpers without standing up new services.
browser skillは、いくつかの実行可能スクリプト（start.js、nav.js、eval.js、screenshot.js、pick.js）と簡潔なSKILL.mdをバンドルしています。これらにより、Factory Droidsはポート9222でChromeを確実に起動し、既存のタブを操作し、構造化データをスクレイピングし、開発者マシン上で完全に動作しながら視覚的証拠を取得する信頼性の高い方法を提供します。

​
このスキルを使用する場合

  • タスクを完了するために実際のブラウザコンテキスト（認証済みセッション、本番環境でのみ発生する動作、視覚的リグレッション）が必要な場合。
  • 専用のMCPサーバーを構築することなくDOM状態を検査または抽出したい場合。
  • QAノート、バグトリアージ、またはドキュメント作成の一環としてスクリーンショットまたはDOM要素メタデータの取得が必要な場合。
  • チームメンバーが追加インフラストラクチャなしでローカルで実行できるポータブルでgit管理されたバンドルを好む場合。

​
スクリプトが提供する機能

スクリプト目的典型的な使用方法
start.js:9222でリモートデバッグ機能を有効にしてChromeを起動し、--profileによるオプションのプロファイル同期を行います。~/.factory/skills/browser/start.js --profile
nav.jsアクティブなタブをナビゲートするか、--newが渡された際に新しいタブを開きます。~/.factory/skills/browser/nav.js https://example.com --new
eval.jsフォーカスされたタブで任意のJavaScript（async対応）を実行し、構造化された結果を出力します。~/.factory/skills/browser/eval.js "document.title"
screenshot.js現在のビューポートを$TMPDIRに保存されるタイムスタンプ付きPNGとしてキャプチャします。~/.factory/skills/browser/screenshot.js
pick.jsビジュアルピッカーを注入して、DOM ノードをクリックしてタグ/ID/クラス/テキストメタデータを返すことができます。~/.factory/skills/browser/pick.js "Click the submit button"
すべてのスクリプトはpuppeteer-coreに依存し、あなたが制御するChromeインスタンスに接続します。すべてがローカルで実行されるため、既存のクッキーや認証トークンがマシンから外に出ることはありません。

​
セットアップ

1

Create the skill folder

Run mkdir -p .factory/skills/browser.
2

Copy scripts and package metadata

Copy start.js, nav.js, eval.js, screenshot.js, pick.js, and package.json into .factory/skills/browser/ (or symlink to a shared dotfiles repo).
3

Install dependencies

Run npm install --prefix .factory/skills/browser puppeteer-core, then chmod +x .factory/skills/browser/*.js.
4

Restart Droid

Restart droid (or your IDE integration) so it rescans workspace skills and discovers browser.

​
スキル定義

以下を.factory/skills/browser/SKILL.mdにコピーしてください： 
---
name: browser
description: Minimal Chrome DevTools Protocol tools for browser automation and scraping. Use when you need to start Chrome, navigate pages, execute JavaScript, take screenshots, or interactively pick DOM elements.
---

# Browser Tools

Minimal CDP tools for collaborative site exploration and scraping.

**IMPORTANT**: All scripts are located in `~/.factory/skills/browser/` and must be called with full paths.

## Start Chrome

```bash
~/.factory/skills/browser/start.js              # 新しいプロファイル
~/.factory/skills/browser/start.js --profile    # あなたのプロファイルをコピー（クッキー、ログイン）
```

Start Chrome on `:9222` with remote debugging.

## Navigate

```bash
~/.factory/skills/browser/nav.js https://example.com
~/.factory/skills/browser/nav.js https://example.com --new
```

Navigate current tab or open new tab.

## Evaluate JavaScript

```bash
~/.factory/skills/browser/eval.js 'document.title'
~/.factory/skills/browser/eval.js 'document.querySelectorAll("a").length'
```

Execute JavaScript in active tab (async context).

**IMPORTANT**: The code must be a single expression or use IIFE for multiple statements:

- Single expression: `'document.title'`
- Multiple statements: `'(() => { const x = 1; return x + 1; })()'`
- Avoid newlines in the code string - keep it on one line

## Screenshot

```bash
~/.factory/skills/browser/screenshot.js
```

Screenshot current viewport, returns temp file path.

## Pick Elements

```bash
~/.factory/skills/browser/pick.js "Click the submit button"
```

Interactive element picker. Click to select, Cmd/Ctrl+Click for multi-select, Enter to finish.

## Usage Notes

- Start Chrome first before using other tools
- The `--profile` flag syncs your actual Chrome profile so you're logged in everywhere
- JavaScript evaluation runs in an async context in the page
- Pick tool allows you to visually select DOM elements by clicking on them

```

## ワークフローレシピ

1. **Chromeを開始** - `start.js --profile`で認証状態をミラーリングします。
2. **ナビゲーション操作** - `nav.js https://target.app`でナビゲートするか、`--new`でセカンダリタブを開きます。
3. **DOMを検査** - `eval.js`を使用してクイックカウント、属性チェック、またはJSONペイロードの抽出を行います。
4. **アーティファクトをキャプチャ** - 視覚的証拠のために`screenshot.js`を使用するか、正確なセレクタやテキストスナップショットが必要な場合は`pick.js`を使用します。
5. **収集した証拠を返す** - セッションサマリーまたはPR説明に、ファイルパス、DOMメタデータ、クエリ出力を含めます。

このワークフローにより、エージェントは現在のブラウジングコンテキストに集中し、生の認証情報やクッキーをマシンの外に送信することを回避できます。

## 検証

- `~/.factory/skills/browser/start.js --profile`は`✓ Chrome started on :9222 with your profile`を出力するはずです。
- `~/.factory/skills/browser/nav.js https://example.com`はナビゲーションを確認するはずです。
- `~/.factory/skills/browser/eval.js 'document.title'`は現在のページタイトルを表示するはずです。
- `~/.factory/skills/browser/screenshot.js`はシステム一時ディレクトリ下の有効なPNGパスを出力するはずです。

いずれかのステップが失敗した場合は、`start.js`を再実行し、Chromeが`localhost:9222/json/version`でリッスンしていることを確認し、`puppeteer-core`がインストールされていることを確認してください。
```