/ 디렉터리 / 플레이그라운드 / Chrome MCP
● 커뮤니티 hangwin ⚡ 바로 사용

Chrome MCP

제작: hangwin · hangwin/mcp-chrome

Claude가 브라우저 자동화 및 연구를 위해 이미 로그인되어 있고 쿠키와 세션을 사용하여 실제 Chrome을 구동하게 하세요.

Chrome MCP는 Chrome 확장 프로그램으로 설치되며 탭 전체에서 탐색, 클릭, 입력, 스크린샷, 추출, 의미 검색 등의 브라우저 기능을 Claude에 노출합니다. 실제 브라우저를 사용하기 때문에 헤드리스 봇을 차단하고 Claude가 이미 열려 있는 인증된 세션 내에서 작동할 수 있도록 하는 사이트에서 작동합니다.

왜 쓰나요

핵심 기능

라이브 데모

실제 사용 모습

mcp-chrome.replay ▶ 준비됨
0/0

설치

클라이언트 선택

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "mcp-chrome": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-chrome-bridge"
      ]
    }
  }
}

Claude Desktop → Settings → Developer → Edit Config 열기. 저장 후 앱 재시작.

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "mcp-chrome": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-chrome-bridge"
      ]
    }
  }
}

Cursor는 Claude Desktop과 동일한 mcpServers 스키마 사용. 프로젝트 설정이 전역보다 우선.

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "mcp-chrome": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-chrome-bridge"
      ]
    }
  }
}

Cline 사이드바의 MCP Servers 아이콘 클릭 후 "Edit Configuration" 선택.

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "mcp-chrome": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-chrome-bridge"
      ]
    }
  }
}

Claude Desktop과 같은 형식. Windsurf 재시작 후 적용.

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "mcp-chrome",
      "command": "npx",
      "args": [
        "-y",
        "mcp-chrome-bridge"
      ]
    }
  ]
}

Continue는 맵이 아닌 서버 오브젝트 배열 사용.

~/.config/zed/settings.json
{
  "context_servers": {
    "mcp-chrome": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "mcp-chrome-bridge"
        ]
      }
    }
  }
}

context_servers에 추가. 저장 시 Zed가 핫 리로드.

claude mcp add mcp-chrome -- npx -y mcp-chrome-bridge

한 줄 명령. claude mcp list로 확인, claude mcp remove로 제거.

사용 사례

실전 활용법: Chrome MCP

Claude에게 비밀번호를 건네주지 않고 로그인이 필요한 사이트를 조사하세요.

👤 구독 콘텐츠를 이용하는 연구원, 분석가 ⏱ ~20 min beginner

언제 쓸까: 페이월 사이트 또는 제한 대시보드에 로그인했으며 Claude가 이를 읽어주기를 원합니다.

사전 조건
  • Chrome 확장 프로그램이 설치되었습니다. — Chrome 웹 스토어에서 설치하세요. 브리지 MCP가 자동 연결됩니다.
  • 대상 사이트가 이미 Chrome에서 열려 있고 인증되었습니다. — 먼저 일반 탭에서 수동으로 로그인하세요.
흐름
  1. 탭 확인
    List my open Chrome tabs.✓ 복사됨
    → Tab titles + URLs for every active tab
  2. 발췌
    From the Bloomberg tab, extract the article body and the sidebar data table.✓ 복사됨
    → Structured content pulled; no "cannot access" error
  3. 크로스탭 합성
    Across the 3 research-provider tabs I have open, what's the consensus view on X?✓ 복사됨
    → Synthesis with per-tab citations

결과: 실제 인증된 콘텐츠를 바탕으로 답변을 제공하며 로그인 페이지를 스크랩하지 않습니다.

함정
  • Session expires mid-task — Extension surfaces a refresh prompt; reauth in that tab and retry
함께 쓰기: 메모리

개발 빌드의 흐름을 스크린샷하여 UI 회귀를 포착하세요.

👤 프론트엔드 엔지니어 ⏱ ~30 min intermediate

언제 쓸까: 방금 CSS 리팩터링을 출시했고 10개 핵심 페이지의 시각적 차이점을 원합니다.

흐름
  1. 기준선 열기
    Open my dev site pages listed in /qa/flows.json and screenshot each into /screenshots/before/.✓ 복사됨
    → Screenshots captured with filenames matching URLs
  2. 비교하다
    After I deploy, take fresh screenshots and diff against /screenshots/before/. Summarize visual changes per page.✓ 복사됨
    → Per-page diff report with concrete observations

결과: 실제 브라우저 환경을 사용하여 5분 안에 시각적 회귀 보고서를 작성합니다.

함정
  • Screenshots differ due to font loading — Add a sleep or wait_for_selector step before capturing
함께 쓰기: 파일 시스템

조합

다른 MCP와 조합해 10배 효율

mcp-chrome + filesystem

Save extracted pages to disk for later indexing

이 탭을 추출하여 /research/ai-paper-notes.md에 작성하세요.✓ 복사됨
mcp-chrome + memory

Remember key findings across browsing sessions

오늘 읽은 내용을 요약해서 기억해 두세요.✓ 복사됨

도구

이 MCP가 노출하는 것

도구입력언제 호출비용
list_tabs none 세션을 시작하여 사용 가능한 내용 확인 free
read_tab tab_id: int 특정 탭에서 콘텐츠 가져오기 free
click tab_id, selector: str 페이지 요소와 상호 작용 free
screenshot tab_id, full_page?: bool 비교 또는 검토를 위한 시각적 캡처 free
search_tabs query: str X에 대해 설명하는 탭 찾기 free

비용 및 제한

운영 비용

API 쿼터
지역 — 무제한
호출당 토큰
DOM 추출은 용량이 클 수 있습니다. 5,000~50,000개 토큰
금액
Free
전체 DOM을 가져오는 대신 범위 추출을 위해 선택기와 함께 'read_tab'을 사용하세요.

보안

권한, 시크릿, 파급범위

최소 스코프: chrome.tabs chrome.scripting
자격 증명 저장: 없음 - Chrome에서 세션을 보유합니다.
데이터 외부 송신: 탭 내용은 MCP 클라이언트를 통해 LLM 공급자로 흐릅니다.
절대 부여 금지: access to incognito without reason

문제 해결

자주 발생하는 오류와 해결

확장 프로그램이 감지되지 않았습니다.

확장 프로그램을 고정하세요. 브리지 바이너리에는 확장 폴링이 필요합니다.

확인: chrome://extensions shows it enabled
탭 내용이 비어 있습니다.

페이지가 Shadow DOM을 사용할 수 있습니다. include_shadow=trueread_tab을 시도해 보세요.

클릭수가 등록되지 않음

사이트는 자동화 방지(Cloudflare 등)를 사용합니다. 먼저 스크롤하여 지연 로드를 실행해 보세요.

대안

Chrome MCP 다른 것과 비교

대안언제 쓰나단점/장점
chrome-devtools MCP사용자 자동화가 아닌 devtools 프로토콜(콘솔, 네트워크, 성능)을 원합니다.DevTools MCP는 UI를 구동하지 않고 검사합니다.
playwright MCPCI에서 헤드리스 자동화를 원합니다.인증 상태가 없습니다. 봇 감지 경향

더 보기

리소스

📖 GitHub에서 공식 README 읽기

🐙 열린 이슈 보기

🔍 400+ MCP 서버 및 Skills 전체 보기