Claude Browser

VS Code 내부에서 여러 개의 영구 브라우저 탭을 제공하며, Claude가 MCP를 통해 이를 제어할 수 있습니다.

한 편집기 그룹에서 GitHub을 열고 다른 그룹에서 Claude 터미널을 엽니다. 재시작 후에도 로그인 상태가 유지됩니다. 편집기를 벗어나지 않고 Claude가 사용자가 보고 있는 동일한 페이지를 읽고 클릭할 수 있게 합니다.

기능

• 하나가 아닌 여러 탭. 각 브라우저 탭은 편집기 탭이므로 분할, 그룹 간 드래그, 종료 시 위치 복원이 가능합니다.

• 세션 유지. 쿠키와 로컬 저장소는 재시작 후에도 유지되며 모든 탭에서 공유되므로 Slack에 한 번만 로그인하면 됩니다.

• 프레임 삽입을 거부하는 사이트도 동작합니다. GitHub, Slack, Google은 모두 X-Frame-Options: DENY를 전송하므로 기본 제공 Simple Browser에서는 표시할 수 없습니다.

• Claude가 제어합니다. 이 확장은 탭 나열, 탐색, 페이지 스냅샷, 클릭, 입력, 콘솔 읽기 도구를 제공하는 MCP 엔드포인트를 호스팅합니다.

• 실제 DOM입니다. 브라우저의 비디오 스트림이 아닙니다. 입력 지연이 없고, 텍스트 선택과 찾기 위젯이 작동하며, 오디오가 재생됩니다.

시작하기

yarn install
yarn build

F5를 눌러 확장 개발 호스트를 시작한 다음 명령 팔레트에서 Claude Browser: Open Browser Tab을 실행합니다.

Claude가 이를 제어하도록 하려면 같은 창에서 터미널을 열고 claude를 실행합니다. 확장이 엔드포인트를 작업 영역 .mcp.json에 기록하므로 도구는 이미 준비되어 있습니다. 직접 등록하려면 Claude Browser: Show MCP Endpoint를 실행합니다.

명령

설정

작동 방식 요약

VS Code 웹뷰는 샌드박스 처리된 iframe이며, 계속 열어두고 싶은 사이트들은 프레임 삽입을 거부합니다. 따라서 확장은 로컬 재작성 프록시를 실행합니다. 각 사이트는 github.com.s.localhost:41998과 같은 자체 루프백 오리진에서 제공되며, 통과하는 동안 프레임 및 전송 헤더가 재작성됩니다. 쿠키는 브라우저에 전혀 도달하지 않습니다. 프록시가 쿠키를 보관하고 업스트림에 다시 첨부하는데, 이것이 __Host- 접두사 세션 쿠키가 다른 오리진에서 제공될 때도 유지될 수 있는 유일한 방법입니다. 모든 페이지에는 네트워크 호출을 재라우팅하고, 탐색을 프록시에 유지하며, MCP 도구의 명령을 수행하는 작은 shim이 주입됩니다.

자세한 내용과 이 접근 방식으로 할 수 없는 것들은 docs/에 있습니다.

문서

• 아키텍처 — 구성 요소와 통신 방식

• 프록시 — 오리진 매핑, 헤더 재작성, 페이지 shim

• 영속성 — 세션이 저장되는 위치와 유지되는 범위

• MCP — 도구 및 연결 방법

• 보안 — 위협 모델 및 요청 가드

• 제한 사항 — 작동하지 않는 것과 그 이유

• 개발 — 빌드, 테스트, 릴리스