내부 기술 데모
Gitea Code Tree — Gitea 저장소 페이지에 IDE 스타일 파일 탐색을 추가하는 확장 프로그램
Gitea Code Tree는 Gitea 저장소 페이지에 IDE 스타일의 접을 수 있는 파일 트리 사이드바를 추가하는 Chrome 확장 프로그램이다.
기술 스택
- TypeScript
- Vue 3
- Composition API
- Vitest
- Playwright
- npm
과제
Gitea의 기본 저장소 화면에는 고정된 파일 트리가 없어 대규모 저장소 탐색이나 이미 로드된 파일 간 검색이 느려진다.
접근 방식
Vue 3 Composition API 기반의 콘텐츠 스크립트가 사이드바를 렌더링하며, 이미 로드된 파일 간 검색, 탐색 중 활성 경로 하이라이트, 유니코드·특수문자 경로 및 커스텀 포트 지원, 라이트/다크 테마, 로컬 캐시 기반 UI 상태 복원을 제공한다.
아키텍처
전적으로 브라우저 측에서 동작하는 콘텐츠 스크립트로 백엔드가 없으며, 모든 상태는 로컬 Chrome 스토리지에 저장된다.
결과
Chrome 웹 스토어에 게시됨(v0.1.1). 사용자가 명시적으로 접근을 허용한 공개 및 비공개 Gitea 인스턴스에서 동작한다. 개발자는 데이터를 판매하지 않고 저장소 내용을 업로드하지 않으며 광고 추적에도 사용하지 않는다고 명시하고 있다.