Chrome 도구 MCP 서버

DevTools 프로토콜을 통해 Chrome과 상호작용하는 도구를 제공하는 MCP 서버입니다. 이 서버를 통해 JavaScript 실행, 스크린샷 캡처, 네트워크 트래픽 모니터링 등 Chrome 탭을 원격으로 제어할 수 있습니다.

왜 이런 MCP 서버를 사용하나요?

이러한 유형의 MCP 서버는 Cline과 같은 AI 도구가 브라우저를 건드리기 전에 특정 상태로 수동으로 설정해야 할 때 유용합니다. 또한 이 도구를 사용하여 네트워크 이벤트를 수신하고 해당 컨텍스트로 가져올 수도 있습니다.

특징

• Chrome 탭 나열
• 탭에서 JavaScript 실행
• 스크린샷 캡처
• 네트워크 트래픽 모니터링
• URL로 탭 이동
• DOM 요소 쿼리
• 콘솔 출력 캡처로 요소 클릭

설치

지엑스피1

구성

서버는 MCP 설정의 환경 변수를 통해 구성할 수 있습니다.

환경 변수

• CHROME_DEBUG_URL : Chrome의 원격 디버깅 인터페이스를 사용할 수 있는 URL(기본값: http://localhost:9222 )
• CHROME_CONNECTION_TYPE : 로깅을 위한 연결 유형 식별자(예: "direct", "ssh-tunnel", "docker")
• CHROME_ERROR_HELP : 연결에 실패하면 표시되는 사용자 지정 오류 메시지

설정 가이드

기본 설정(Windows/Mac/Linux)

1. 원격 디버깅을 활성화하여 Chrome을 실행합니다.
   # Windows "C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 # Mac /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 # Linux google-chrome --remote-debugging-port=9222
2. MCP 설정 구성:
   { "env": { "CHROME_DEBUG_URL": "http://localhost:9222", "CHROME_CONNECTION_TYPE": "direct" } }

WSL 설정

WSL에서 실행하는 경우 Windows에서 실행되는 Chrome에 연결하려면 SSH 터널을 설정해야 합니다.

1. 원격 디버깅을 활성화하여 Windows에서 Chrome 실행
2. SSH 터널을 생성합니다.
   ssh -N -L 9222:localhost:9222 windowsuser@host
3. MCP 설정 구성:
   { "env": { "CHROME_DEBUG_URL": "http://localhost:9222", "CHROME_CONNECTION_TYPE": "ssh-tunnel", "CHROME_ERROR_HELP": "Make sure the SSH tunnel is running: ssh -N -L 9222:localhost:9222 windowsuser@host" } }

도커 설정

Docker에서 Chrome을 실행하는 경우:

1. Chrome 컨테이너 실행:
   docker run -d --name chrome -p 9222:9222 chromedp/headless-shell
2. MCP 설정 구성:
   { "env": { "CHROME_DEBUG_URL": "http://localhost:9222", "CHROME_CONNECTION_TYPE": "docker" } }

도구

목록_탭

사용 가능한 Chrome 탭을 모두 나열합니다.

실행 스크립트

지정된 탭에서 JavaScript 코드를 실행합니다. 매개변수:

• tabId : Chrome 탭의 ID
• script : 실행할 JavaScript 코드

캡처_스크린샷

지정된 탭의 스크린샷을 캡처하여 AI 모델 사용에 맞게 자동으로 최적화합니다. 매개변수:

• tabId : Chrome 탭의 ID
• format : 이미지 형식(jpeg/png) - 참고: 이는 초기 캡처에만 적용됩니다. 최종 출력은 PNG 대체 형식인 WebP를 사용합니다.
• quality : JPEG 품질(1-100) - 참고: 초기 캡처에만 해당
• fullPage : 스크롤 가능한 전체 페이지 캡처

이미지 처리:

1. WebP 최적화(기본 형식):
   • 첫 번째 시도: 품질 80 및 높은 압축률의 WebP
   • 두 번째 시도: 첫 번째 시도가 1MB를 초과하는 경우 품질 60 및 거의 무손실 압축을 적용한 WebP
2. PNG 대체:
   • WebP 처리가 실패한 경우에만 사용됩니다.
   • 최대 압축 및 색상 팔레트 최적화 포함
3. 크기 제약:
   • 최대 크기: 900x600(종횡비 유지)
   • 최대 파일 크기: 1MB
   • 필요한 경우 점진적으로 크기를 줄입니다.

캡처_네트워크_이벤트

지정된 탭에서 네트워크 이벤트를 모니터링하고 캡처합니다. 매개변수:

• tabId : Chrome 탭의 ID
• duration : 캡처하는 데 걸리는 시간(초)
• filters : 선택적 유형 및 URL 패턴 필터

로드_URL

지정된 URL로 탭을 이동합니다. 매개변수:

• tabId : Chrome 탭의 ID
• url : 로드할 URL

쿼리_도메인_요소

CSS 선택기와 일치하는 DOM 요소에 대한 자세한 정보를 쿼리하고 검색합니다. 매개변수:

• tabId : Chrome 탭의 ID
• selector : 요소를 찾는 CSS 선택기 반환:
• 다음을 포함한 속성을 가진 DOM 요소의 배열:
  • nodeId : 노드의 고유 식별자
  • tagName : HTML 태그 이름
  • textContent : 요소의 텍스트 내용
  • attributes : 모든 요소 속성을 포함하는 객체
  • boundingBox : 요소의 위치 및 크기
  • isVisible : 요소가 표시되는지 여부
  • ariaAttributes : 접근성을 위한 ARIA 속성

클릭_요소

DOM 요소를 클릭하고 클릭으로 트리거되는 모든 콘솔 출력을 캡처합니다. 매개변수:

• tabId : Chrome 탭의 ID
• selector : 클릭할 요소를 찾는 CSS 선택기 반환:
• 다음이 포함된 객체:
  • message : 성공/실패 메시지
  • consoleOutput : 클릭으로 트리거되는 콘솔 메시지 배열

특허

MIT