클로드스킬마트스킬 둘러보기바로 쓰는 문장영상으로 배우기터미널 사용법스킬이 뭐예요?
 
← 목록으로

브라우저 CDP 자동화

Chrome DevTools Protocol로 기존 로그인 세션을 그대로 쓰면서 브라우저를 자동 조작하는 스킬입니다.

자동화·워크플로중급★ 6,025⑂ 894AI 점수 9/10마지막 업데이트: 2026. 8. 24.

무엇을 해주나

  • Chrome을 디버그 모드(포트 9222)로 띄우고 CDP로 연결해 이미 로그인된 세션을 그대로 재사용합니다.
  • agent-browser CLI로 페이지 열기, 로딩 대기, JavaScript 실행, 스냅샷(상호작용 요소 목록), 클릭·입력을 수행합니다.
  • localStorage/쿠키에서 인증 토큰을 추출해 후속 API 호출에 활용할 수 있습니다.
  • 실행 전 --detect-only로 상태를 먼저 확인하고, 사용자 Chrome이 켜져 있으면 반드시 동의를 받도록 절차를 강제합니다.
  • 타임아웃 래핑(timeout, PowerShell Job), 종료 코드 규약, 안전한 프로세스 정리 방법까지 안내합니다.

이런 분께 추천

  • 로그인이 필요한 사이트의 데이터를 반복적으로 수집·확인해야 하는 분
  • 사내 어드민, SaaS 대시보드처럼 API 토큰이 브라우저에만 있는 환경을 다루는 분
  • Playwright 새 세션으로는 로그인 재현이 번거로워 기존 프로필을 그대로 쓰고 싶은 개발자

활용 예시

  1. "이 대시보드 URL 열고 본문 텍스트 8000자만 뽑아줘" → open → wait → eval document.body.innerText
  2. "로그인된 상태의 액세스 토큰 알려줘" → eval 'localStorage.getItem("token") || document.cookie'
  3. "검색창에 키워드 입력하고 결과 첫 페이지 긁어줘" → snapshot -i로 요소 참조 확보 후 type + click, 이어서 eval로 결과 추출

· · · 설치 가이드 · · ·

설치 없이 지금 한 번 써보기

아래를 Claude에 붙여넣으면 설치하지 않고도 이 스킬을 그대로 씁니다.

이 파일의 지시를 읽고 그대로 따라서 나를 도와줘:
https://raw.githubusercontent.com/zenstory-ai/oh-story-claudecode/HEAD/skills/browser-cdp/SKILL.md

내가 원하는 것: (여기에 하고 싶은 일을 쓰세요)

Claude가 링크를 열지 못하면, 링크를 직접 열어 내용을 복사해 붙여넣으세요.

↓ 쓸 만하면 아래에서 ZIP을 받아 설치하세요. 그러면 매번 붙여넣지 않아도 알아서 작동합니다.

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

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

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

직접 명령으로 설치하기

git clone https://github.com/zenstory-ai/oh-story-claudecode.git /tmp/oh-story-claudecode && mkdir -p ~/.claude/skills && cp -r /tmp/oh-story-claudecode/skills/browser-cdp ~/.claude/skills/

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

  1. Google Chrome과 Node.js 20 이상이 설치되어 있는지 확인합니다.
  2. CLI 도구를 설치합니다: npm install -g agent-browser
  3. 저장소를 받습니다: git clone https://github.com/zenstory-ai/oh-story-claudecode.git
  4. 스킬 폴더를 복사합니다: mkdir -p ~/.claude/skills && cp -r oh-story-claudecode/skills/browser-cdp ~/.claude/skills/
  5. Claude Code를 재시작하고 "브라우저 CDP로 이 페이지 열어줘"처럼 요청해 스킬이 로드되는지 확인합니다.
  6. 처음 실행 시 기존 Chrome이 종료될 수 있으니, 작업 중인 탭을 먼저 저장하거나 Chrome을 직접 닫아두세요.
GitHub에서 원본 보기 ↗라이선스: MIT