MCP로 Google 메시지 Claude 코드에 연결하는 Chrome 확장 프로그램 구축 방법

Docker나 클라우드 서버 없이 직접 통합

한 개발자가 Google Messages Web 세션에 주입하여 Model Context Protocol(MCP)을 통해 Claude Code와 연결하는 Chrome 확장 프로그램을 만들었습니다. 이 아키텍처는 Claude Code와 Node.js MCP 서버 간에 stdio 전송을 사용하며, MCP 서버는 localhost:7008의 WebSocket을 통해 Chrome 확장 프로그램과 통신합니다.

기존 솔루션 대비 작동 방식

개발자는 먼저 두 가지 기존 접근 방식을 시도했습니다:

OpenMessage: 몇 분 동안 활동이 없으면 세션이 만료되어 "잘못된 세션 ID" 오류를 발생시키는 SSE 세션과 libgm 프로토콜을 사용하는 Docker 컨테이너입니다. 새 메시지를 동기화하려면 Docker 컨테이너를 재시작해야 하며, 7개의 MCP 도구를 사용합니다(대화당 약 1,500 토큰).
TextBee: 모든 개인 SMS 메시지를 클라우드 서버를 통해 라우팅하는 Android SMS 게이트웨이 앱입니다(SMS만 지원, RCS 없음). 기본적인 문자 메시지 전송을 위해 웹훅 서버와 Tailscale/ngrok 터널이 필요하여 총 5개의 구성 요소가 필요합니다.

새로운 Chrome 확장 프로그램 접근 방식은 약 300 토큰의 오버헤드로 세 가지 작동하는 MCP 도구를 가지고 있습니다:

list_chats – 이름, 스니펫 및 타임스탬프가 포함된 모든 대화를 반환합니다
read_messages – 전송/수신 방향이 포함된 전체 메시지 기록을 제공합니다
send_message – 텍스트를 입력하지만 실제로 보내지는 않습니다(현재 초안 도구로 작동)

Angular 격리 문제

Google Messages Web은 Angular 앱으로, Chrome 확장 프로그램 콘텐츠 스크립트는 페이지와 별도의 JavaScript 컨텍스트인 "격리된 세계"에서 실행됩니다. Angular의 zone.js는 기본 세계의 이벤트 리스너만 패치하므로 확장 프로그램이 텍스트 영역 값을 설정하고 보내기 버튼을 클릭하면:

텍스트가 입력란에 나타납니다 ✓
보내기 버튼이 클릭됩니다 ✓
Angular의 폼 컨트롤이 값 변경을 감지하지 못하므로 클릭 핸들러가 필드가 비어 있다고 판단합니다 ✗

시도한 해결 방법

개발자는 여러 접근 방식을 시도했습니다:

네이티브 값 설정자 + 입력 이벤트
document.execCommand('insertText')
전체 마우스 이벤트 시퀀스(pointerdown/mousedown/mouseup/click)
엔터 키 시뮬레이션
Manifest V3 world: "MAIN" 콘텐츠 스크립트(가장 가까이 접근했지만 여전히 보내지 않음)

기본 세계 스크립트의 디버그 출력은 다음과 같습니다: {"valueSet": true, "btnLabel": "Send end-to-end encrypted RCS message", "clicked": true, "inputAfter": "text still here...", "sentVia": "none"}

탐색할 수 있는 잠재적 해결 방법

개발자는 다음을 고려하고 있습니다:

신뢰할 수 있는 입력 이벤트를 위한 chrome.debugger API
DOM 요소의 __ngContext__를 통해 Angular의 NgZone에 접근
Input.dispatchKeyEvent를 위한 CDP(Chrome DevTools Protocol)

이 프로젝트는 오픈 소스이며 저장소는 https://github.com/GURSEWAKSINGHSANDHU/google-messages-mcp에 있고, 이슈 추적은 https://github.com/GURSEWAKSINGHSANDHU/google-messages-mcp/issues/1에서 확인할 수 있습니다.

📖 전체 소스 읽기: r/ClaudeAI