# Claude の使用量を追跡する Chrome 拡張機能を作った > 公式の使用量 API とリアルタイムの token インターセプトを同時に走らせる Chrome 拡張機能の開発記録。市場調査から三言語の国際化まで、その全工程を綴る。 - Author: Paul Kuo（郭曜郎） - Date: 2026-03-19 - Pillar: 知性と秩序 / Intelligence & Order - Tags: Chrome Extension, Claude, AI協働開発, 開発ドキュメンタリー - Canonical: https://paulkuo.tw/ja/articles/claude-usage-nyan-chrome-extension/ - Language: Japanese (日本語) - Translation: AI-translated from the zh-Hant (Traditional Chinese) original - Original (zh-Hant): https://paulkuo.tw/articles/claude-usage-nyan-chrome-extension.md - Site index for LLMs: https://paulkuo.tw/llms.txt --- 作業の途中で rate limit に阻まれる瞬間は、おそらく Claude ユーザーにとって最も煩わしいときだろう。
▶ 要約を聴く
AI合成音声・著者本人の声のクローン
私のもともとの習慣は、阻まれてから Settings ページに使用量を見に行くことだった。そしてようやく、追加使用量がすでに 84%、七日間使用量も半分を超えていることに気づく。それで思った。この数字が画面上に出ていたらどんなにいいか、と。 だから私はこれを解決するために Chrome 拡張機能を作った。「Claude 用量喵喵」という名前で、ツールバーに茶トラが一匹しゃがんでいて、クリックすればどれだけの枠を使ったかが分かる。 ## 何をするものか インストールすると、三つの場所で使用量を確認できる。 ツールバーの茶トラの icon には小さな badge が表示され、四秒ごとに自動で切り替わる。五時間 session をどれだけ使ったか、七日間でどれだけ使ったか、追加 credits がどれだけ残っているか、リアルタイムの費用がいくらか。緑は安全、黄は注意、橙はもうすぐ、赤は限界間近を意味する。何も開かなくても、一瞥するだけで分かる。 popup を開くと、完全な使用量カードが見える。上半分は Anthropic 公式の数字だ。五時間 session のパーセンテージ、七日間使用量のパーセンテージ、追加使用量の使用済み量と上限、それぞれにリセットまでのカウントダウンが付いている。下半分はリアルタイムの token 追跡。さっきの会話で input token をどれだけ使ったか、output token をどれだけ使ったか、いくらかかったか、どのモデルを使ったか、すべて並んでいる。 claude.ai のページの右下には、半透明のフローティングステータスバーが常駐し、使用量の概要を表示し続ける。猫の頭をクリックすれば畳める。 ![Claude 用量喵喵の popup インターフェース。公式の使用量とリアルタイム token 追跡を表示](/images/articles/claude-usage-nyan-popup.png) *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 の開発者モードを開き、フォルダを読み込む、この三ステップ。繁体字中国語、英語、日本語のインターフェースに対応している。 🔗 https://github.com/zarqarwi/claude-usage-nyan