AI Assistant Chrome Extension

Amazon Bedrock 기반 Side Panel AI 어시스턴트 - 웹 탐색 중에도 지속적으로 사용 가능한 AI 채팅

📸 스크린샷

Side Panel UI: 브라우저 좌측에서 웹페이지와 함께 AI 대화

---

✨ 주요 기능 (v2.2.0)

🎯 핵심 기능

Side Panel UI

• 브라우저 좌측 고정 패널
• 웹 탐색 중에도 대화 지속
• 팝업처럼 닫히지 않음

AI 대화 및 분석

• 실시간 채팅: 현재 페이지 내용 기반 대화
• 요약: 긴 페이지를 핵심만 압축
• 핵심 포인트: 중요 내용만 추출
• 전체 번역: 웹페이지 DOM 번역 (7개 언어)

다중 AI 모델

• Claude Haiku 4.5 (기본, 빠름)
• Claude Sonnet 4.5 (최신, 균형잡힌 성능)
• Claude Sonnet 4 (대안적 선택)

---

🚀 고급 기능

병렬 처리 엔진 (NEW)

• 자동 청크 분할: 긴 페이지를 2000 토큰 단위로 분할
• 동시 처리: 최대 5개 청크 병렬 실행
• 성능 향상: 50-70% 처리 시간 단축
• 진행 상황 표시: 실시간 진행률 (예: "처리 중... 3/5 (60%)")

채팅 히스토리 관리

• 영구 저장: 브라우저 재시작 후에도 대화 유지
• 세션 관리: 페이지별 자동 분리
• 세션 검색: 이전 대화 빠르게 찾기
• 가상 스크롤: 50개 이상 메시지도 부드럽게

사용자 설정

• 동시성 제어: 1-5단계 조절 (빠름 vs 안정)
• 번역 언어: 한국어, 영어, 일본어, 중국어, 스페인어, 프랑스어, 독일어
• 토큰 수: 100-8000 조절
• Temperature: 창의성 수준 조절

성능 최적화

• API 인증 캐싱: 5분 TTL (호출 83% 감소)
• 한글 IME 최적화: 조합 이벤트 처리
• 메모리 효율: 가상 스크롤로 70% 절감

---

📊 성능 비교

페이지 크기	v1.0 (순차)	v2.2 (병렬)	개선율
10,000자	~8초	~5초	37.5%
20,000자	~15초	~8초	46.7%
30,000자	~22초	~10초	54.5%
50,000자	~35초	~15초	57.1%

---

📋 설치 방법

1. 저장소 클론

git clone https://github.com/jesamkim/chrome-ai.git
cd chrome-ai

2. 의존성 설치

npm install

3. Chrome Extension 로드

1. Chrome 브라우저에서 chrome://extensions/ 이동
2. 우측 상단 "개발자 모드" 활성화
3. "압축해제된 확장 프로그램을 로드합니다" 클릭
4. 클론한 프로젝트 폴더 선택

4. API Key 설정

1. Extension 아이콘 클릭 → Side Panel 열림
2. 설정 버튼 (⚙️) 클릭
3. AWS Bedrock API Key 입력
4. "저장" 클릭 → 토스트 알림 확인

---

🎯 사용 방법

기본 사용

1. 웹페이지 방문
2. Extension 아이콘 클릭 → Side Panel 열림
3. 빠른 작업 선택:
   • 📝 요약
   • 🎯 핵심 포인트
   • 🌐 번역 (설정한 언어로)
   • 💬 채팅

채팅 사용

1. Side Panel에서 "채팅" 클릭
2. 페이지 내용이 자동으로 AI에게 전달됨
3. "이 내용이 뭐야?" 같은 질문
4. AI가 페이지 기반 답변

설정 커스터마이징

1. 설정 페이지 열기
2. 동시성: 1(느림/안정) ~ 5(빠름) 조절
3. 번역 언어: 원하는 언어 선택
4. AI 모델: 속도 vs 품질 선택
5. 저장 → 체크마크 애니메이션 확인

---

🔧 개발

테스트

npm test                  # 전체 테스트
npm run test:unit         # 단위 테스트
npm run test:integration  # 통합 테스트

프로젝트 구조

chrome-ai/
├── src/
│   ├── background/       # Service Worker
│   │   ├── background.js
│   │   ├── bedrock-client.js
│   │   ├── chunk-processor.js      # 청크 분할
│   │   ├── parallel-analyzer.js    # 병렬 처리
│   │   └── text-context-manager.js
│   ├── sidepanel/        # Side Panel UI
│   │   ├── sidepanel.html
│   │   ├── sidepanel.css
│   │   └── sidepanel.js
│   ├── content/          # Content Script
│   │   ├── content.js
│   │   └── dom-manager.js          # 번역용 DOM 관리
│   ├── popup/            # 레거시 Popup (호환성)
│   └── options/          # 설정 페이지
├── tests/                # 테스트
└── manifest.json         # Extension 매니페스트

---

🆕 버전 히스토리

v2.2.0 (최신)

• ✅ 컨텍스트 메뉴 제거 (우클릭 메뉴 정리)
• ✅ 저장 버튼 시각적 피드백 (토스트 알림)
• ✅ 번역 버튼 동적 텍스트 (설정 언어 반영)
• ✅ Select 드롭다운 색상 수정

v2.1.0

• ✅ 워커 풀 병렬 처리 구현
• ✅ 진행 상황 프로그레스 바
• ✅ 동시성 사용자 설정 (1-5)
• ✅ 전체 웹페이지 번역 (chrome-trans 통합)
• ✅ 7개 언어 지원

v2.0.0

• ✅ Side Panel UI 전환
• ✅ 채팅 히스토리 영구 저장
• ✅ 세션 관리 UI
• ✅ 한글 IME 입력 문제 해결
• ✅ API 인증 캐싱 (83% 호출 감소)
• ✅ 가상 스크롤 (메모리 70% 절감)

v1.0.0

• 초기 Popup 버전

---

🎨 특징

사용자 경험

• 즉시 시작: API Key만 입력하면 바로 사용
• 실시간 피드백: 진행 상황, 저장 확인, 토스트 알림
• 지속성: Side Panel이 닫히지 않아 대화 유지
• 멀티태스킹: 웹 탐색하면서 AI와 대화

기술적 우수성

• Manifest V3: 최신 Chrome Extension 표준
• Promise 기반: Web Workers 없이 효율적 병렬 처리
• 재시도 로직: Exponential backoff (1초, 2초, 4초)
• 부분 실패 허용: 일부 청크 실패해도 결과 제공

---

🔐 보안

• API Key 암호화 저장: Chrome Storage API 자동 암호화
• XSS 방지: HTML 이스케이프 처리
• 최소 권한 원칙: 필요한 권한만 요청
• HTTPS 강제: 모든 API 통신 암호화
• 의존성 관리: 정기 보안 업데이트

---

📝 라이선스

MIT License

---

👤 만든이

Jesam Kim (AWS SA)

---