UStackUStack
Open Claude in Chrome icon

Open Claude in Chrome

Open Claude in Chrome은 Claude Code를 Chromium 브라우저에 연결하는 오픈소스 클린룸 재구현입니다. 공식 확장 도메인 차단 없이 18개 MCP 도구 지원

Open Claude in Chrome

Open Claude in Chrome이란?

Open Claude in Chrome은 “Claude in Chrome” 브라우저 확장의 완전 오픈소스 클린룸 재구현입니다. 브라우저 자동화와 동일한 MCP (Model Context Protocol) 도구 세트를 통해 Claude Code를 Chromium 기반 브라우저에 연결합니다.

핵심 목적은 공식 확장에서 설명된 도메인 제한 없이 브라우저 탐색 및 페이지 내 작업을 제공하는 것입니다. 프로젝트에서 주장하는 기능 및 성능 동등성을 유지합니다.

주요 기능

  • 도메인 차단 목록 없음: 공식 확장(카테고리별 58개 차단 도메인 목록)과 달리 Open Claude in Chrome은 어디든 탐색할 수 있도록 설계되었습니다.
  • 클린룸 재구현 (오픈소스, MIT 라이선스): 소스 코드는 MIT 라이선스로 제공됩니다.
  • 모든 Chromium 브라우저 지원: 기본 지원 브라우저는 Chrome과 Edge이며, Brave, Arc, Opera, Vivaldi 등 추가 Chromium 브라우저도 언급됩니다.
  • Claude in Chrome과 동일한 18개 MCP 도구: 프로젝트에서 18개 도구 엔드포인트를 나열하며 공식 확장과 동일하다고 위치짓습니다.
  • 3개 구성 요소의 브라우저 자동화 아키텍처: 확장(Manifest V3, CDP 기반 자동화), MCP 서버(Claude Code가 시작하는 Node.js 프로세스), MCP 서버와 확장을 연결하는 네이티브 메시징 호스트 브리지.

Open Claude in Chrome 사용 방법

  1. 필수 조건 준비: Node.js v18+ 설치하고 지원 Chromium 브라우저를 설치하세요. **Claude Code v2.0.73+**도 사용하세요.
  2. 확장 종속성 설치:
    • cd host
    • npm install
    • cd ..
  3. 확장 로드:
    • 브라우저 확장 페이지 열기 (예: chrome://extensions, brave://extensions, edge://extensions).
    • 개발자 모드 활성화.
    • 압축 해제된 확장 프로그램 로드 클릭 후 extension/ 디렉터리 선택.
    • 확장 이름 아래 표시된 확장 ID 복사.
  4. 네이티브 메시징 호스트 등록:
    • ./install.sh <your-extension-id> 실행.
    • 여러 브라우저 사용 시 여러 ID 전달 (리포에 예시 형식 제공).
  5. 브라우저 재시작: 브라우저는 시작 시 네이티브 메시징 호스트 설정을 읽습니다.
  6. Claude Code에 MCP 추가:
    • 실행: claude mcp add open-claude-in-chrome -- node /absolute/path/to/host/mcp-server.js
    • 리포에서 절대 경로 확인 제안: echo "node $(pwd)/host/mcp-server.js"
  7. 확인: 새 Claude Code 세션 시작 후 reddit.com 등의 사이트 탐색 테스트; 리포에 스크린샷 기반 확인 단계 포함.

사용 사례

  • 공식 확장에서 차단된 사이트 탐색: 공식 확장이 은행, 투자, 결제/이체, 도박, 데이팅 등 카테고리를 차단하면 Open Claude in Chrome으로 해당 도메인 탐색 가능.
  • 페이지 콘텐츠 읽기 및 추출: get_page_text 등의 도구로 주요 기사나 페이지 텍스트 추출, 빠른 검토나 요약 워크플로 지원.
  • 웹 폼 상호작용: form_input으로 요소 참조로 폼 값 설정, 구조화된 데이터 입력 작업에 유용.
  • 브라우징 세션 내 클라이언트 측 자동화: read_page(접근성 트리), find(텍스트/속성으로 요소 위치), navigate/back/forward 등의 작업으로 다단계 페이지 진행.
  • 자동화 브라우징 중 디버깅 또는 검사: read_console_messagesread_network_requests 도구로 콘솔 출력과 네트워크 활동 확인.

자주 묻는 질문

Q: 지원 브라우저는 무엇인가요?
A: 프로젝트에서 Chrome과 Edge만 카테고리별로 명시하나 “모든 Chromium 브라우저” 지원하며 Brave, Arc, Opera, Vivaldi 등의 예시 나열.

Q: 네이티브 메시징 호스트를 올바르게 어떻게 설치하나요?
A: 브라우저 확장 페이지에 표시된 확장 ID로 ./install.sh 실행. 여러 브라우저 사용 시 모든 관련 확장 ID 전달 후 Claude Code 사용 전에 브라우저 재시작.

Q: Open Claude in Chrome을 Claude Code에 어떻게 연결하나요?
A: claude mcp add open-claude-in-chrome -- node /absolute/path/to/host/mcp-server.js로 Claude Code에 MCP로 추가. host/mcp-server.js의 절대 경로 사용.

Q: 확장이 연결되지 않으면 어떻게 하나요?
A: 리포에서 확장 로드 및 활성화 확인, 올바른 확장 ID로 ./install.sh 실행 확인, 브라우저 완전 재시작, 브라우저 NativeMessagingHosts 디렉터리에 네이티브 메시징 호스트 매니페스트 존재 확인 제안. MCP 서버 추가 시 절대 경로 사용 언급.

Q: Open Claude in Chrome에 공식 확장과 동일한 브라우저 도구가 포함되나요?
A: 리포에서 18 MCP tools 나열하며 Claude in Chrome의 “동일한 18 MCP 도구”로 제시.

대안

  • 공식 “Claude in Chrome” 확장 프로그램 사용: Claude-in-browser 워크플로우와 동일하지만, 공식 확장은 도메인 차단 목록을 포함합니다.
  • 기타 AI 브라우저 자동화 접근법: 프로토콜이나 에이전트 프레임워크를 통해 LLM을 브라우저 자동화와 통합하는 도구를 찾으세요 (주요 차이점은 MCP 스타일 도구 노출 사용 여부와 브라우저 제한 처리 방식입니다).
  • 일반 브라우저 자동화 (비-LLM): 자동화 프레임워크는 LLM 도구 계층 없이 페이지를 탐색하고 상호작용할 수 있지만, MCP 통합에서 설명된 LLM 대응 도구 세트를 제공하지 않습니다.
Open Claude in Chrome | UStack