Chrome 연동

Claude Code는 Chrome 브라우저 확장 프로그램과 연동하여 브라우저 자동화 기능을 제공합니다. 코드를 작성한 뒤 터미널에서 바로 브라우저로 테스트하고 디버깅할 수 있습니다.

베타 기능

Chrome 연동은 현재 베타 상태입니다. Google Chrome과 Microsoft Edge에서만 지원되며, Brave, Arc 등 다른 Chromium 기반 브라우저와 WSL은 아직 지원하지 않습니다.

사전 요구사항

Chrome 연동을 사용하려면 다음이 필요합니다:

항목	요구사항
브라우저	Google Chrome 또는 Microsoft Edge
확장 프로그램	Claude in Chrome v1.0.36 이상
Claude Code	v2.0.73 이상
플랜	Anthropic 직접 유료 플랜 (Pro, Max, Teams, Enterprise)

서드파티 제공자 제한

Amazon Bedrock, Google Cloud Vertex AI, Microsoft Foundry 등 서드파티를 통해 Claude를 사용하는 경우, Chrome 연동을 위해 별도의 claude.ai 계정이 필요합니다.

시작하기

1단계: Chrome 확장 프로그램 설치

Chrome 웹 스토어에서 Claude in Chrome 검색
Anthropic 공식 확장 프로그램 설치
chrome://extensions에서 활성화 확인

2단계: Claude Code에서 Chrome 실행

# --chrome 플래그로 시작
claude --chrome

또는 기존 세션에서 /chrome 명령어로 활성화할 수 있습니다:

/chrome

3단계: 브라우저 작업 요청

localhost:3000에 접속해서 로그인 폼에 테스트 데이터를 입력하고,
유효성 검사가 제대로 동작하는지 확인해줘

Claude가 새 탭을 열고 브라우저 작업을 수행합니다. 모든 작업은 실시간으로 보이는 Chrome 창에서 실행됩니다.

기본 활성화 설정

매번 --chrome 플래그를 붙이기 번거롭다면, /chrome 실행 후 **"Enabled by default"**를 선택하세요.

컨텍스트 사용량 주의

기본 활성화 시 브라우저 도구가 항상 로드되어 컨텍스트 사용량이 증가합니다. 컨텍스트 소비가 걱정되면 필요할 때만 --chrome으로 실행하는 것이 효율적입니다.

주요 기능

Chrome이 연결되면 브라우저 작업과 코딩 작업을 하나의 워크플로우에서 연결할 수 있습니다:

기능	설명
라이브 디버깅	콘솔 에러와 DOM 상태를 직접 읽고, 원인 코드를 바로 수정
디자인 검증	Figma 목업 기반으로 UI를 만든 후, 브라우저에서 일치 여부 확인
웹앱 테스트	폼 유효성 검사, 시각적 회귀 테스트, 사용자 플로우 검증
인증된 웹앱	Google Docs, Gmail, Notion 등 로그인된 앱과 상호작용
데이터 추출	웹 페이지에서 구조화된 정보를 추출하여 로컬에 저장
작업 자동화	데이터 입력, 폼 작성, 다중 사이트 워크플로우 자동화
세션 녹화	브라우저 작업을 GIF로 녹화하여 문서화 또는 공유

로그인 상태 공유

Claude는 브라우저의 로그인 상태를 공유합니다. 이미 로그인한 사이트에서 별도의 API 설정 없이 작업할 수 있습니다. 로그인 페이지나 CAPTCHA를 만나면 일시 중지하고 수동 처리를 요청합니다.

실전 워크플로우

로컬 웹앱 테스트

로그인 폼 유효성 검사를 업데이트했어. localhost:3000에서
잘못된 데이터로 제출해보고, 에러 메시지가 제대로 나오는지 확인해줘

콘솔 로그로 디버깅

대시보드 페이지를 열고 페이지 로드 시
콘솔에 에러가 있는지 확인해줘

폼 자동화

contacts.csv 파일에 고객 연락처가 있어. 각 행마다
CRM(crm.example.com)에서 "연락처 추가"를 클릭하고
이름, 이메일, 전화번호를 입력해줘

Google Docs 작성

최근 커밋 기반으로 프로젝트 업데이트를 작성해서
Google Docs(docs.google.com/document/d/abc123)에 추가해줘

데이터 추출

상품 목록 페이지에서 각 상품의 이름, 가격, 재고 상태를
추출해서 CSV 파일로 저장해줘

GIF 녹화

장바구니에 상품을 추가하고 결제 완료까지의 전체 과정을
GIF로 녹화해줘

사이트 권한 관리

사이트별 권한은 Chrome 확장 프로그램 설정에서 관리합니다. Claude가 탐색, 클릭, 입력할 수 있는 사이트를 제어할 수 있습니다.

사용 가능한 브라우저 도구 전체 목록은 /mcp에서 claude-in-chrome을 선택하여 확인하세요.

트러블슈팅

확장 프로그램 미감지

"Chrome extension not detected" 메시지가 나타나면:

chrome://extensions에서 확장 프로그램이 설치·활성화되어 있는지 확인
claude --version으로 Claude Code 버전 확인
Chrome이 실행 중인지 확인
/chrome → "Reconnect extension"으로 재연결
문제가 계속되면 Claude Code와 Chrome 모두 재시작

최초 연결 시

Chrome 연동을 처음 활성화하면 네이티브 메시징 호스트 설정 파일이 설치됩니다. Chrome이 이 파일을 시작 시에 읽으므로, 첫 시도에서 감지되지 않으면 Chrome을 재시작해주세요.

네이티브 메시징 호스트 설정 파일 위치:

Chrome:

macOS: ~/Library/Application Support/Google/Chrome/NativeMessagingHosts/com.anthropic.claude_code_browser_extension.json
Linux: ~/.config/google-chrome/NativeMessagingHosts/com.anthropic.claude_code_browser_extension.json
Windows: HKCU\Software\Google\Chrome\NativeMessagingHosts\ (레지스트리)

Edge:

macOS: ~/Library/Application Support/Microsoft Edge/NativeMessagingHosts/com.anthropic.claude_code_browser_extension.json
Linux: ~/.config/microsoft-edge/NativeMessagingHosts/com.anthropic.claude_code_browser_extension.json
Windows: HKCU\Software\Microsoft\Edge\NativeMessagingHosts\ (레지스트리)

브라우저 무응답

모달 대화상자(alert, confirm, prompt)가 페이지를 차단하고 있는지 확인 → 수동으로 닫기
Claude에게 새 탭을 열도록 요청
chrome://extensions에서 확장 프로그램 비활성화 후 다시 활성화

연결 끊김 (장시간 세션)

Chrome 확장의 서비스 워커가 비활동 중에 유휴 상태가 될 수 있습니다. 브라우저 도구가 동작하지 않으면 /chrome → "Reconnect extension"으로 재연결하세요.

Windows 관련 이슈

Named pipe 충돌 (EADDRINUSE): 다른 Claude Code 세션이 Chrome을 사용 중일 수 있습니다. Claude Code를 재시작하세요.
네이티브 메시징 호스트 에러: Claude Code를 재설치하여 호스트 설정을 재생성하세요.

주요 에러 메시지

에러	원인	해결
"Browser extension is not connected"	네이티브 메시징 호스트가 확장에 연결 불가	Chrome과 Claude Code 재시작 후 `/chrome`으로 재연결
"Extension not detected"	확장 미설치 또는 비활성화	`chrome://extensions`에서 설치·활성화
"No tab available"	탭이 준비되기 전 작업 시도	새 탭 열기 요청 후 재시도
"Receiving end does not exist"	서비스 워커 유휴 상태	`/chrome` → "Reconnect extension"

핵심 정리

Chrome 연동으로 코드 작성 → 브라우저 테스트를 하나의 워크플로우로 연결
claude --chrome 또는 /chrome으로 활성화
로그인된 사이트(Google Docs, Gmail 등)에서 별도 API 없이 작업 가능
현재 베타 — Chrome과 Edge만 지원
Anthropic 유료 플랜 필요 (서드파티 제공자는 별도 계정 필요)

다음 챕터: 첫 번째 실행 →

이 페이지에 오류가 있나요? 오류 제보하기 →

사전 요구사항​

시작하기​

1단계: Chrome 확장 프로그램 설치​

2단계: Claude Code에서 Chrome 실행​

3단계: 브라우저 작업 요청​

기본 활성화 설정​

주요 기능​

실전 워크플로우​

로컬 웹앱 테스트​

콘솔 로그로 디버깅​

폼 자동화​

Google Docs 작성​

데이터 추출​

GIF 녹화​

사이트 권한 관리​

트러블슈팅​

확장 프로그램 미감지​

브라우저 무응답​

연결 끊김 (장시간 세션)​

Windows 관련 이슈​

주요 에러 메시지​

핵심 정리​