🐻 BearerBear

Chrome 확장 프로그램 - HTTP 요청에 Bearer 토큰을 자동으로 주입합니다.

✨ 기능

• 🔐 특정 URL 패턴에 Authorization: Bearer <token> 헤더 자동 추가
• 📝 여러 URL 패턴을 하나의 토큰에 적용 (한 줄에 하나씩)
• 👁️ 토큰 입력 시 표시/숨기기 토글
• 🔄 토큰 활성화/비활성화 개별 토글
• 📦 설정 Import/Export (JSON)
• 🎨 모던 UI (다크 테마)

📥 설치

1. 이 저장소를 클론합니다:

git clone https://github.com/park-onezero/bearer-bear.git
cd bearer-bear

2. 의존성을 설치하고 빌드합니다:

npm install
npm run build

3. Chrome에서 확장 프로그램을 로드합니다:
   • chrome://extensions 접속
   • "개발자 모드" 활성화
   • "압축해제된 확장 프로그램을 로드합니다" 클릭
   • dist 폴더 선택

🚀 사용법

토큰 추가

1. 확장 프로그램 아이콘 클릭 → "Manage Tokens" 클릭
2. "Add Token" 버튼 클릭
3. 다음 정보 입력:
   • Name: 표시 이름 (선택)
   • URL Patterns: 매칭할 URL 패턴 (여러 줄 입력 가능)
   • Token: Bearer 토큰 값 (👁️ 아이콘으로 표시/숨기기)

URL 패턴 예시

||api.example.com/*
||localhost:3000/api/*

문법	설명
||	도메인 앵커 (http/https 모두 매칭)
*	와일드카드 (모든 문자열 매칭)

🛠️ 개발

# 개발 서버 실행
npm run dev

# 프로덕션 빌드
npm run build

# 린트 검사
npm run lint

📁 프로젝트 구조

bearer-bear/
├── public/
│   ├── manifest.json    # Chrome 확장 프로그램 매니페스트
│   └── icon-*.png       # 확장 프로그램 아이콘
├── src/
│   ├── background/      # Service Worker (규칙 관리)
│   ├── options/         # 설정 페이지 (토큰 CRUD)
│   ├── popup/           # 팝업 (빠른 상태 확인)
│   └── types.ts         # TypeScript 타입 정의
└── dist/                # 빌드 출력

🔧 기술 스택

• Framework: React 19 + TypeScript
• Build: Vite
• Styling: Tailwind CSS
• Chrome API: Manifest V3 + declarativeNetRequest

📄 라이선스

MIT License