Plasmo 기반 Local-first 설계로 LLM 간 컨텍스트 전이 비용 제로화

How I Built a Local-First Chrome Extension to Chain ChatGPT, Grok, and Claude

ContextOS2026년 6월 13일1분intermediate

AI 요약

Context

다양한 LLM의 강점을 활용하는 워크플로우에서 브라우저 탭 간 데이터 상태 관리의 복잡성 발생. 외부 서버 의존 시 발생하는 프라이버시 침해 및 서버 오버헤드 해결 필요.

Plasmo 프레임워크 기반 React 및 TypeScript를 활용한 Chrome MV3 아키텍처 구축
서버리스 환경 구현을 위해 chrome.storage.local을 단일 진실 공급원(Single Source of Truth)으로 활용한 Local-first 스토리지 설계
Gemini API 기반 BYOK(Bring Your Own Key) 모델을 통한 데이터 처리 비용 외부화 및 개인정보 보호 강화
Background Worker를 이용한 Raw Text 페이로드의 구조적 파싱 및 동적 로컬 상태 블록 커밋 로직 구현
서비스별 상이한 DOM 레이아웃 대응을 위해 가벼운 Content Script를 통한 계층적 Markdown 포맷팅 및 텍스트 영역 주입 매커니즘 적용

실천 포인트

1. 서버 비용 및 개인정보 이슈 해결을 위해 chrome.storage.local 기반의 Local-first 상태 관리 검토

2. 다양한 웹 서비스의 DOM 구조 차이를 극복하기 위한 추상화된 Content Script 주입 레이어 설계

3. API Key의 사용자 직접 입력 방식(BYOK)을 통한 인프라 관리 포인트 최소화 전략 적용

태그