GitHub 잔디의 색상을 자유롭게 커스터마이징할 수 있는 Chrome 확장 프로그램입니다.
- 프리셋 테마 — 별도 설정 없이 바로 쓸 수 있는 5가지 테마를 제공합니다.
- 커스텀 색상 — Level 0(기여 없음) ~ Level 4(최다 기여)까지 각 단계의 색상을 컬러 피커나 hex 값 입력으로 직접 지정할 수 있습니다.
- 내 팔레트 — 커스텀으로 만든 색상 조합을 이름과 함께 저장하고, 즐겨찾기·삭제로 관리할 수 있습니다.
- 실시간 미리 보기 — 색상을 변경할 때마다 미리 보기를 통해 적용된 색상을 바로 확인할 수 있습니다.
- GitHub 실시간 반영 — 적용한 색상은 기여 그래프와 범례(legend)에 즉시 반영됩니다.
| 테마 | 설명 |
|---|---|
| 기본 (Default Green) | GitHub 기본 초록색 |
| 오션 (Ocean Blue) | 파란색 계열 |
| 선셋 (Sunset Orange) | 주황색 계열 |
| 퍼플 (Purple Haze) | 보라색 계열 |
| 모노 (Monochrome) | 무채색 그레이스케일 |
- Chrome 확장 프로그램을 설치합니다.
- GitHub 페이지에 접속합니다.
- Chrome 툴바에서 확장 프로그램 아이콘을 클릭합니다.
- 탭에서 원하는 방식으로 색상을 지정합니다.
- 프리셋 탭 — 제공되는 테마 중 하나를 선택합니다.
- 커스텀 탭 — 5단계 색상을 직접 지정하고, 원하면 이름을 붙여 팔레트로 저장합니다.
- 내 팔레트 탭 — 저장한 팔레트를 선택해 불러오거나, 즐겨찾기/삭제로 관리합니다.
- 적용 버튼을 누르면 잔디 색상이 즉시 변경됩니다.
- 기본값으로 되돌리려면 초기화 버튼을 클릭합니다.
| 구분 | 기술 |
|---|---|
| 프레임워크 | React 19 |
| 언어 | TypeScript |
| 스타일 | Tailwind CSS v4 |
| 빌드 도구 | Vite + @crxjs/vite-plugin |
| 확장 프로그램 | Chrome Extension Manifest V3 |
확장 프로그램은 두 개의 독립적인 진입점으로 구성됩니다.
- 팝업 UI (
main.tsx→App.tsx) — 아이콘 클릭 시 표시되며, 선택한 색상을chrome.storage.local에 저장합니다. - 콘텐츠 스크립트 (
content.ts) —github.com에 주입되어 저장된 색상을 읽어 CSS로 잔디 색상을 덮어씁니다.
팝업 UI → chrome.storage.local → 콘텐츠 스크립트(onChanged 감지) → GitHub 잔디 CSS 주입
chrome.storage.onChanged를 구독하기 때문에 팝업에서 색상을 바꾸면 열려 있는 GitHub 탭에 실시간으로 반영됩니다.
yarn dev # 개발 서버 실행 (확장 프로그램 개발 모드)
yarn build # 프로덕션 빌드 (dist/ 폴더에 출력)
yarn lint # ESLint 실행
yarn preview # 빌드 결과물 미리보기
yarn icons # 확장 프로그램 아이콘 생성빌드 후 Chrome의 chrome://extensions에서 압축해제된 확장 프로그램을 로드하여 dist/ 폴더를 선택하면 설치할 수 있습니다.
src/
├── main.tsx # 팝업 진입점
├── App.tsx # 팝업 루트 컴포넌트 (탭 전환 및 레이아웃)
├── content.ts # GitHub 페이지에 주입되는 콘텐츠 스크립트
├── constants/
│ ├── Theme.ts # ColorPalette·SavedPalette 타입, 프리셋 테마 정의
│ └── StorageKeys.ts # chrome.storage 키 상수
├── services/
│ └── Storage.ts # chrome.storage.local 추상화
├── hooks/
│ └── useColorState.ts # 색상·팔레트 상태 관리 커스텀 훅
└── components/
├── index.ts # 컴포넌트 배럴 익스포트
├── TabButton.tsx # 탭 버튼
├── Preview.tsx # 잔디 미리보기
├── PresetList.tsx # 프리셋 목록 UI
├── CustomEditor.tsx # 커스텀 색상 편집 및 저장 UI
├── PaletteList.tsx # 저장한 팔레트 목록 (즐겨찾기/삭제)
└── Footer.tsx # 적용·초기화 버튼
버전별 변경 사항은 CHANGELOG.md에서 확인할 수 있습니다.