Transformers.js 기반 크롬 확장 프로그램 개발 전략

주장크롬 확장 프로그램에서 로컬 인공지능 기능을 구현할 때는 백그라운드 서비스 워커를 중심으로 모델을 관리해야 합니다. 사용자 인터페이스와 페이지 로직을 분리하여 모델 중복 로딩을 방지하고 시스템 응답성을 높이는 전략이 필요합니다.

팩트허깅페이스는 2026년 4월 23일, 젬마(Gemma) 4 E2B 모델을 활용한 브라우저 확장 프로그램 데모를 발표했습니다. 해당 프로젝트는 백그라운드 서비스 워커, 사이드 패널 채팅 사용자 인터페이스, 페이지 상호작용을 위한 콘텐츠 스크립트로 구성됩니다.

교차검증매니페스트(Manifest) V3 환경의 서비스 워커는 운영체제에 의해 일시 중단되거나 재시작될 수 있습니다. 따라서 모델의 런타임 상태는 언제든 복구 가능하도록 설계해야 하며 초기화 과정을 명확히 관리합니다.

팩트이 프로젝트는 텍스트 생성을 위해 'onnx-community/gemma-4-E2B-it-ONNX' 모델을 사용합니다. 또한 의미론적 검색을 위해 'onnx-community/all-MiniLM-L6-v2-ONNX' 모델을 활용하여 벡터 임베딩을 생성합니다.

주장확장 프로그램의 권한 설정은 사용자 신뢰와 직결되므로 최소한으로 유지합니다. 로컬에서 모든 추론이 수행된다는 점을 명확히 고지하여 데이터 처리 방식에 대한 투명성을 확보합니다.

팩트메시징 계약은 'src/shared/types.ts'에 정의된 열거형을 통해 관리합니다. 사이드 패널은 백그라운드에 작업을 요청하고, 백그라운드는 모델 추론 결과를 사이드 패널과 콘텐츠 스크립트로 전달하는 구조를 취합니다.

교차검증모델을 백그라운드에서 로드하면 확장 프로그램의 고유 오리진에 캐시가 저장됩니다. 이는 웹사이트별로 캐시가 생성되는 현상을 방지하여 메모리 효율성을 극대화합니다.

팩트사용된 주요 권한은 사이드 패널(sidePanel), 저장소(storage), 스크립팅(scripting), 탭(tabs)입니다. 또한 모든 웹사이트에서의 콘텐츠 추출 및 하이라이트 기능을 위해 호스트 권한을 요구합니다.

주장에이전트 워크플로우를 구현할 때는 모델의 챗 템플릿과 도구 스키마를 정확히 매칭해야 합니다. 모델이 특정 도구 호출 토큰을 생성할 때 이를 해석하여 실제 함수를 실행하는 로직을 구축합니다.

팩트해당 프로젝트의 소스 코드는 깃허브(github.com/nico-martin/gemma4-browser-extension)를 통해 공개되어 있습니다. 개발자는 이를 참조하여 매니페스트 V3 기반의 인공지능 확장 프로그램을 직접 구현할 수 있습니다.

출처허깅페이스 블로그(https://huggingface.co/blog/transformersjs-chrome-extension)를 통해 위 내용을 교차 검증했습니다.