**Show HN：ユーザースクリプト用カーソル**

Browser Code
ユーザースクリプト用のコーディングエージェントで、独自にローダーを備えています。

Browser Code は、クロード（Claude）にウェブページを仮想ファイルシステムとして可視化するブラウザ拡張機能です。

chrome.userScripts

動作概要

• ページはファイルシステムとして扱われる – DOM は

  page.html

  、コンソール出力は

  console.log

  となります。

  ./scripts/

  にスクリプトを、

  ./styles/

  にスタイルを作成できます。
• スクリプトは userScripts API 経由で永続化 – 保存されたスクリプトは Chrome や Firefox の等価機能に登録され、CSP 制限を回避します。
• URL が一致すれば自動実行 – スクリプトは保存した URL パターンにマッチするページの読み込み時に実行されます。

  /products/[id]

  などの動的ルートもサポート。

アーキテクチャ

┌───────────────────────────────────────────────────────────────┐
│                      ブラウザ拡張機能                       │
├───────────────────────────────────────────────────────────────┤
│  ┌───────────────────────────────────────────────────────┐  │
│  │            バックグラウンドサービスワーカー           │  │
│  │ • Claude API クライアント（エージェンティックループ）   │  │
│  │ • userScripts 登録と CSP バイパス                         │  │
│  │ • タブごとの会話履歴                                     │  │
│  │ • VFS ストレージの調整                                   │  │
│  └───────────────────────────────────────────────────────┘  │
│                        ↕                                    │
│  ┌───────────────────────────────────────────────────────┐  │
│  │                    コンテントスクリプト                 │  │
│  │ • 仮想ファイルシステム（VFS）の実装                      │  │
│  │ • DOM ↔ HTML シリアライズとバージョン管理                │  │
│  │ • スクリプトはメインスレッドで実行                        │  │
│  │ • コンソールの傍受                                          │  │
│  └───────────────────────────────────────────────────────┘  │
│                        ↕                                    │
│  ┌───────────────────────────────────────────────────────┐  │
│  │                サイドバー・パネル（React）             │  │
│  │ • チャット UI とツールコールの可視化                       │  │
│  │ • Plan/Execute モード切替                                 │  │
│  │ • ファイルブラウザとローカル同期                           │  │
│  └───────────────────────────────────────────────────────┘  │
└───────────────────────────────────────────────────────────────┘

仮想ファイルシステム（VFS）

すべてのウェブサイトは次のような仮想ファイル構造で表現されます。

/{domain}/{url-path}/
├── page.html            # ライブ DOM（読み取り／編集でミューテーションをトリガ）
├── console.log          # キャプチャされたコンソール出力（読み取り専用）
├── screenshot.png      # 必要時にページをキャプチャ
├── plan.md              # エージェントの計画（Plan モード）
├── scripts/
│   ├── my-script.js     # あなたが作成したスクリプト（永続化、auto‑run）
│   └── _auto_edits.js  # DOM 編集から生成
└── styles/
    └── custom.css       # あなたのスタイル（永続化、auto‑inject）

バージョン管理

ファイルにはバージョン番号が付与され、楽観的同時実行制御を行います。エージェントは編集前にファイルを読み取り、そのバージョンを保持します。DOM が変更された場合、編集はバージョン不一致で失敗します。

動的ルートマッチング

/products/[id]

/docs/[...slug]

window.__routeParams

/products/[id]

/products/123

{ id: "123" }

/users/[userId]/posts/[postId]

/users/5/posts/42

{ userId: "5", postId: "42" }

/docs/[...path]

/docs/api/auth/oauth

{ path: ["api","auth","oauth"] }

ルートパラメータはスクリプト実行前に

window.__routeParams

Plan / Execute ワークフロー

1. Plan モード（デフォルト） – エージェントがページを探索し、ファイルを読み取り、

   plan.md

   に変更案を提案。DOM の変更やスクリプトの書き込みは行いません。
2. Execute モード – ユーザーの承認後、エージェントは計画を実行：ファイルを書き込み、DOM を編集し、スクリプトを走らせます。

この二段階プロセスにより、意図しない変更を防止します。

ローカルファイル同期

• Chrome：一度ディレクトリを選択すれば、双方向同期が可能です。VS Code で編集するとブラウザに反映されます。
• Firefox：ダウンロード API を介してエクスポートのみです。スクリプトは設定したフォルダーへダウンロードされます。

競合解決は「最新が勝つ」か、ユーザー選択で行います。

エージェントツール

Read

Edit

Write

Glob

./scripts/*.js

Grep

Bash

./scripts/foo.js

Ls

Screenshot

Todo

インストール方法

Chrome

1. 拡張機能をビルド（以下参照）またはリリース版をダウンロード。

2. chrome://extensions

   を開く。
3. 「デベロッパーモード」を有効にする。
4. Load unpacked →

   .output/chrome-mv3/

   を選択。
5. 拡張機能の詳細へ進み、User scripts パーミッションをオン（CSP バイパスに必要）。

Firefox

1. 拡張機能をビルド（以下参照）。

2. about:debugging#/runtime/this-firefox

   を開く。
3. Load Temporary Add‑on →

   .output/firefox-mv2/

   内の任意ファイルを選択。

ビルド手順

bun install

# 開発モード
bun run dev          # Chrome 用
bun run dev:firefox  # Firefox 用

# 本番ビルド
bun run build        # 両ブラウザ共通
bun run zip          # 配布 ZIP を作成

注意点

• CSP バイパスには「User scripts」権限が必要です。LinkedIn のように厳しい CSP があるサイトでは、拡張設定で許可を有効化してください。
• Trusted Types：一部サイトは

  innerHTML

  をサニタイズします。その場合は DOM API（例：

  createElement

  ）を使う必要があります。
• Firefox ではファイル同期がエクスポートのみのため、双方向同期は利用できません。

技術詳細

• ストレージ – VFS データは

  browser.storage.local

  に

  vfs:{domain}

  キーで保存。各ドメインはパス → スクリプト／スタイルを保持。
• スクリプト登録 – ストレージ変更時、バックグラウンドが

  chrome.userScripts.register()

  を呼び出し、VFS パスからマッチパターンを生成して再登録します。
• CSP バイパス –

  userScripts

  API はカスタムワールド（

  script-src 'self' 'unsafe-inline' 'unsafe-eval'

  ）を設定し、制限を緩和します。
• DOM シリアライズ –

  page.html

  で読み取ると完全なドキュメントがシリアライズされます。書き込み時は現在の DOM と差分を計算し、最小限のミューテーションのみ適用します。