클로드스킬마트스킬 둘러보기스킬이 뭐예요?
 
← 목록으로

Browser CDP 브라우저 자동화

Chrome DevTools Protocol로 이미 로그인된 Chrome을 그대로 조작해 페이지 열기·JS 실행·데이터 추출을 자동화합니다.

자동화·워크플로고급★ 5,290⑂ 809AI 점수 7/10마지막 업데이트: 2026. 8. 8.

무엇을 해주나

agent-browser CLI와 Chrome DevTools Protocol(CDP)을 이용해 이미 로그인된 Chrome 세션을 그대로 재사용하면서 브라우저를 자동 조작합니다.

  • 디버그 모드 Chrome 탐지/실행 (--detect-only로 부작용 없이 상태 확인)
  • URL 열기, 로딩 대기, 임의 JavaScript 평가(eval)
  • 페이지 텍스트 추출, 인터랙티브 요소 스냅샷(snapshot -i), 클릭·입력
  • 복잡한 JS는 base64(-b) 또는 heredoc(--stdin)으로 셸 이스케이프 문제 회피
  • localStorage/쿠키에서 인증 토큰 꺼내기
  • macOS/Linux는 timeout, Windows는 PowerShell Job으로 CDP 명령 타임아웃 래핑
  • 첫 실행 시 기존 Chrome을 종료해야 하는 경우 반드시 사용자 동의를 먼저 받도록 강제(종료 코드 3 = 동의 필요)

이런 분께 추천

  • 로그인이 필요한 사이트(사내 어드민, SNS, 대시보드)를 자동으로 조회·수집하려는 개발자
  • 헤드리스 크롤러로는 캡차/세션 문제 때문에 접근이 어려운 페이지를 다루는 분
  • API 호출용 Bearer 토큰을 브라우저에서 꺼내 후속 스크립트에 넘기고 싶은 분
  • Node.js 20+ 및 전역 npm 설치가 가능한 환경을 가진 중급 이상 사용자

활용 예시

  1. 로그인 필요한 대시보드 스크래핑: "CDP로 사내 대시보드 열고 본문 텍스트 뽑아줘" → --detect-only로 상태 확인 → 필요 시 동의 후 디버그 Chrome 실행 → open → wait 3000 → eval 'document.body.innerText'.
  2. API 토큰 추출: eval 'localStorage.getItem("token") || document.cookie'로 토큰을 얻어 이어지는 curl 요청에 사용.
  3. 랭킹 페이지 페이지네이션 수집: 페이지별로 timeout 30 agent-browser --cdp 9222 eval ...로 감싸 세션 블로킹을 막고, 실패한 페이지부터 이어서 재시도.

· · · 설치 가이드 · · ·

Claude 앱에 설치 (터미널 필요 없음)
  1. 아래 버튼으로 ZIP 파일을 받으세요.
  2. Claude 설정 → Capabilities에서 '코드 실행 및 파일 생성'을 켭니다. (한 번만)
  3. Claude에서 Customize → Skills → + → '스킬 업로드'를 누르고 받은 ZIP을 올립니다.
↓ ZIP 내려받기
Claude Code에 설치

Claude에게 맡기기 — 아래 문장을 Claude Code에 붙여넣으세요

클로드스킬마트에서 찾은 스킬을 설치해줘.
GitHub 저장소 worldwonderer/oh-story-claudecode 의 skills/browser-cdp 폴더를 내 ~/.claude/skills/browser-cdp/ 에 그대로 복사해줘.
설치가 끝나면 이 스킬로 무엇을 할 수 있는지 한 줄로 알려줘.

직접 명령으로 설치하기

git clone https://github.com/worldwonderer/oh-story-claudecode.git && mkdir -p ~/.claude/skills && cp -r oh-story-claudecode/skills/browser-cdp ~/.claude/skills/ && npm install -g agent-browser

⚠ 제3자가 만든 스킬입니다. 설치 전 원본 저장소를 한 번 확인하세요.

  1. 사전 준비: Google Chrome과 Node.js 20 이상을 설치합니다.
  2. CLI 설치: 터미널에서 npm install -g agent-browser 를 실행합니다.
  3. 스킬 내려받기: git clone https://github.com/worldwonderer/oh-story-claudecode.git
  4. 스킬 폴더로 복사: mkdir -p ~/.claude/skills && cp -r oh-story-claudecode/skills/browser-cdp ~/.claude/skills/
  5. 설치 확인: Claude Code를 다시 실행하고 /skills 목록에 browser-cdp가 보이는지 확인합니다.
  6. 첫 실행 주의: 작업 중인 Chrome 탭/초안을 모두 저장하세요. 첫 기동 시 기존 Chrome을 종료해야 할 수 있으며, Claude가 먼저 동의를 물어봅니다.
  7. 상태 점검: node ~/.claude/skills/browser-cdp/scripts/setup-cdp-chrome.js 9222 --detect-only 로 CDP 준비 상태를 확인할 수 있습니다.
GitHub에서 원본 보기 ↗라이선스: MIT