Claude Code는 Chrome 브라우저와 통합하여 터미널에서 직접 브라우저를 제어할 수 있다. 웹 앱을 빌드한 후 컨텍스트 전환 없이 바로 테스트하고 디버깅할 수 있다.
현재 베타 버전이며 Google Chrome에서만 작동한다. Brave, Arc 등 다른 Chromium 브라우저와 WSL은 미지원.
주요 기능
| 기능 | 설명 |
|---|---|
| 라이브 디버깅 | 콘솔 오류와 DOM 상태를 읽고 코드 수정 |
| 디자인 검증 | UI 빌드 후 브라우저에서 목업과 비교 |
| 웹 앱 테스트 | 폼 유효성 검사, 시각적 회귀, 사용자 흐름 확인 |
| 인증된 앱 접근 | 로그인된 Google Docs, Gmail, Notion 등과 상호작용 |
| 데이터 추출 | 웹 페이지에서 구조화된 정보 수집 |
| 작업 자동화 | 반복적인 브라우저 작업 자동화 |
| 세션 기록 | 브라우저 상호작용을 GIF로 기록 |
요구 사항
- Google Chrome 브라우저
- Claude in Chrome 확장 프로그램 v1.0.36+
- Claude Code CLI v2.0.73+
- 유료 Claude 플랜 (Pro, Team, Enterprise)
작동 원리
Claude Code는 Claude in Chrome 확장 프로그램을 통해 Chrome과 통신한다. 확장 프로그램은 Chrome의 Native Messaging API를 사용하여 명령을 받고 브라우저에서 실행한다.
- Claude는 기존 탭을 인수하지 않고 새 탭을 연다
- Chrome의 로그인 상태를 공유하므로 이미 로그인한 사이트는 재인증 없이 접근 가능
- 로그인 페이지나 CAPTCHA를 만나면 일시 중지하고 사용자에게 처리 요청
- 헤드리스 모드 없음 - 브라우저 창이 보여야 함
설정 방법
1. Claude Code 업데이트
claude update2. Chrome 플래그로 시작
claude --chrome3. 연결 확인
/chrome확장 프로그램이 감지되지 않으면 설치 링크가 표시된다.
기존 세션에서도 /chrome 명령으로 통합을 활성화할 수 있다.
사용 예시
로컬 웹 앱 테스트
로그인 폼 유효성 검사를 업데이트했어. localhost:3000에서잘못된 데이터로 제출해보고 에러 메시지가 제대로 나오는지 확인해줘.콘솔 로그 디버깅
대시보드 페이지를 열고 페이지 로드 시 콘솔에 에러가 있는지 확인해줘.폼 작성 자동화
contacts.csv 파일의 연락처를 CRM(crm.example.com)에 등록해줘.각 행마다 "Add Contact" 클릭 후 이름, 이메일, 전화번호 입력.Google Docs 작성
최근 커밋 기반으로 프로젝트 업데이트를 작성해서docs.google.com/document/d/abc123에 추가해줘.데이터 추출
상품 목록 페이지에서 이름, 가격, 재고 상태를 추출해서 CSV로 저장해줘.GIF 기록
장바구니에 상품 추가부터 결제 완료까지 체크아웃 플로우를 GIF로 기록해줘.주의 사항
- 모달 대화 상자: JavaScript alert, confirm, prompt는 브라우저 이벤트를 차단한다. 나타나면 수동으로 닫고 계속 진행
- 새 탭 사용: 탭이 응답하지 않으면 새 탭 생성 요청
- 콘솔 필터링: 콘솔 로그가 많을 수 있으니 찾을 패턴을 명시
문제 해결
확장 프로그램 미감지
- Chrome 확장 프로그램 v1.0.36+ 설치 확인
claude --version으로 v2.0.73+ 확인- Chrome 실행 중인지 확인
/chrome→ “확장 프로그램 다시 연결” 선택- Claude Code와 Chrome 재시작
브라우저 무응답
- 모달 대화 상자가 페이지를 차단하는지 확인
- 새 탭 생성 요청
- Chrome 확장 프로그램 비활성화 후 재활성화
기본 활성화
매번 --chrome 플래그를 붙이기 번거로우면:
/chrome# → "기본적으로 활성화" 선택기본 활성화 시 브라우저 도구가 항상 로드되어 컨텍스트 사용량이 증가한다. 필요할 때만
--chrome사용을 권장.