Chrome 확장 프로그램
읽는 시간: 5분 | 난이도: 초급자
Chrome 브라우저에서 Claude를 활용하는 방법을 알아봅니다.
Chrome에서 Claude 사용하기
Chrome 브라우저에서는 주로 두 가지 방법으로 Claude를 사용합니다:
- claude.ai 웹 인터페이스 - 브라우저에서 직접 접속
- Claude.ai 사이드 패널 - Chrome의 사이드 패널 기능 활용
Claude.ai 사이드 패널 설정
Chrome의 사이드 패널 기능을 사용하면 다른 작업을 하면서 Claude와 대화할 수 있습니다.
설정 방법
- Chrome 브라우저에서 claude.ai 접속
- 주소창 오른쪽의 사이드 패널 아이콘 클릭 (또는 Ctrl+Shift+P)
- Claude를 사이드 패널에 고정
활용 시나리오
웹 개발 중 사용:
1. 한쪽에는 개발 중인 웹사이트
2. 다른 쪽에는 Claude 사이드 패널
3. 실시간으로 질문하고 코드 받기
문서 작성 중 사용:
1. Google Docs, Notion 등에서 작업
2. 옆에 Claude로 즉시 도움 받기
웹 개발에서 활용하기
현재 페이지 분석
Chrome DevTools와 함께 사용:
- F12로 DevTools 열기
- Console 탭에서 에러 메시지 복사
- Claude에 붙여넣고 해결책 요청
> Chrome Console에 이런 에러가 나왔어:
Uncaught TypeError: Cannot read properties of null
(reading 'addEventListener')
at script.js:45:3
원인과 해결 방법을 알려줘
CSS 스타일 디버깅
> Chrome DevTools에서 확인한 CSS인데
플렉스박스 레이아웃이 의도한 대로 동작하지 않아:
[CSS 코드 붙여넣기]
무엇이 문제인지 설명해줘
네트워크 요청 분석
> Network 탭에서 이 API 요청이 실패하고 있어:
Status: 422 Unprocessable Entity
Request Body: [JSON 내용]
Response: [에러 내용]
무엇이 잘못된 건지 설명해줘
Chrome 확장 개발에 Claude 활용
Chrome 확장 프로그램을 개발할 때 Claude를 활용하세요:
Manifest 파일 도움
> Chrome Manifest V3 형식으로
특정 도메인의 요청을 차단하는
확장 프로그램의 manifest.json을 작성해줘
Content Script 작성
// Claude에게 요청:
// 현재 페이지의 모든 이미지에
// lazy loading 속성을 추가하는
// Content Script를 작성해줘
Background Service Worker
> Manifest V3의 Background Service Worker로
탭 열기 이벤트를 모니터링하고
특정 URL은 자동으로 닫는 기능을 구현해줘
개발자 도구 통합 팁
Performance 분석
Chrome DevTools의 Performance 탭 결과를 Claude와 분석:
- DevTools → Performance → 녹화
- 프로파일 결과 스크린샷 촬영
- Claude에 이미지 업로드 후 분석 요청
접근성 검사
> Chrome DevTools의 Lighthouse 접근성 리포트 결과야:
[결과 붙여넣기]
우선순위가 높은 문제들부터 수정하는 방법을 알려줘
bookmarklet 활용
Claude와의 협업을 위한 유용한 북마크릿:
코드 추출 북마크릿
javascript:(function(){
var code = document.querySelector('pre code, .highlight');
if(code) {
navigator.clipboard.writeText(code.innerText);
alert('코드가 클립보드에 복사되었습니다!');
}
})();
키보드 단축키 활용
| 단축키 | 동작 |
|---|---|
| Ctrl+L | 주소창으로 이동 (claude.ai 빠른 접속) |
| Ctrl+T | 새 탭에서 Claude 열기 |
| Ctrl+Shift+P | 사이드 패널 토글 |
생산성 팁
1. 북마크 바에 Claude 추가
즐겨찾기 바에 claude.ai 저장
Alt+1 등 단축키로 빠른 접근
2. 자주 사용하는 프롬프트 템플릿 저장
Chrome 북마크에 자주 사용하는 프롬프트 패턴을 텍스트 파일로 저장
3. 다중 Claude 탭 활용
여러 Claude 탭을 동시에 열어 다른 작업 병렬 처리
다음 단계
- 웹에서 Claude Code - 더 자세한 웹 활용법
- VS Code 통합 - IDE에서 직접 사용
- 데스크탑 앱 - 네이티브 앱 사용