工作到一半被 rate limit 擋下來,大概是 Claude 使用者最煩的時刻。
我原本的習慣,是到被擋了才去 Settings 頁面看用量,然後才發現額外用量已經 84%、七天用量也過半了。就想,這個數字如果可以在畫面上該多好?
所以我做了一個 Chrome Extension 來解決這件事。叫「Claude 用量喵喵」,工具列上蹲著一隻橘虎斑,點一下就知道用多少額度。
它做什麼
裝上之後有三個地方可以看到用量:
工具列上的橘貓 icon 會顯示一個小 badge,每四秒自動輪播切換:五小時 session 用了多少、七天用了多少、額外 credits 剩多少、即時花費多少錢。綠色代表安全,黃色要注意,橘色快到了,紅色快爆了。不用點開任何東西,瞄一眼就知道。
點開 popup 會看到完整的用量卡片。上半部是 Anthropic 官方的數字:五小時 session 百分比、七天用量百分比、額外用量的已用跟上限,每一項都有重置倒數。下半部是即時 token 追蹤:你剛才那則對話用了多少 input token、多少 output token、花了多少錢,用的是哪個模型,全部列出來。
claude.ai 頁面的右下角還有一條半透明的浮動狀態條,常駐顯示用量摘要。點貓頭可以收合。
popup 點開的完整畫面:上半部是官方用量,下半部是即時 token 追蹤。
兩條管道,看差異
這個工具跟其他追蹤器最不同的地方是它同時跑兩條資料管道。
第一條是官方的。Extension 每五分鐘去呼叫一次 claude.ai 的 usage API,拿回來的數字跟你自己去 Settings 頁面看的一模一樣。這個數字是權威的,但有延遲:Anthropic 那邊的更新不是即時的,有時候你明明已經用了很多,百分比還是不動。
第二條是即時推算的。Extension 會在 claude.ai 的頁面裡攔截每一次你跟 Claude 對話的 API 呼叫,在 request 送出去的時候估算 input token,在 response streaming 回來的時候累加 output token,再根據模型價格算費用。這個是即時的,但是估算值,跟官方數字會有誤差。
兩者並排放在一起,你可以自己觀察官方的百分比跟你實際燒掉的 token 差多少。做這個工具的目的之一就是讓這個差異可見。
動手之前先查了一圈
在開始寫程式之前,我有先調查市場上現有的工具。
結果是這個小工具已經很多,光我找到的就超過十個。但幾乎全部都是 macOS 的原生 app,要下載 .dmg 安裝,Windows 跟 Linux 使用者沒得選。而且大部分只做官方用量追蹤或即時 token 計算其中一個,沒有人把兩個放在一起。所有介面都是英文,亞洲市場完全沒有在地化的選項。
所以我的定位就很明確了:做成 Chrome Extension 讓它跨平台、兩條管道同時跑、中文優先。後來還加了英文和日文的介面,Chrome 會根據瀏覽器語言自動切換。
開發過程踩到的幾個坑(對技術沒興趣可直接省略)
整個開發我是跟 Claude 對話完成的,過程不是一帆風順。
第一個坑是 API 格式。Anthropic 的 usage API 沒有公開文件,我只能猜格式。第一次接上去,popup 噴出一坨 raw JSON。但這坨 JSON 本身就是答案:我看到 five_hour.utilization、seven_day.resets_at 這些欄位名稱,馬上就知道怎麼解析了。所以 “Claude” 故意在 popup 裡留了一個 debug 模式:如果解析失敗就直接顯示原始 JSON,這樣未來 API 格式變了也能快速修。
第二個坑比較有趣。Chrome Extension 的 content script 跑在一個叫 isolated world 的隔離環境裡,我在裡面 patch 了 window.fetch 想攔截 claude.ai 的 API 呼叫,結果什麼都攔截不到。花了一點時間才搞清楚:isolated world 的 window 跟頁面本身的 window 是不同的物件。解法是用 Chrome MV3 的 world: “MAIN” 設定,把攔截腳本直接注入到頁面的 context 裡,再透過 CustomEvent 把資料傳回 isolated world 的橋接層。一個問題拆成兩層解決。
第三個坑是 icon。迭代了三版:第一版太普通,第二版塞進圓形裡看不出是貓,第三版我丟了一張橘虎斑的照片當參考,指定要「耳朵往外張開、有 M 字額紋」,才對味。這種事很難用規格描述,給一張參考圖比說一百句有用。
限制先說清楚
Anthropic 的 usage API 沒有公開文件,格式隨時可能改。改了這個 Extension 就要跟著更新,沒人維護就會壞。即時 token 是估算值,不是精確數字。英文大約四個字元一個 token,中文大約 1.5 個字元,這跟 Anthropic 實際的 tokenizer 有落差。
只追蹤 claude.ai 網頁版。如果你用的是 Claude Code CLI,那走的是不同的通道,這個 Extension 抓不到。
Extension 需要讀取 claude.ai 的 session cookie 來存取 API。所有資料只存在你的瀏覽器本機,不傳到任何外部伺服器,完整開源。但裝任何 Extension 之前自己判斷風險是基本的。
安裝方式很簡單:clone GitHub repo、Chrome 開發者模式、載入資料夾,三步。支援繁中、英文、日文介面。
💬 留言討論
載入中...