Chromex: 로컬 네이티브 브릿지로 Codex와 Chrome을 연결하는 오픈소스 AI 사이드 패널 어시스턴트

Chromex 소개

AI 어시스턴트가 웹 브라우징 컨텍스트를 완전히 인식하면서 동작할 수 있다면 어떨까요? 현재 보고 있는 웹 페이지, 열려 있는 탭들, 업로드한 파일, 스크린샷을 모두 AI가 이해하고 응답하는 환경 말입니다. Chromex는 Chrome 브라우저에 OpenAI의 Codex를 로컬 네이티브 브리지(Native Messaging Bridge)를 통해 연결하는 오픈소스 Chrome MV3 사이드 패널 확장 프로그램으로, 이러한 브라우저 통합 AI 어시스턴트 경험을 구현합니다. 확장 프로그램 스토리지에 API 자격 증명을 저장하지 않는 구조로, 로컬 Codex CLI를 통해 모든 AI 처리가 사용자 컴퓨터에서 직접 수행되어 보안성도 유지됩니다.

Chromex의 핵심 아키텍처는 Chrome 확장 프로그램과 로컬에서 실행 중인 Codex CLI를 Chrome의 Native Messaging API로 연결하는 방식입니다. 확장 프로그램이 직접 AI API를 호출하는 것이 아니라, 로컬에 설치된 Codex 바이너리를 브리지 역할로 사용합니다. 이 구조 덕분에 API 키가 브라우저 확장 프로그램 내에 저장되지 않아 보안 리스크가 감소하고, Codex의 스킬(Skills) 시스템을 통해 기능을 확장할 수 있습니다. 또한 브라우저의 content script를 통해 실제 페이지 조작(클릭, 폼 작성 등)도 가능하며, 조작 중에는 페이지 내 시각적 인디케이터가 표시됩니다.

지원하는 콘텐츠 타입도 다양합니다. 현재 열려 있는 웹 페이지의 텍스트, 선택된 탭 목록, 스크린샷, 업로드 파일(PDF, Office 문서 포함), 이미지, 그리고 요청 시 브라우저 히스토리까지 컨텍스트로 활용할 수 있습니다. YouTube 동영상, 뉴스 기사, 연구 논문, arXiv 논문 페이지의 요약 및 비교도 가능하며, 음성 입력과 라이브 음성 모드도 지원합니다. 커스텀 프로필을 통해 특정 도메인이나 작업에 최적화된 설정을 저장하고 재사용할 수 있습니다.

Chromex의 주요 기능

페이지 인식 대화: 현재 탭의 웹 페이지 내용을 기반으로 질문하고 답변을 받을 수 있습니다. arXiv 논문 페이지에서 "이 논문의 핵심 기여를 세 줄로 요약해줘"라고 물으면, 해당 페이지 내용을 컨텍스트로 활용한 답변을 생성합니다.

이미지 생성 및 편집: Codex의 이미지 워크플로우를 통해 이미지를 생성하거나 편집할 수 있으며, 생성된 이미지는 로컬에 저장됩니다.

브라우저 제어 워크플로우: Chrome content script를 통해 페이지 내 요소를 클릭하거나 폼을 작성하는 등 실제 브라우저 조작을 자동화할 수 있습니다. 작업이 진행되는 동안 페이지 내 시각적 인디케이터가 표시되어 현재 어떤 작업이 수행 중인지 확인할 수 있습니다.

음성 입력: 텍스트 대신 음성으로 명령을 입력하거나, 라이브 음성 모드를 활성화하여 대화형으로 상호작용할 수 있습니다.

Chromex 설치 방법

Chromex는 Chrome Web Store에서 배포되지 않으며, 소스 코드를 직접 빌드하여 설치해야 합니다.

사전 요구사항: Node.js 20 LTS 이상, Codex CLI(@openai/codex)

# 1. Codex CLI 설치 및 확인
npm install -g @openai/codex
codex --version

# 2. 저장소 복제(clone) 및 빌드
git clone https://github.com/GENEXIS-AI/chromex.git
cd chromex
npm install
npm run build

# 3. Native Messaging 호스트 설치 (Chrome ↔ Codex 연결 브리지)
node scripts/install-native-host.mjs

# Windows의 경우 PowerShell에서 실행:
node scripts/install-native-host.mjs --browser=chrome

빌드 완료 후 Chrome에서 chrome://extensions를 열고, 개발자 모드 활성화 후 압축 해제된 확장 프로그램 로드 버튼으로 packages/extension/dist 폴더를 선택합니다.

:warning: Windows 사용자: npm installnpm run build는 반드시 package.json이 있는 chromex 루트 폴더에서 실행해야 합니다. Windows Store 설치 경로(winget install Codex)가 실패하는 경우 npm으로 설치하세요.

라이선스

Chromex는 MIT 라이선스로 공개되어 있어 자유롭게 사용하고 수정할 수 있습니다.

:github: Chromex 프로젝트 GitHub 저장소




이 글은 GPT 모델로 정리한 글을 바탕으로 한 것으로, 원문의 내용 또는 의도와 다르게 정리된 내용이 있을 수 있습니다. 관심있는 내용이시라면 원문도 함께 참고해주세요! 읽으시면서 어색하거나 잘못된 내용을 발견하시면 덧글로 알려주시기를 부탁드립니다. :hugs:

:pytorch:파이토치 한국 사용자 모임:south_korea:이 정리한 이 글이 유용하셨나요? 회원으로 가입하시면 주요 글들을 이메일:love_letter:로 보내드립니다! (기본은 Weekly지만 Daily로 변경도 가능합니다.)

:wrapped_gift: 아래:down_right_arrow:쪽에 좋아요:+1:를 눌러주시면 새로운 소식들을 정리하고 공유하는데 힘이 됩니다~ :star_struck:

1개의 좋아요