Home
Login
hangwin/mcp-chromePlease refer to the latest official releases for information GitHub Homepage

Chrome 확장 프로그램을 기반으로 한 MCP 서버로, AI 어시스턴트가 브라우저를 제어하여 자동화 작업, 콘텐츠 분석 및 시맨틱 검색을 수행할 수 있도록 합니다.

MITTypeScript 1.2khangwinmcp-chrome Last Updated: 2025-06-23

Chrome MCP 서버 프로젝트 상세 소개

프로젝트 개요

Chrome MCP 서버는 Chrome 확장 프로그램을 기반으로 하는 모델 컨텍스트 프로토콜(MCP) 서버입니다. 이 서버는 Chrome 브라우저의 기능을 AI 도우미(예: Claude)에 노출하여 복잡한 브라우저 자동화, 콘텐츠 분석 및 시맨틱 검색 기능을 구현합니다.

프로젝트 주소: https://github.com/hangwin/mcp-chrome

핵심 기능

🌟 주요 특징

  • Chrome 브라우저를 스마트 도우미로 전환 - AI가 브라우저를 제어하여 강력한 AI 제어 자동화 도구로 변환
  • 일상적인 브라우저를 직접 사용 - 기존 브라우저 자동화 도구(예: Playwright)와 달리 Chrome MCP 서버는 일상적인 Chrome 브라우저를 직접 사용
  • 기존 사용자 습관 및 구성 유지 - 기존 사용자 구성, 로그인 상태 등을 활용하여 다양한 대규모 모델 또는 챗봇이 진정으로 일상적인 도우미가 되도록 지원

🚀 핵심 기능 특징

  • 😁 챗봇/모델 독립성: 선호하는 LLM 또는 챗봇 클라이언트 또는 에이전트가 브라우저를 자동화하도록 지원
  • ⭐️ 원래 브라우저 사용: 기존 브라우저 환경과 원활하게 통합 (구성, 로그인 상태 등)
  • 💻 완전 로컬화: 순수 로컬 MCP 서버로 사용자 개인 정보 보호 보장
  • 🚄 스트리밍 가능한 HTTP: 스트리밍 가능한 HTTP 연결 방식
  • 🏎 탭 간: 탭 간 컨텍스트 지원
  • 🧠 시맨틱 검색: 스마트 브라우저 탭 콘텐츠 검색을 위한 내장 벡터 데이터베이스
  • 🔍 스마트 콘텐츠 분석: AI 기반 텍스트 추출 및 유사성 매칭
  • 🌐 20개 이상의 도구: 스크린샷, 네트워크 모니터링, 상호 작용 작업, 북마크 관리, 검색 기록 등 20개 이상의 도구 지원
  • 🚀 SIMD 가속 AI: 사용자 정의 WebAssembly SIMD 최적화로 벡터 연산 속도 4-8배 향상

기술 비교

비교 차원 Playwright 기반 MCP 서버 Chrome 확장 프로그램 기반 MCP 서버
리소스 사용 ❌ 독립 브라우저 프로세스 시작, Playwright 종속성 설치, 브라우저 바이너리 파일 다운로드 등 필요 ✅ 독립 브라우저 프로세스 시작 불필요, 사용자가 이미 열어 놓은 Chrome 브라우저 직접 활용
사용자 세션 재사용 ❌ 다시 로그인 필요 ✅ 기존 로그인 상태 자동 사용
브라우저 환경 ❌ 깨끗한 환경으로 사용자 설정 부족 ✅ 사용자 환경 완전 보존
API 접근 ✅ Chrome 네이티브 API 완전 접근 ✅ Chrome 네이티브 API 완전 접근
시작 속도 ❌ 브라우저 프로세스 시작 필요 ✅ 확장 프로그램 활성화만 필요
응답 속도 50-200ms 프로세스 간 통신 ✅ 더 빠름

시스템 요구 사항

  • Node.js 18+ 및 pnpm
  • Chrome/Chromium 브라우저

설치 및 구성

1. Chrome 확장 프로그램 다운로드

GitHub에서 최신 Chrome 확장 프로그램을 다운로드합니다.

다운로드 링크: https://github.com/hangwin/mcp-chrome/releases

2. mcp-chrome-bridge 전역 설치

npm 사용:

npm install -g mcp-chrome-bridge

pnpm 사용:

pnpm install -g mcp-chrome-bridge

3. Chrome 확장 프로그램 로드

다운로드한 확장 프로그램 파일을 Chrome 브라우저에 로드합니다.

4. Claude Desktop 구성

다음 구성을 Claude Desktop의 MCP 구성에 추가합니다.

{
  "mcpServers": {
    "streamable-mcp-server": {
      "type": "streamable-http",
      "url": "http://127.0.0.1:12306/mcp"
    }
  }
}

도구 분류 상세

📊 브라우저 관리 (4개 도구)

  • get_windows_and_tabs: 모든 브라우저 창과 탭 나열
  • chrome_navigate: URL로 이동 및 뷰포트 제어
  • chrome_close_tabs: 특정 탭 또는 창 닫기
  • chrome_go_back_or_forward: 브라우저 탐색 제어

📸 스크린샷 및 시각 (1개 도구)

  • chrome_screenshot: 고급 스크린샷 캡처, 요소 위치 지정, 전체 페이지 지원 및 사용자 정의 크기 지원

🌐 네트워크 모니터링 (4개 도구)

  • chrome_network_capture_start/stop: webRequest API 네트워크 캡처
  • chrome_network_debugger_start/stop: 응답 본문이 있는 디버거 API
  • chrome_network_request: 사용자 정의 HTTP 요청 전송

🔍 콘텐츠 분석 (3개 도구)

  • search_tabs_content: AI 기반의 브라우저 탭 간 시맨틱 검색
  • chrome_get_web_content: 페이지에서 HTML/텍스트 콘텐츠 추출
  • chrome_get_interactive_elements: 클릭 가능한 요소 찾기

🎯 상호 작용 (3개 도구)

  • chrome_click_element: CSS 선택기를 사용하여 요소 클릭
  • chrome_fill_or_select: 양식 작성 및 옵션 선택
  • chrome_keyboard: 키보드 입력 및 단축키 시뮬레이션

📚 데이터 관리 (5개 도구)

  • chrome_history: 시간 필터를 사용하여 브라우저 기록 검색
  • chrome_bookmark_search: 키워드로 북마크 찾기
  • chrome_bookmark_add: 폴더 지원으로 새 북마크 추가
  • chrome_bookmark_delete: 북마크 삭제

사용 예시

쿼리 예시

다음은 실제 사용 시나리오의 데모입니다.

  1. API 분석 쿼리: "샤오홍슈의 검색 API가 무엇인지, 응답 구조는 어떤지 알고 싶습니다."
  2. 기록 분석: "지난 한 달간의 검색 기록 분석"
  3. 콘텐츠 처리: "현재 웹 페이지 번역 및 요약"
  4. 스크린샷 기능: "Hugging Face 홈페이지 스크린샷 캡처"
  5. 요소 캡처: "Hugging Face 홈페이지에서 아이콘 캡처"
  6. 북마크 관리: "현재 페이지를 북마크에 추가하고 적절한 폴더에 넣기"
  7. 탭 관리: "shadcn 관련 모든 웹 페이지 닫기"

관련 문서

  • 아키텍처 설계 문서: 자세한 기술 아키텍처 문서
  • 도구 API 문서: 전체 도구 API 문서
  • 문제 해결 가이드: 일반적인 문제 해결 방법

요약

Chrome MCP 서버는 혁신적인 프로젝트로, 기존 브라우저 자동화 도구의 제한을 깨고 사용자의 일상적인 브라우저 환경을 직접 활용하여 AI 도우미에게 강력한 브라우저 제어 기능을 제공합니다. 풍부한 도구 세트와 로컬화된 보안 설계를 통해 사용자는 AI를 진정한 일상적인 브라우징 도우미로 만들어 작업 효율성과 사용자 경험을 크게 향상시킬 수 있습니다.

Star History Chart