OpenCode in Chrome

로컬 opencode 에이전트가 브라우저를 보고 제어할 수 있게 하세요 — 탭, 클릭, JS, 스크린샷.

Anton Petnitsky · github.com/Mukller · LinkedIn

opencode용 Claude-in-Chrome 대안: Chrome 확장 프로그램 + MCP 인터페이스를 갖춘 로컬 브리지. 에이전트는 로그인된 세션을 포함한 실제 실행 중인 브라우저를 완전히 제어할 수 있으며, --remote-debugging-port도 클라우드도 필요 없습니다. 모든 것은 localhost를 통해 처리됩니다.

┌──────────────────┐   WebSocket    ┌─────────────────┐    stdio/MCP    ┌──────────┐
│ Chrome extension │◄──────────────►│  bridge (Node)  │◄───────────────►│ opencode │
│  chrome.debugger │  127.0.0.1     │  ws + mcp       │                 │          │
└──────────────────┘                └─────────────────┘                 └──────────┘

핵심 비법: 확장 프로그램이 chrome.debugger를 통해 CDP 세션을 직접 띄우기 때문에 브라우저 시작 플래그가 필요 없고, 모든 프로필과 쿠키가 평소처럼 동작합니다.

기능

Related MCP server: @nimbus21.ai/chrome-devtools-mcp

설치

1. 브리지

git clone https://github.com/Mukller/opencode-chrome.git
cd opencode-chrome
npm install
node bridge/bridge.mjs

첫 실행 시 브리지가 토큰을 출력하고 ~/.opencode-chrome/token에 저장합니다.

2. 확장 프로그램

1. chrome://extensions 열기 → 개발자 모드 켜기

2. 압축 해제된 확장 프로그램 로드 → extension/ 폴더 선택

3. 확장 프로그램 아이콘을 클릭 → 설정 → 1단계의 토큰을 붙여 넣기 → 저장하고 다시 연결(Save & reconnect)

4. 아이콘 배지가 초록색 ON으로 바뀌어야 합니다.

3. opencode에 연결

~/.config/opencode/opencode.json(또는 프로젝트의 opencode.json)에서:

{
  "mcp": {
    "chrome": {
      "type": "local",
      "command": ["node", "<путь до репо>/bridge/bridge.mjs"],
      "enabled": true
    }
  }
}

opencode를 다시 시작하면 chrome_* 도구가 에이전트에 표시됩니다.

브리지 환경 변수: OPENCODE_CHROME_PORT(기본값 8766), OPENCODE_CHROME_TOKEN(파일 대신 고정 토큰).

보안

• WS 서버는 127.0.0.1에서만 듣고 있으며, 외부 연결은 거부됩니다.

• 핸드셰이크에는 토큰이 필요합니다. 잘못된 토큰은 연결이 끊깁니다.

• 확장 프로그램은 연결된 브리지에서만 명령을 실행하며, 활성 작업 중에는 디버깅 시작됨 노란색 배너에 작업 내용이 표시됩니다.

알려진 제한 사항

• 탭에서 CDP 세션이 활성화되어 있는 동안 Chrome은 “확장 프로그램이 이 브라우저의 디버깅을 시작합니다” 인포바를 표시합니다. devtools 플래그 없이 접근하기 위한 대가입니다.

• 확장 프로그램의 서비스 작업자는 Chrome이 유휴 상태일 때 슬립합니다. 브리지는 자동 재연결(auto-reconnect)을 기다릴 뿐입니다.

테스트

npm test        # E2E: фейковое расширение + MCP-клиент против реального моста

라이선스

MIT © Anton Petnitsky