크롬 디버그 MCP 플레이라이트

Greasemonkey API를 완벽하게 지원하는 Playwright를 사용한 브라우저 자동화를 위한 MCP(모델 컨텍스트 프로토콜) 구현입니다.

특징

핵심 브라우저 기능

브라우저 실행 및 관리
생성/전환/닫기 기능을 갖춘 다중 탭 지원
페이지 탐색 및 상호 작용
스크린샷 캡처

Greasemonkey API 지원

CSS 주입을 위한 GM_addStyle
데이터 저장을 위한 GM_getValue/GM_setValue
저장소 정리를 위한 GM_deleteValue
데스크톱 알림을 위한 GM_notification
클립보드 작업을 위한 GM_setClipboard
교차 출처 요청을 위한 GM_xmlhttpRequest

자원 관리

네트워크 요청 차단
요청 차단, 수정 및 로깅
리소스 유형 필터링

디버그 기능

세부 로깅 시스템
로그 파일 구성
깨끗한 인터페이스 출력

설치

지엑스피1

빠른 시작

// Launch browser
tool browser launch_browser --url "https://example.com" --browserType "chromium"

// Use GM functions
tool browser gm_setValue --key "setting" --value "test"
tool browser gm_getValue --key "setting"

// Intercept requests
tool browser intercept_requests --patterns ["*.jpg", "*.css"] --action "block"

선적 서류 비치

명령어 - 예제를 포함한 자세한 명령어 설명서
COMMANDS.md에서 사용 예제가 포함된 전체 명령 목록을 볼 수 있습니다.

핵심 기능

브라우저 관리

// Launch browser
tool browser launch_browser --url "https://example.com"

// Create new tab
tool browser create_tab --url "https://example.com"

// Switch between tabs
tool browser switch_tab --index 1

그리스몽키 API

// Add custom styles
tool browser gm_addStyle --css "body { background: #f0f0f0; }"

// Store data
tool browser gm_setValue --key "setting" --value "test"

// Make cross-origin requests
tool browser gm_xmlhttpRequest --url "https://api.example.com/data" --method "GET"

리소스 차단

// Block image loading
tool browser intercept_requests --patterns ["*.jpg", "*.png"] --action "block"

// Log all CSS requests
tool browser intercept_requests --patterns ["*.css"] --action "log"

구현 세부 사항

로깅 시스템

모든 디버그 출력이 로그 파일로 리디렉션됨
타임스탬프가 찍힌 항목
로그 디렉토리에 정리됨
깨끗한 인터페이스 출력

오류 처리

자세한 오류 로깅
오류에 대한 적절한 정리
자원 관리

종속성

극작가: 브라우저 자동화
@modelcontextprotocol/sdk: MCP 구현

개발

필수 조건

Node.js 16 이상
npm 7 이상

설정

git clone https://github.com/yourusername/chrome-debug-mcp-playwright.git
cd chrome-debug-mcp-playwright
npm install

특허

MIT 라이센스 - 자세한 내용은 라이센스 파일을 참조하세요.

기여하다

여러분의 참여를 환영합니다! 자세한 내용은 참여 가이드를 참조하세요.

감사의 말

Robert Headley의 원래 chrome-debug-mcp를 기반으로 합니다.

=======

64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가)

Chrome 디버그 MCP 서버

디버깅 기능, 사용자 스크립트 주입, 확장 기능 지원을 갖춘 Chrome을 제어하기 위한 MCP(모델 컨텍스트 프로토콜) 서버입니다.

<<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리

=======

64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가)

<<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리

64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가)

특징

크롬 컨트롤

사용자 정의 구성으로 Chrome 실행
사용자 정의 Chrome 실행 파일 경로 지원
사용자 프로필 관리(기본 또는 사용자 정의 사용자 데이터 디렉토리)
확장 지원 및 관리
Chrome의 "자동 제어" 배너 비활성화

<<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리

=======

64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가)

페이지 자동화

페이지 요소를 클릭하고 입력하고 상호 작용하세요
드롭다운 및 양식 입력 처리
마우스를 올려놓고 요소를 기다리세요
전체 페이지 또는 요소의 스크린샷을 찍으세요
페이지 간 탐색
뷰포트 크기 및 장치 에뮬레이션 설정
요소에서 텍스트와 속성 추출

탭 관리

열려 있는 모든 탭을 ID와 URL과 함께 나열합니다.
지정된 URL로 새 탭 열기
ID로 탭 닫기
탭 간 전환
여러 탭 상태를 추적하고 관리합니다.

<<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리

64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가)

디버깅 기능

Chrome DevTools 프로토콜(CDP)을 통한 원격 디버깅
콘솔 로그 캡처 및 모니터링
페이지 컨텍스트에서의 JavaScript 평가
실시간 콘솔 출력 스트리밍

사용자 스크립트 지원

웹 페이지에 사용자 스크립트 삽입
Greasemonkey 스타일 API 지원:
- 영구 저장소를 위한 GM_setValue / GM_getValue
- CSS 주입을 위한 GM_addStyle
- 교차 출처 요청을 위한 GM_xmlhttpRequest
- 새 탭 생성을 위한 GM_openInTab
- 메뉴 명령에 대한 GM_registerMenuCommand

확장 통합

압축 해제된 확장 프로그램 로드
확장 상태 및 구성 유지
기본 Chrome 프로필 확장 프로그램 지원
선택적 확장 활성화/비활성화

설치

필수 조건

Roo 코드 확장 프로그램 설치

Visual Studio Code 열기
확장 프로그램으로 이동(Ctrl+Shift+X)
"Roo Code"를 검색하세요
설치를 클릭하세요

Chrome 디버그 MCP 서버 설정

이 저장소를 복제하세요:
git clone https://github.com/yourusername/chrome-debug-mcp.git cd chrome-debug-mcp
종속성 설치:
npm install
프로젝트를 빌드하세요:
npm run build
Roo 코드에서 구성: cline_mcp_settings.json 에 추가:
{ "mcpServers": { "chrome-debug": { "command": "node", "args": ["path/to/chrome-debug-mcp/build/index.js"], "disabled": false, "alwaysAllow": [] } } }

용법

<<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리

사용 가능한 모든 명령, 도구 및 기능에 대한 전체 참조는 COMMANDS.md를 참조하세요.

64acbb3의 부모(업로드를 통해 파일 추가) ======= 사용 가능한 모든 명령, 도구 및 기능에 대한 전체 참조는 COMMANDS.md를 참조하세요.

64acbb3의 부모(업로드를 통해 파일 추가)

기본 크롬 실행

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "launch_chrome",
  arguments: {
    executablePath: "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
    url: "https://example.com"
  }
})

사용자 정의 프로필로 시작

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "launch_chrome",
  arguments: {
    executablePath: "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
    userDataDir: "path/to/chrome/profile",
    disableAutomationControlled: true
  }
})

사용자 스크립트 삽입

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "launch_chrome",
  arguments: {
    url: "https://example.com",
    userscriptPath: "path/to/userscript.js"
  }
})

JavaScript 평가

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "evaluate",
  arguments: {
    expression: "document.title"
  }
})

콘솔 로그 가져오기

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "get_console_logs",
  arguments: {
    clear: true
  }
})

<<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리

=======

64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가)

페이지 상호작용 예시

요소를 클릭하세요

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "click",
  arguments: {
    selector: "#submit-button",
    delay: 500
  }
})

입력란에 입력

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "type",
  arguments: {
    selector: "#search-input",
    text: "search query",
    delay: 100
  }
})

드롭다운에서 선택

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "select",
  arguments: {
    selector: "#country-select",
    value: "US"
  }
})

요소를 기다리세요

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "wait_for_selector",
  arguments: {
    selector: ".loading-complete",
    visible: true,
    timeout: 5000
  }
})

스크린샷 찍기

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "screenshot",
  arguments: {
    path: "screenshot.png",
    fullPage: true
  }
})

뷰포트 크기 설정

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "set_viewport",
  arguments: {
    width: 1920,
    height: 1080,
    deviceScaleFactor: 1
  }
})

탭 관리 예제

모든 탭 나열

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "list_tabs",
  arguments: {}
})

새 탭 열기

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "new_tab",
  arguments: {
    url: "https://example.com"
  }
})

탭으로 전환

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "switch_tab",
  arguments: {
    tabId: "tab-id-from-list-tabs"
  }
})

탭 닫기

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "close_tab",
  arguments: {
    tabId: "tab-id-from-list-tabs"
  }
})

<<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리

64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가)

종속성

이 프로젝트는 다음과 같은 오픈 소스 패키지를 사용합니다.

Puppeteer - Chrome 자동화 라이브러리
chrome-remote-interface - Chrome DevTools 프로토콜 클라이언트
@modelcontextprotocol/sdk - 서버 구현을 위한 MCP SDK

특허

이 프로젝트는 MIT 라이선스에 따라 라이선스가 부여되었습니다. 자세한 내용은 라이선스 파일을 참조하세요.

기여하다

기부에 대한 자세한 내용은 기부 가이드를 참조하세요.

감사의 말

Chrome DevTools 프로토콜
그리스몽키 API <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD
모델 컨텍스트 프로토콜

8a57443의 부모(robertheadley/feature/puppeteer-commands에서 풀 리퀘스트 #4 병합) =======

모델 컨텍스트 프로토콜

64acbb3의 부모(업로드를 통해 파일 추가) =======

모델 컨텍스트 프로토콜

64acbb3의 부모(업로드를 통해 파일 추가) =======

모델 컨텍스트 프로토콜

64acbb3의 부모(업로드를 통해 파일 추가) =======

모델 컨텍스트 프로토콜

64acbb3의 부모(업로드를 통해 파일 추가) =======

모델 컨텍스트 프로토콜

64acbb3의 부모(업로드를 통해 파일 추가) =======

모델 컨텍스트 프로토콜

64acbb3의 부모(업로드를 통해 파일 추가) =======

모델 컨텍스트 프로토콜

64acbb3의 부모(업로드를 통해 파일 추가)

Integrations

크롬 디버그 MCP 플레이라이트

특징

핵심 브라우저 기능

Greasemonkey API 지원

자원 관리

디버그 기능

설치

빠른 시작

선적 서류 비치

핵심 기능

브라우저 관리

그리스몽키 API

리소스 차단

구현 세부 사항

로깅 시스템

오류 처리

종속성

개발

필수 조건

설정

특허

기여하다

감사의 말

Robert Headley의 원래 chrome-debug-mcp를 기반으로 합니다.

Chrome 디버그 MCP 서버

<<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리

특징

크롬 컨트롤

<<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리

페이지 자동화

탭 관리

디버깅 기능

사용자 스크립트 지원

확장 통합

설치

필수 조건

Roo 코드 확장 프로그램 설치

Chrome 디버그 MCP 서버 설정

용법

<<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리

기본 크롬 실행

사용자 정의 프로필로 시작

사용자 스크립트 삽입

JavaScript 평가

콘솔 로그 가져오기

<<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리

페이지 상호작용 예시

요소를 클릭하세요

입력란에 입력

드롭다운에서 선택

요소를 기다리세요

스크린샷 찍기

뷰포트 크기 설정

탭 관리 예제

모든 탭 나열

새 탭 열기

탭으로 전환

탭 닫기

종속성

특허

기여하다

감사의 말

Tools

Related Resources

Appeared in Searches