OpenCLI

任意の Web サイトを CLI コマンドとして操作 — Chrome ログインセッション再利用 + AI アダプター自動生成

1 — 概要

OpenCLI は、任意の Web サイトや Electron アプリを CLI コマンドとして操作できる Node.js 製ブラウザ自動化フレームワーク。Chrome の既存ログインセッション(Cookie)をそのまま再利用するため、OAuth や API キーの管理が不要。AI によるアダプター自動生成機能で、新しいサイトへの対応を数秒で追加できる。

20+組み込みサイト
5認証ストラテジ
5出力フォーマット
TS 5.8言語
前提条件: Node.js ≥ 20、Chrome が起動済みでターゲットサイトにログイン済みであること。
extension/ フォルダを Chrome の開発者モードでロードするだけで Browser Bridge が有効になる。
2 — アーキテクチャ

CLI → デーモン(HTTP ブリッジ)→ Chrome 拡張 の 3 層構成。デーモンは初回ブラウザコマンド実行時に自動起動し、5 分アイドルで自動終了する。

flowchart TD User["ユーザー
opencli bilibili hot"] Main["main.ts
commander CLI"] Engine["engine.ts
アダプター探索・実行"] MCP["browser/mcp.ts
PlaywrightMCP"] Daemon["daemon.ts
localhost:19825"] Ext["Chrome 拡張
Browser Bridge"] Chrome["Chrome ブラウザ
既存セッション"] Output["output.ts
table / json / yaml / md / csv"] User -->|"opencli <site> <cmd>"| Main Main --> Engine Engine -->|"browserSession()"| MCP MCP -->|"デーモン自動起動"| Daemon Daemon <-->|"HTTP + WebSocket"| Ext Ext -->|"fetch / DOM 操作"| Chrome Chrome -->|"レスポンス"| Ext Ext --> Daemon Daemon --> MCP MCP -->|"IPage"| Engine Engine --> Output classDef cli fill:#e8f4f8,stroke:#0891b2,stroke-width:2px,color:#0a3055 classDef bridge fill:#f0f9f0,stroke:#059669,stroke-width:2px,color:#064e3b classDef chrome fill:#fff8e8,stroke:#d97706,stroke-width:2px,color:#78350f classDef out fill:#f5f5f5,stroke:#6b7280,stroke-width:1px,color:#374151 classDef user fill:#fef3c7,stroke:#d97706,stroke-width:2px,color:#92400e class User user class Main,Engine cli class MCP,Daemon bridge class Ext,Chrome chrome class Output out

新しいサイトへのアダプター追加時、opencli cascade <url> が以下の順で最小権限の認証戦略を自動探索する:

PUBLIC → COOKIE → HEADER → INTERCEPT → UI

Chrome の既存 Cookie を credentials: 'include' で透過的に使い回すため、トークン管理不要。

3 — デュアルエンジン

アダプターは YAML 宣言型TypeScript 命令型 の 2 方式で記述できる。同一フレームワークで統一管理される。

シンプルな API 取得向けの宣言的 DSL。テンプレートエンジン(${{ args.limit }})でパラメータ展開。

- navigate: https://www.bilibili.com/ranking/
- evaluate: |
    Array.from(document.querySelectorAll('.rank-item'))
      .map(el => ({
        title: el.querySelector('.title')?.textContent,
        plays: el.querySelector('.detail-state')?.textContent
      }))
- limit: ${{ args.limit }}

複雑なログインフロー・UI 操作向けの命令型コード。IPage を通じて DOM を直接操作。

cli({
  site: 'twitter',
  name: 'trending',
  strategy: Strategy.COOKIE,
  browser: true,
  func: async (page: IPage, kwargs) => {
    await page.goto('https://x.com/explore');
    return await page.evaluate(`
      Array.from(document.querySelectorAll(
        '[data-testid="trend"]'
      )).map(el => el.textContent)
    `);
  }
});
ステップ説明
navigate指定 URL へ移動
evaluateJavaScript を Chrome 上で評価し結果取得
fetchHTTP フェッチ(バッチ IPC 最適化あり)
click / type / waitUI インタラクション
map / filter / sort / limit / selectデータ変換
downloadファイルダウンロード
interceptネットワークリクエスト傍受
tapデバッグ用タップ(パイプラインを止めずにログ)
4 — CLI コマンド
コマンド説明
opencli list [-f fmt]登録済みコマンド一覧を表示
opencli <site> <cmd> [args]サイト別コマンド実行(例: opencli bilibili hot --limit 5
opencli explore <url> --site <name>AI による Web API 自動探索
opencli synthesize <target>探索結果から YAML アダプターを生成
opencli generate <url> --goal <text>explore + synthesize + 登録をワンショット実行
opencli cascade <url>認証戦略(PUBLIC→UI)を自動プローブ
opencli doctor [--live]ブリッジ接続・デーモン状態を診断
opencli setupインタラクティブ初期設定ウィザード

--format / -f で切り替え可能:

table json yaml md csv
opencli bilibili hot --limit 10 --format json
5 — IPage API

TypeScript アダプターから使う、Chrome 操作の統一インターフェース。HTTP POST でデーモンへコマンドを送り、Chrome 拡張が実際の DOM 操作を行う。

interface IPage {
  goto(url: string): Promise<void>;
  evaluate(js: string): Promise<unknown>;
  snapshot(opts?: SnapshotOptions): Promise<unknown>;
  click(ref: string): Promise<void>;
  typeText(ref: string, text: string): Promise<void>;
  networkRequests(includeStatic?: boolean): Promise<unknown>;
  installInterceptor(pattern: string): Promise<void>;
  screenshot(options?: ScreenshotOptions): Promise<string>;
}

ユーザー独自のアダプターは ~/.opencli/clis/.ts / .yaml ファイルを置くだけで自動登録される。ビルド時に cli-manifest.json を生成しておくことで、起動時のファイルスキャンコストをゼロにできる。

バッチ IPC 最適化: fetch ステップへの配列データは、N 回の HTTP POST を 1 回の page.evaluate() にまとめ IPC コストを大幅削減。