Site Sense

site-sense

AI コーディング CLI に Web ポータルを見る目を与えます。クラウド不要。保存なし。読み取り専用です。

AI アシスタントと会話しているとします。「Azure Portal に移動して、NSG のルールを確認してください」と言われます。Alt キーを押しながら Tab キーを押して画面を切り替え、移動して、スクリーンショットを撮り、見えている内容を説明して、貼り付けます。あなたが人間のミドルウェアになっているのです。

site-sense がこの手間をなくします。 AI が MCP ツールを呼び出す → ブラウザー拡張機能がアクティブなタブをキャプチャする → AI があなたと同じ画面を見られます。

クイックスタート

オプション A：Chrome ウェブストアからインストール（推奨）

1. Chrome ウェブストアから site-sense をインストール
2. リポジトリをクローンしてセットアップを実行します。

git clone https://github.com/NordmanLive/site-sense.git
cd site-sense
npm install && npm run build
npm run setup -- --browser chrome    # or edge

オプション B：パッケージ化されていない拡張機能を読み込む（開発用）

git clone https://github.com/NordmanLive/site-sense.git
cd site-sense
npm install && npm run build
npm run setup -- --browser chrome    # or edge

次に、拡張機能を手動で読み込みます。

1. edge://extensions（または chrome://extensions）を開きます
2. デベロッパー モードを有効にします
3. パッケージ化されていない拡張機能を読み込むをクリックし、dist/extension/ を選択します

CLI の MCP 設定に追加します。

{
  "mcpServers": {
    "site-sense": {
      "command": "node",
      "args": ["/path/to/site-sense/dist/bridge/src/index.js"]
    }
  }
}

次に、AI に**「ブラウザーのタブには何が表示されていますか？」**と尋ねます。

初回はポップアップが表示されるので、許可をクリックすれば完了です。それ以降のキャプチャは、ターミナルを閉じるまで自動で行われます。

仕組み

CLI (Claude Code / Copilot CLI)
    ↕ stdin/stdout (MCP protocol)
MCP Server (TypeScript)
    ↕ Unix domain socket (no network)
Native Host (thin relay)
    ↕ Chrome native messaging (stdio)
Extension (TypeScript, Manifest V3)
    ↕ inject → content → background
Browser Tab → accessibility tree + screenshot

2 つの MCP ツール：

ツール	機能
site_sense_capture	アクティブなタブのアクセシビリティツリーとスクリーンショットを取得します
site_sense_status	接続とセッションの承認状態を確認します

権限モード

モード	動作	インストール時の警告
デフォルト	ページごとに拡張機能アイコンをクリックしてアクセスを許可します	なし
全サイト	ポップアップで切り替えると、どのページでもキャプチャできます	初回のみ表示

CLI セッションが終了すると、全サイトの権限は取り消されます。

セキュリティ

原則	方法
ネットワーク通信なし	ネイティブメッセージング（stdio）— DLP から見えません
保存なし	メモリのみ — CLI の接続が切れると消去されます
書き込み操作なし	ページのクリック、入力、変更は一切行いません
広範な権限なし	activeTab + scripting + nativeMessaging
シークレットをキャプチャしない	フォームの値をスキップし、URL トークンを除去します
セッション単位	CLI セッションごとに権限がリセットされます

脅威モデルと DLP 準拠については、SECURITY.md を参照してください。

アーキテクチャ

3 層の拡張機能パイプライン：

層	コンテキスト	役割
Inject	ページ（world: MAIN）	DOM を走査し、簡潔なアクセシビリティツリーを構築します
Content	分離環境	postMessage を介してキャプチャを中継します（オリジンを検証）
Background	サービスワーカー	ネイティブメッセージング、セッション状態、スクリーンショットを処理します

技術スタック

コンポーネント	技術
拡張機能	TypeScript + Vite
MCP サーバー	TypeScript + @modelcontextprotocol/sdk + zod
テスト	vitest — 10 件のテスト、1 秒未満
バンドル	拡張機能は 9KB、依存関係は合計 7 個

トラブルシューティング

症状	対処方法
connected: false	拡張機能が読み込まれていないか、ID が一致していません。edge://extensions を確認してください。
Cannot capture	http:// または https:// のページに移動してください。
コンテンツスクリプトが応答しない	ページで拡張機能アイコンをクリックするか、全サイトモードを有効にしてください。
拡張機能アイコンがグレー表示される	edge://extensions で拡張機能を再読み込みしてください。

ドキュメント

ドキュメント	用途
SECURITY.md	脅威モデル、DLP 準拠

ライセンス

Apache-2.0