API-Xray
1. 開発の動機
フロントエンド開発中、APIのリクエスト/レスポンスやJWTの中身をサクッと確認したい場面は多いです。
しかし、既存の多機能なAPIデバッグツールやプロキシツールは、インストールやプロキシ設定が面倒だったり、アカウント作成を求められたりして、導入のハードルが地味に高いと感じていました。
「ブラウザを開いて『今この瞬間』流れている通信を、設定ゼロでサクッとリアルタイム監視したい」
そんな不満を解消するために、超軽量かつモダンな開発者向け拡張機能 「API-Xray」 を作成しました。
2. 特徴
-
設定ゼロで即起動
→ インストールした瞬間から、ブラウザ内のAPI通信をリアルタイムにトラッキングします。 -
モダンで視認性の高いUI
→ React + TypeScript で構築され、開発中の画面を邪魔しないスマートな設計。 -
安心の100%ローカル処理
→ 通信ログやトークンなどの機密データはサーバーへ一切送信せず、ブラウザ内のみで完結。 -
完全オープンソース（MIT）
→ 商用利用・改変・再配布すべて自由です。
3. ほかのツールとの違い
| 項目 | API-Xray | 一般的なAPIデバッグツール |
|---|---|---|
| ライセンス | MIT (完全OSS) | プロプライエタリ / 制限あり |
| 導入コスト | 設定ゼロ (拡張機能を入れるだけ) | アプリ起動、プロキシ設定などが必要 |
| JWTデコード | 通信一覧から一発で確認可能 | 別途ツールやWebサイトへのコピペが必要 |
| 動作 | 超軽量 | ツールによっては重い |
| データの安全性 | 100%ローカル処理 (送信なし) | クラウド保存やアカウント連携が必要な場合あり |
4. インストール方法
※Chromeの拡張ストアからインストールすることを推奨します。
下記のサイトへ入りChromeへ追加を押してください
5. GitHub（ソースコード）
不具合の報告や「こんな機能が欲しい」といった提案は、GitHubのIssueにて受け付けています。Starをいただけると開発の励みになります！
6. Support
GitHubでスター・フォローをしていただけると励みになります。
https://ko-fi.com/0cyan