はじめに
Claude Maxにサブスク登録し、Claudeなしのエンジニアライフが考えられなくなってきている今日この頃です。
ふと「Chromeの拡張機能で、Claude Maxの認証トークンでwebページをコンテキストにClaudeとチャットできるのってないのかな」と思い立ち、探してみるもなかなか見つかりません。
APIキーを使って従量課金してチャットできるものはいくつかありましたが、できるなら定額で使える認証トークンで従量課金を気にせず気軽にチャットしたいですよね。
「よし、Chrome拡張機能作ったことはないけど、練習も兼ねてVibeコーディングで作ってみよう！」
これがこの記事の動機になります。
用語
認証トークン
Claude Codeの /setup-token コマンドで発行できるトークン。
Claude Maxの定額サブスクリプションが必要。
APIキー
Anthropic Console で発行できるAPIキー。
従量課金制。
実装
テンプレート
こちらの開発入門を参考に進めました。
ReactではじめるChrome拡張開発入門
テンプレートがいくつかあり、開発入門に書いてあったこちらをそのまま採用。
GitHubの「Use this template」ボタンから自分のリポジトリを作成します。
Jonghakseo/chrome-extension-boilerplate-react-vite: Chrome Extension Boilerplate with React + Vite + Typescript
TypeScript + Reactのモダン構成です。
デフォルトで用意されているライブラリのバージョンがいくつか古い物があり、せっかくなので全部最新に上げることにしました。
マイナーバージョンが古いものは問題なく上がりましたが、メジャーバージョンが古いものもいくつかありました。
ほとんどはClaude Opus 4に頼んだらささっと上げてくれましたが、Tailwind CSSのバージョンを3系から4系にあげるのはかなり大変でした。
Opus4で何往復かラリーし、70000トークンくらい使ってようやく解決できました。
ライブラリをなるべく最新のものを使いたい場合は、そういう視点でテンプレートを選定するのが大事だなと感じました。
ここからUIの実装ですが、Claude Sonnet 4に指示したらほぼほぼ問題なく綺麗なUIが作れました。
Claudeとの繋ぎ込み
さて、ここが本記事の本題です。
Anthropic Consoleで発行する従量課金のAPIキーでなく、Claude MaxでCLIで発行する定額の認証トークンで繋ぎ込めるのか。
Claude Code Actionも認証トークンでできるようになったので、なにかしらいけるのではと思っていました。
1. @anthropic-ai/sdk ライブラリ
まずは公式のSDKです。
npmでインストールします。
"@anthropic-ai/sdk": "^0.57.0",
コンストラクタに apiKey と authToken があります。
import Anthropic from '@anthropic-ai/sdk';
const anthropic = new Anthropic({
apiKey: 'my_api_key',
authToken: 'my_auth_token',
});
const msg = await anthropic.messages.create({
model: "claude-opus-4-20250514",
max_tokens: 1024,
messages: [{ role: "user", content: "Hello, Claude" }],
});
console.log(msg);
apiKey の方はinvalid Tokenになりました。
authToken の方は認証トークンが使えるClaude Code Actionと似たパラメータ名のためいけそうに思いましたが、以下のエラーでダメでした。
OAuth authentication is currently not supported.
最近ClaudeのAPIがアクセス過多のようなので一時的に駄目か、あるいは将来的に対応予定なのかもしれません。
参考リンク
2. @anthropic-ai/claude-code ライブラリ
こちらは公式のClaude Codeのライブラリです。
npmでインストールします。
"@anthropic-ai/claude-code": "^1.0.62",
こちらはそもそもビルドがエラーで通りませんでした。
このSDKはNode.js環境用で child_process や fs ライブラリを使っており、Chrome拡張機能はブラウザ環境で実行されるため、使用できません。
参考リンク
3. Claude API
Claude APIをfetch関数で手で叩きます。
curlだとこのようになります。
curl https://api.anthropic.com/v1/messages \
--header "x-api-key: $ANTHROPIC_API_KEY" \
--header "anthropic-version: 2023-06-01" \
--header "content-type: application/json" \
--data \
'{
"model": "claude-sonnet-4-20250514",
"max_tokens": 1024,
"messages": [
{"role": "user", "content": "Hello, world"}
]
}'
x-api-keyに認証トークンを入れても401の認証エラーになります。
もしかして隠しリクエストパラメータで x-auth-token みたいなのがないか試してみましたが、ダメでした。
参考リンク
4. claudeコマンド実行
拡張機能からCLIのコマンドが実行できれば、 claude -p を実行するだけでうまくいきそうです。
無理そうな気もしますが...。
セキュリティの観点から普通には実行できず、ローカルサーバーを建てるなどの裏技を使う必要がありそうでした。
ただ、Chrome Web Storeには出せないようです。
まあ、CLIコマンドを実行してくる拡張機能怖いですよね。
参考リンク
終わりに
私が調べた範囲では、Claude Maxの認証トークンでチャットし放題のChrome拡張機能を作るのは厳しそうでした。
| 方法 | ライブラリ/手法 | 結果 | 理由 |
|---|---|---|---|
| 方法1 | @anthropic-ai/sdk | ✗ | OAuth認証未対応 |
| 方法2 | @anthropic-ai/claude-code | ✗ | ブラウザ環境で動作不可 |
| 方法3 | Claude API直接呼び出し | ✗ | 401認証エラー |
| 方法4 | CLIコマンド実行 | ✗ | セキュリティ制限 |
@anthropic-ai/sdk ライブラリはリクエストパラメータに authToken が用意されているので、そのうち対応されるかもしれません。
対応されたことが耳に入ったら今回完成途中だったものを完成させたいと思います。
もし、「こうやればいけるのでは？」という案をお持ちの方がいたらぜひ教えてください！