AI Assistant Chrome Extension

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

스크린샷

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

---

주요 기능 (v2.2.0)

핵심 기능

Side Panel UI

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

AI 대화 및 분석

• 실시간 채팅: 현재 페이지 내용 기반 대화
• 요약: 긴 페이지를 핵심만 압축
• 핵심 포인트: 중요 내용만 추출
• 번역 챗봇: 한국어/영어 자동 감지 양방향 번역 채팅 인터페이스

다중 AI 모델

• Claude Sonnet 4.6 (기본, 최고의 코딩 모델)
• Claude Opus 4.6 (가장 깊은 추론)
• Claude Haiku 4.5 (빠름, 비용 효율적)

---

고급 기능

병렬 처리 엔진

• 자동 청크 분할: 긴 페이지를 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. 저장 -> 체크마크 애니메이션 확인

---

지원 모델

모델	제공자	최대 컨텍스트	최대 출력	특징
Claude Sonnet 4.6	Anthropic	200K 토큰 (1M 확장)	64K 토큰	최고의 코딩 모델 (기본) - 빠르고 강력한 추론, 1M 확장 컨텍스트
Claude Opus 4.6	Anthropic	200K 토큰 (1M 확장)	64K 토큰	가장 깊은 추론 - 복잡한 연구/분석, 1M 확장 컨텍스트
Claude Haiku 4.5	Anthropic	200K 토큰	64K 토큰	가장 빠른 모델 - 비용 효율적, 일상적인 분석에 최적

모델 선택 가이드:

• 일반적인 사용 (권장): Claude Sonnet 4.6 - 빠르고 강력한 추론, 코딩과 분석에 최적
• 최고 수준 추론: Claude Opus 4.6 - 가장 깊은 추론, 복잡한 연구와 아키텍처 설계
• 빠른 응답: Claude Haiku 4.5 - 비용 효율적, 간단한 질문과 빠른 분석

참고사항:

• Sonnet 4.6과 Opus 4.6은 1M 토큰 확장 컨텍스트 지원
• 모든 모델은 global. prefix를 사용한 Cross-Region Inference 활용

---

개발

테스트

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)

---