ブラウザ拡張型AIダッシュボード（詳細非公表）
2025年10月 - 現在
趣味
プロジェクト概要
ブラウザ拡張機能フレームワーク（Plasmo）とReact/TypeScriptを用いて、既存のWebページにAI支援用コンポーネントとダッシュボードを後付けする技術検証を行っているプロジェクトです。コンテンツスクリプトで既存DOMにUIを差し込むパターンと、拡張内タブで独立したSPAとしてダッシュボードを構成するパターンを組み合わせ、D3.jsによるネットワークグラフやメトリクス表示のインタラクションを検証しています。状態管理にはZustandを用い、GitHub Actionsでビルド・パッケージングを自動化しています。
アーキテクチャ
PlasmoベースのChrome拡張として構成し、Content Scriptで既存ページにReactコンポーネントをマウント、tabs配下のReactコンポーネント群でダッシュボードとネットワークビューを提供する構成としています。ネットワークグラフ部分はD3.jsでレイアウト計算と描画を担当し、状態管理にはZustandを用いることで、グラフデータ・メトリクス・アニメーション設定などをReact側から宣言的に切り替えられるように設計しています。
技術的挑戦
- ブラウザ拡張（Plasmo）特有の構成理解と、Content Script・拡張内タブ間の役割分担の設計
- D3.js と React を組み合わせたネットワークグラフ可視化の実装 → レイアウト計算やアニメーション制御と、React側の状態管理の責務分担の検討
- 複数のAIエージェントを前提としたUI/情報設計 → 抽象度を保ちながらも、どのエージェントが何をしているかを直感的に伝える表現の検討