AI-Chain
AI 工具指南 OpenCLI AI 開源

把任何網站變成 CLI：OpenCLI 如何用 184K 星證明 LLM 不需要解析原始 DOM

OpenCLI 讓你用 CLI 指令操作 100+ 網站，LLM 不用解析原始 DOM 就能自動化網頁操作，還可透過 Chrome 擴充功能重用你的登入狀態，不再需要每次重新 login。

分享:
把任何網站變成 CLI：OpenCLI 如何用 184K 星證明 LLM 不需要解析原始 DOM

把任何網站變成 CLI：OpenCLI 如何用 184K 星證明 LLM 不需要解析原始 DOM

前言：我對瀏覽器自動化的偏見

過去這一年，我寫了無數個 Playwright 腳本。從社群自動化到數據爬取，從表單填寫到監控報警。Playwright 很好用，但有個隱形成本我越來越受不了——每次都要重新理解 DOM 結構。

當我接到一個新案子，不管之前做過類似的，我還是得：

  1. 打開瀏覽器開發者工具
  2. 找對選擇器（CSS selector 或 XPath）
  3. 處理動態載入、懶加載、SPA 切換
  4. 寫一長串 .click(), .fill(), .waitForSelector()

然後呢？網站改版。選擇器失效。腳本掛了。

所以我開始想：如果網站能自己告訴 LLM「我是誰、我有哪些功能、我長怎樣」，不就不需要解析原始 DOM 了嗎？

直到我發現 OpenCLI。

OpenCLI 是什麼？

OpenCLI 的官方定位很明確：「把任何網站、瀏覽器工作階段、Electron 應用程式、本機工具轉換成確定性介面」。

聽起來很抽象？舉幾個具體例子：

# 列出所有可用的命令
opencli list

# 直接抓 HackerNews 熱門帖子
opencli hackernews top --limit 5

# 抓小紅書熱門筆記
opencli xiaohongshu hot --limit 10

# 讓 AI Agent 操作你登入的瀏覽器
opencli browser work open https://your-banking-site.com

它有三個核心能力：

  1. 內建適配器——支援 Bilibili、知乎、小紅書、Reddit、HackerNews、Twitter/X 等 103 個網站
  2. AI Agent 瀏覽器控制——安裝 skill 後，Claude Code、Cursor 等 AI 代理可以透過你登入的 Chrome 操作任何網頁
  3. 自訂適配器開發——用 opencli adapter-author skill 可以從頭寫一個網站適配器

為什麼它和 Playwright 不同？

這是我最想說的重點。

傳統瀏覽器自動化工具（Playwright、Selenium）的工作方式是：

  • LLM 或程式碼解析原始 HTML
  • 找 DOM 元素
  • 操作元素

OpenCLI 的工作方式是：

  • 網站自己定義好結構化的輸出格式
  • LLM 直接讀 JSON，不用看 DOM
  • 操作是確定的指令，不是猜測的選擇器

這意味著什麼？

省 token。

不是省一點，是省很多。因為：

  • 不用傳原始 HTML 給 LLM
  • LLM 看到的是結構化資料（JSON Schema）
  • 每次操作的 input/output 是固定的，不用每次重新理解頁面

我在自己的 pipeline 裡體驗過，prompt/token 用量體感少很多（沒做正式 benchmark，但差異明顯）。

實際使用場景

場景一：社群自動化

我的日常流程是每天在 X、Threads、Facebook 三平台發文。以前用 Playwright 的痛點是：

  • 每次要重新 login
  • 要處理 cookie/token 存儲
  • 網站改版後腳本常掛

用 OpenCLI 後：

# 發推文（會自動上傳媒體）
opencli twitter post --images hero.png "今天分享一個好用工具..."

# 一次發 1-4 篇 Threads 長文
opencli threads post --texts-file t.json --images hero.png --limit 4

# 用 ChatGPT 免費生封面圖（不走 API quota）
opencli chatgpt image "生一張科技風格的封面圖"

# 用 Gemini 做 advisor review（不走 API quota）
opencli gemini ask "幫我 review 這篇文章的大綱"

重點是：它接你已經登入的 Chrome 工作階段（透過 Chrome 擴充功能），重用你瀏覽器現有的 cookie/session，不用重 login、不外存 credential。

我把 X、Threads、FB 三個帳號駁進去，沒寫過任何 cookie/token 處理邏輯。

場景二：讓 AI Agent 操作任何網站

這是 OpenCLI 最強大的地方。安裝 opencli-browser skill 後，你的 AI Agent 可以：

  1. 導航——用你登入的瀏覽器打開任何 URL
  2. 閱讀——透過結構化 DOM snapshot 讀頁面內容（不是截圖）
  3. 互動——點擊按鈕、填寫表單、選選項、按鍵
  4. 擷取——從頁面擷取資料或攔截網路 API 回應
  5. 等待——等待元素、文字或頁面切換

你只需要用自然語言描述你想做的事，AI Agent 會自己處理所有 opencli browser 指令。

場景三：開發自訂適配器

如果你需要的網站不在內建支援清單裡，可以用 opencli-adapter-author skill 從頭寫一個：

  1. 偵察網站結構，選擇模式（SPA/SSR/JSONP/Token/Streaming）
  2. 發現正確的 API 端點（網路檢查、初始狀態、bundle 搜尋、token 追蹤、攔截器後援）
  3. 選擇認證方式——PUBLIC/COKIE/INTERCEPT/UI/LOCAL
  4. 解碼回應欄位，設計輸出欄位
  5. opencli browser recon analyze <url> → opencli browser recon init <site>/<name> → 寫適配器 → opencli browser recon verify <site>/<name>

寫完後，網站知識會持久化到 ~/.opencli/sites/<site>/，下次為同一個網站寫適配器時可以直接從上下文開始。

安裝與上手

1. 安裝 OpenCLI

選項 A：OpenCLIApp（推薦，適合 macOS/Windows）

從 <https://opencli.info/download> 下載安裝，開啟後在 System 頁面安裝或修復 opencli 指令。

選項 B：npm 全域安裝（適合 CLI/CI/伺服器）

需要 Node.js >= 20：

node --version
npm install -g @jackwener/opencli

2. 安裝瀏覽器橋接擴充功能

OpenCLI 透過輕量級 Browser Bridge 擴充功能和本機 daemon 連接 Chrome/Chromium。

選項 A：Chrome 線上應用程式商店（推薦）

從 Chrome Web Store 安裝 OpenCLI。

選項 B：手動安裝

  1. 從 GitHub Releases 頁面 下載最新 opencli-extension-v{version}.zip
  2. 解壓，開啟 chrome://extensions，啟用開發者模式
  3. 點擊載入未封裝項目，選擇解壓後的資料夾

3. 驗證安裝

opencli doctor

4. 命名你的 Chrome 設定檔（可選）

如果你用多個 Chrome 設定檔，可以列出連線的設定檔並指定本機別名：

opencli profile list
opencli profile rename <contextId> work
opencli profile use work

5. 執行第一個指令

opencli list
opencli hackernews top --limit 5
opencli bilibili hot --limit 5

6. 安裝 AI Agent Skills（可選）

如果你要用 AI Agent 操作瀏覽器：

# 安裝所有 skills
npx skills add jackwener/opencli

# 或只安裝需要的
npx skills add jackwener/opencli --skill opencli-browser
npx skills add jackwener/opencli --skill opencli-adapter-author
npx skills add jackwener/opencli --skill opencli-autofix

內建支援的網站

OpenCLI 目前支援 103 個網站，包括：

| 網站 | 支援的指令 |

|------|-----------|

| 小紅書 | search ask note comments feed user download publish follow unfollow notifications creator-notes creator-notes-summary creator-note-detail creator-profile creator-stats |

| Bilibili | hot search history feed ranking download comments dynamic favorite following follow unfollow me subtitle summary video user-videos |

| 知乎 | hot search question download follow like favorite comment answer |

| HackerNews | top new best ask show jobs search user |

| Twitter/X | post reply quote retweet like bookmark timeline profile search media list |

| LinkedIn | connect inbox job-detail jobs-preferences post-analytics posts profile network |

| GitHub | issues prs repos stars followers following trending search code |

完整清單請參考官方文件：<https://opencli.info/docs/commands>

限制與缺點

不是沒有坑。以下是我實際使用後發現的限制：

  1. Threads 適配器是自訂的——不在 upstream 的 103 個內建適配器裡。如果你要用 Threads，可能需要自己寫或等 upstream 支援。
  2. ChatGPT 繁中 UI 的 aria-label 寫死英文——本機 patch 過一版才能正常使用。
  3. 依賴 Chrome 擴充功能——需要 Chrome/Chromium 瀏覽器，且要安裝擴充功能。無頭瀏覽器（headless）可能有限制。
  4. 網站改版可能失效——雖然有 opencli-autofix skill 可以修復，但畢竟是逆向工程，網站大幅改版可能還是會掛。
  5. 社群自動化可能違反服務條款——使用前請確認各平台的 TOS，避免帳號被禁。

哪些團隊適合先試？

  1. 社群運營團隊——需要同時操作多個平台（X、Threads、FB、LinkedIn）
  2. AI Agent 開發者——需要讓 AI 操作登入的瀏覽器
  3. 資料擷取團隊——需要穩定、結構化的網站資料輸出
  4. 開發者工具愛好者——喜歡用 CLI 操作一切

結論

OpenCLI 解決了瀏覽器自動化的兩個核心痛點：

  1. 不要每次重 login——重用你瀏覽器現有的 cookie/session
  2. 不要燒 API quota——透過 web account 操作，不走 API

它把這兩件一起解了，而且是用確定性介面的方式，不是解析原始 DOM。

如果你也在搞社群自動化或 AI agent 自動化網站，蠻建議玩玩看。6 週累計 89 個 release，補洞積極，值得關注。

參考資料