OpenCLI
任意の Web サイトを CLI コマンドとして操作 — Chrome ログインセッション再利用 + AI アダプター自動生成
OpenCLI は、任意の Web サイトや Electron アプリを CLI コマンドとして操作できる Node.js 製ブラウザ自動化フレームワーク。Chrome の既存ログインセッション(Cookie)をそのまま再利用するため、OAuth や API キーの管理が不要。AI によるアダプター自動生成機能で、新しいサイトへの対応を数秒で追加できる。
extension/ フォルダを Chrome の開発者モードでロードするだけで Browser Bridge が有効になる。
CLI → デーモン(HTTP ブリッジ)→ Chrome 拡張 の 3 層構成。デーモンは初回ブラウザコマンド実行時に自動起動し、5 分アイドルで自動終了する。
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> が以下の順で最小権限の認証戦略を自動探索する:
Chrome の既存 Cookie を credentials: 'include' で透過的に使い回すため、トークン管理不要。
アダプターは 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 へ移動 |
evaluate | JavaScript を Chrome 上で評価し結果取得 |
fetch | HTTP フェッチ(バッチ IPC 最適化あり) |
click / type / wait | UI インタラクション |
map / filter / sort / limit / select | データ変換 |
download | ファイルダウンロード |
intercept | ネットワークリクエスト傍受 |
tap | デバッグ用タップ(パイプラインを止めずにログ) |
| コマンド | 説明 |
|---|---|
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 で切り替え可能:
opencli bilibili hot --limit 10 --format jsonTypeScript アダプターから使う、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 を生成しておくことで、起動時のファイルスキャンコストをゼロにできる。
fetch ステップへの配列データは、N 回の HTTP POST を 1 回の page.evaluate() にまとめ IPC コストを大幅削減。
- GitHub: jackwener/opencli — 本体リポジトリ(TypeScript / Node.js)
- npm: @jackwener/opencli — インストール:
npm install -g @jackwener/opencli - 組み込みアダプター一覧 — bilibili / twitter / cursor / chatgpt / notion / discord 等 20+ サイト
- CDP.md — Chrome DevTools Protocol 活用ガイド
- CLI-ELECTRON.md — Electron アプリへの対応方法