피드로 돌아가기
Dev.toFrontend
원문 읽기
2주 만에 Side Panel 기반 AI 확장 프로그램 구현 및 CSP 제약 해결
I shipped an AI side panel in 2 weekends
AI 요약
Context
사용자 워크플로우 중단을 방지하는 효율적인 AI 인터페이스 구축 필요성 제기. 기존 Popup Window 방식의 UX 한계로 인해 페이지 가독성을 유지하는 Side Panel 구조로 전환.
Technical Solution
- Chrome Side Panel API 도입을 통한 페이지 내 지속적인 AI 인터페이스 유지 설계
- chrome.storage.session을 활용하여 선택된 텍스트 데이터를 효율적으로 전달하는 상태 관리 구현
- CSP(Content Security Policy) 제약으로 인한 Side Panel 내 직접 fetch 불가 문제 식별
- Background Service Worker에서 API 요청을 수행하고 chrome.runtime.sendMessage로 응답을 스트리밍하는 프록시 구조 설계
- OpenAI-compatible API 표준을 채택하여 다중 LLM(Claude, Gemini, DeepSeek) 통합 공수 50% 절감
- Client-side API Key 관리 방식을 통해 별도의 Backend 인프라 없이 서버리스 아키텍처 구현
실천 포인트
- Chrome Extension 개발 시 Side Panel과 외부 API 연동을 위한 Service Worker 통신 구조 사전 설계 - 다중 LLM 통합 시 OpenAI 호환 API 규격을 우선 검토하여 인터페이스 단일화 추진 - 기능 구현 전 UX 모델(Popup vs Side Panel)의 적합성을 우선 검증하여 리소스 낭비 방지