作業の途中で rate limit に阻まれる瞬間は、おそらく Claude ユーザーにとって最も煩わしいときだろう。
私のもともとの習慣は、阻まれてから Settings ページに使用量を見に行くことだった。そしてようやく、追加使用量がすでに 84%、七日間使用量も半分を超えていることに気づく。それで思った——この数字が画面上に出ていたらどんなにいいか、と。
だから私はこれを解決するために Chrome 拡張機能を作った。「Claude 用量喵喵」という名前で、ツールバーに茶トラが一匹しゃがんでいて、クリックすればどれだけの枠を使ったかが分かる。
何をするものか
インストールすると、三つの場所で使用量を確認できる。
ツールバーの茶トラの icon には小さな badge が表示され、四秒ごとに自動で切り替わる——五時間 session をどれだけ使ったか、七日間でどれだけ使ったか、追加 credits がどれだけ残っているか、リアルタイムの費用がいくらか。緑は安全、黄は注意、橙はもうすぐ、赤は限界間近を意味する。何も開かなくても、一瞥するだけで分かる。
popup を開くと、完全な使用量カードが見える。上半分は Anthropic 公式の数字だ——五時間 session のパーセンテージ、七日間使用量のパーセンテージ、追加使用量の使用済み量と上限、それぞれにリセットまでのカウントダウンが付いている。下半分はリアルタイムの token 追跡——さっきの会話で input token をどれだけ使ったか、output token をどれだけ使ったか、いくらかかったか、どのモデルを使ったか、すべて並んでいる。
claude.ai のページの右下には、半透明のフローティングステータスバーが常駐し、使用量の概要を表示し続ける。猫の頭をクリックすれば畳める。
popup を開いた完全な画面：上半分は公式の使用量、下半分はリアルタイムの token 追跡。
二つの経路で、差異を見る
このツールが他の追跡ツールと最も違うのは、二つのデータ経路を同時に走らせている点だ。
一つ目は公式のものだ。拡張機能は五分ごとに claude.ai の usage API を呼び出し、返ってくる数字は自分で Settings ページを見に行ったものとまったく同じだ。この数字は権威あるものだが、遅延がある——Anthropic 側の更新はリアルタイムではなく、明らかにすでにかなり使っているのに、パーセンテージが動かないこともある。
二つ目はリアルタイムの推算だ。拡張機能は claude.ai のページ内で、あなたが Claude と交わすたびの API 呼び出しをインターセプトし、request が送信されるときに input token を推定し、response が streaming で返ってくるときに output token を累積し、モデルの価格に基づいて費用を計算する。これはリアルタイムだが推定値であり、公式の数字とは誤差が出る。
両者を並べて置くことで、公式のパーセンテージと自分が実際に燃やした token がどれだけ違うかを、自分の目で観察できる。このツールを作った目的の一つは、まさにこの差異を可視化することだった。
手を動かす前に、まず一通り調べた
プログラムを書き始める前に、私は市場の既存ツールを調査した。
結果、この種の小さなツールはすでに数多く存在し、私が見つけただけでも十個を超えた。だがそのほとんどは macOS のネイティブ app で、.dmg をダウンロードしてインストールする必要があり、Windows と Linux のユーザーには選択肢がない。しかも大部分は公式使用量追跡かリアルタイム token 計算のどちらか一方しか作っておらず、両方を一緒にまとめた者は誰もいなかった。すべてのインターフェースは英語で、アジア市場にはローカライズされた選択肢がまったくなかった。
だから私の位置づけは明確だった——Chrome 拡張機能にしてクロスプラットフォームにし、二つの経路を同時に走らせ、中国語を優先する。後に英語と日本語のインターフェースも加えた。Chrome はブラウザの言語に応じて自動で切り替えてくれる。
開発過程で嵌まったいくつかの落とし穴（技術に興味がなければ読み飛ばしてよい）
開発全体は Claude との対話で完成させたが、その過程は順風満帆ではなかった。
一つ目の落とし穴は API のフォーマットだった。Anthropic の usage API には公開ドキュメントがなく、私はフォーマットを推測するしかなかった。最初に接続したとき、popup には生の JSON がどさっと吐き出された。だがこの JSON 自体が答えだった——five_hour.utilization、seven_day.resets_at といったフィールド名を見た瞬間に、どう解析すればいいかすぐ分かった。だから “Claude” は popup の中にわざと debug モードを残しておいた——解析に失敗すれば生の JSON をそのまま表示する。こうすれば将来 API のフォーマットが変わっても素早く直せる。
二つ目の落とし穴はもっと興味深い。Chrome 拡張機能の content script は isolated world と呼ばれる隔離された環境で動く。私はその中で window.fetch を patch して claude.ai の API 呼び出しをインターセプトしようとしたが、何もインターセプトできなかった。少し時間をかけてようやく分かった——isolated world の window とページ本体の window は別のオブジェクトなのだ。解決策は Chrome MV3 の world: “MAIN” 設定を使い、インターセプトスクリプトを直接ページの context に注入し、さらに CustomEvent を通じてデータを isolated world のブリッジ層に戻すことだった。一つの問題を二層に分けて解決した。
三つ目の落とし穴は icon だった。三度作り直した——一版目は平凡すぎ、二版目は円形に収めたら猫に見えず、三版目では茶トラの写真を一枚参考として放り込み、「耳が外に開いていて、M 字の額紋がある」と指定して、ようやく雰囲気が出た。こういうことは仕様で記述するのが難しい。参考画像を一枚渡すほうが、百の言葉を費やすより役に立つ。
限界を先にはっきりさせておく
Anthropic の usage API には公開ドキュメントがなく、フォーマットはいつでも変わりうる。変わればこの拡張機能も追従して更新せねばならず、誰も保守しなければ壊れる。リアルタイム token は推定値であって、正確な数字ではない。英語はおよそ四文字で一 token、中国語はおよそ 1.5 文字で、これは Anthropic 実際の tokenizer とは差がある。
追跡するのは claude.ai のウェブ版のみだ。もしあなたが使っているのが Claude Code CLI なら、それは異なる経路を通るので、この拡張機能では取得できない。
拡張機能は API にアクセスするために claude.ai の session cookie を読み取る必要がある。すべてのデータはあなたのブラウザのローカルにのみ保存され、いかなる外部サーバーにも送信されず、完全にオープンソースだ。だが、どんな拡張機能であれインストール前に自分でリスクを判断するのは基本だ。
インストール方法はとても簡単だ——GitHub repo を clone し、Chrome の開発者モードを開き、フォルダを読み込む、この三ステップ。繁体字中国語、英語、日本語のインターフェースに対応している。
💬 コメント
読み込み中...