社内技術デモ
Gitea Code Tree —— GiteaリポジトリページにIDE風ファイルナビゲーションを追加する拡張機能
Gitea Code Treeは、GiteaリポジトリページにIDE風の折りたたみ可能なファイルツリーサイドバーを追加するChrome拡張機能である。
技術スタック
- TypeScript
- Vue 3
- Composition API
- Vitest
- Playwright
- npm
課題
Giteaのデフォルトのリポジトリ表示には常駐のファイルツリーがなく、大規模リポジトリの閲覧や、既に読み込まれたファイル間の検索が非効率になる。
アプローチ
Vue 3 Composition APIによるコンテンツスクリプトがサイドバーを描画し、既に読み込まれたファイル間の検索、ナビゲーション時のアクティブパスのハイライト、Unicodeや特殊文字パス・カスタムポートへの対応、ライト/ダークテーマ、ローカルキャッシュからのUI状態復元を提供する。
アーキテクチャ
完全にブラウザ側で動作するコンテンツスクリプトで、バックエンドは存在せず、すべての状態はローカルのChromeストレージに保存される。
成果
Chromeウェブストアで公開済み（v0.1.1）。ユーザーが明示的にアクセスを許可した公開・非公開のGiteaインスタンスで動作する。開発者はデータを販売せず、リポジトリの内容をアップロードせず、広告トラッキングにも使用しないと明言している。