크롬 확장 실습
이 레슨이 끝나면
- "크롬 익스텐션"이 정확히 뭐고
manifest.json이 무슨 역할인지 안다 - 본인 워크플로우에 어떤 익스텐션을 만들면 시간이 절약되는지 안다
/v6-chrome-ext스킬을 호출해서 본인용 익스텐션 1개를 실제로 만들고 본인 크롬에 설치한다
누구에게 추천? — 브라우저에서 일하는 시간이 긴 모든 사람. 리서처/마케터/번역가/학생에게 특히.
크롬 익스텐션 = 브라우저에 꽂는 작은 도구
크롬 익스텐션(Chrome Extension)은 크롬 브라우저 안에 들어가서 동작하는 작은 프로그램이에요. 본인이 평소 쓰는 광고 차단(AdBlock), 비밀번호 매니저(1Password), 번역기(DeepL) 같은 게 전부 익스텐션이에요. 주소창 우상단에 작은 아이콘이 떠는 그것들이요.
익스텐션은 크게 4가지 일을 할 수 있어요. (1) 현재 페이지 내용을 읽는다 (예: 본문 텍스트 추출). (2) 현재 페이지를 수정한다 (예: 광고 숨기기). (3) 주소창 옆 아이콘을 누르면 작은 팝업창이 뜬다 (예: 번역 결과 보여주기). (4) 외부 API를 호출한다 (예: Claude / Notion / Google Drive). 본인 워크플로우의 반복 작업이 이 4가지 안에 들어 있다면 익스텐션으로 자동화할 수 있어요.
manifest.json이 정확히 뭐예요?
모든 크롬 익스텐션은 manifest.json 파일 1개로 시작해요.
이 파일은 익스텐션의 이름표 + 권한 신청서예요.
"이 익스텐션 이름은 뭐고, 어떤 권한이 필요하고(예: 모든 페이지 읽기), 어떤 파일을 실행할 거다"를 크롬에게 알려 주는 약속이에요.
manifest.json (가장 단순한 형태)
스킬이 본인 입력에 맞춰 이 파일을 자동으로 만들어 줘요. 지금은 "이름표 한 장이구나" 정도만 보면 돼요.
{
"manifest_version": 3,
"name": "내 페이지 요약 → Notion",
"version": "0.1.0",
"description": "지금 보고 있는 페이지를 요약해서 Notion에 저장",
"permissions": ["activeTab", "storage"],
"host_permissions": ["https://api.anthropic.com/*", "https://api.notion.com/*"],
"action": {
"default_popup": "popup.html",
"default_icon": "icon.png"
}
}
permissions는 "권한 신청"이에요. activeTab은 "지금 본 탭만 읽을 수 있게 해 줘", storage는 "본인 PC에 작은 데이터 저장하게 해 줘".
host_permissions는 "외부 API 도메인에 요청 보낼 수 있게 해 줘".
action의 default_popup은 주소창 옆 아이콘을 클릭했을 때 뜨는 작은 HTML 페이지예요.
manifest_version 3은 현재 표준 버전(2024년 기준)이에요.
사례 — 본인 워크플로우 익스텐션
사례 1 — 리서처 R (32세, 콘텐츠 마케터)
매일 30개 기사를 읽고 Notion에 한 줄 요약 저장. 1시간 소요. 익스텐션: 페이지에서 아이콘 클릭 → Claude API로 3줄 요약 → Notion DB에 자동 저장. 10분으로 단축.
사례 2 — 영어 학습자 E (24세)
영어 기사 읽다가 모르는 단어를 매번 새 탭으로 사전 검색. 흐름이 끊김. 익스텐션: 단어를 더블클릭하면 작은 툴팁으로 한국어 의미 + 예문 + 발음. Claude API 1회 호출 분량으로 충분.
사례 3 — 1인 SaaS 운영자 K
경쟁 SaaS의 가격 페이지를 매주 모니터링. 익스텐션으로 가격 정보 자동 추출 → 본인 SaaS API로 전송 → 변동 시 Slack 알림.
이 스킬을 호출하는 시점
본인이 매일 브라우저에서 같은 종류의 페이지를 처리할 때. 페이지에서 정보를 꺼내거나 페이지에 무언가를 더하는 작업이 반복될 때.
Claude Desktop 입력
/v6-chrome-ext
스킬과의 단계별 진행
단계 1 — 익스텐션이 할 일 1줄로
"본인 익스텐션이 한 줄로 뭘 해 주나요?" → 예: "지금 페이지 요약해서 Notion에 저장"
단계 2 — 능력 4가지 중 어디?
(1) 페이지 읽기 / (2) 페이지 수정 / (3) 팝업 / (4) 외부 API. 본인은 어디 어디?
단계 3 — 권한 결정
activeTab 만 / 모든 사이트 접근 / 특정 도메인만? 권한은 최소로.
단계 4 — 파일 4개 생성
manifest.json, popup.html, popup.js, icon.png. 스킬이 자동 작성.
단계 5 — 본인 크롬에 설치
chrome://extensions → 우상단 "개발자 모드" 토글 ON → 좌상단 "압축 해제된 확장 프로그램 로드" → 본인 폴더 선택. 끝.
단계 6 — 1회 실제 페이지에서 테스트
본인이 자주 읽는 종류의 페이지(블로그·뉴스·문서)에서 아이콘 클릭. 결과가 의도대로 나오는지.
popup.html + popup.js 코드 예시
아래 두 파일(popup.html / popup.js)도 스킬이 자동으로 만들어 줘요. 직접 칠 필요 없이 "버튼 누르면 → 페이지 읽고 → AI에 보내고 → 결과 표시" 흐름만 눈으로 확인하세요.
popup.html
<!doctype html>
<html>
<body style="width:300px;padding:16px;font-family:system-ui;">
<h3>페이지 요약 → Notion</h3>
<button id="run">요약하기</button>
<p id="result"></p>
<script src="popup.js"></script>
</body>
</html>
popup.js (간단 버전)
document.getElementById("run").addEventListener("click", async () => {
// 1. 현재 탭의 본문 텍스트 가져오기
const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
const [{ result: pageText }] = await chrome.scripting.executeScript({
target: { tabId: tab.id },
func: () => document.body.innerText.slice(0, 5000)
});
// 2. Claude API에 요약 요청 (간단 호출)
const r = await fetch("https://api.anthropic.com/v1/messages", {
method: "POST",
headers: {
"x-api-key": "sk-ant-...",
"anthropic-version": "2023-06-01",
"content-type": "application/json"
},
body: JSON.stringify({
model: "claude-sonnet-4-5",
max_tokens: 300,
messages: [{ role: "user", content: "다음 글을 한국어 3줄로 요약: " + pageText }]
})
});
const j = await r.json();
document.getElementById("result").innerText = j.content[0].text;
});
⚠ API 키를 익스텐션 코드에 직접 넣지 마세요
위 예시는 단순화를 위해 키를 직접 넣었지만, 익스텐션 코드는 사용자 PC에 그대로 풀려서 키가 노출돼요. 실제 배포 익스텐션은 본인 SaaS의 백엔드(서버)를 거쳐 키를 숨겨야 해요. 본인만 쓰는 사이드로드(=내 PC에만 설치)라면 OK, 공개 배포는 절대 X. API 키 보안 기본 원칙은 6-3을 참고하세요.
막히는 지점 — 미리 답
① "압축 해제된 확장 프로그램 로드"가 안 보여요
우상단 "개발자 모드" 토글이 ON 되어 있는지 확인. OFF면 좌상단 버튼이 숨겨져 있어요.
② manifest 오류 메시지가 떠요
chrome://extensions 본인 익스텐션 카드 우하단의 "오류" 버튼 클릭 → 어떤 줄에서 문제가 났는지 표시.
대부분 JSON 문법 오류(콤마/괄호) 또는 manifest_version이 2(구버전)인 경우. 3으로 바꾸세요. 그 오류 메시지를 그대로 Claude Code에 복붙하면 바로 고쳐 줘요.
③ 외부 API 호출이 CORS로 막혀요
CORS(=브라우저가 "다른 사이트로 함부로 요청 못 보내게" 막는 보안 규칙)에 걸린 거예요.
host_permissions(접근 허용 도메인 목록)에 호출할 도메인 추가 + Service Worker(background.js, 백그라운드에서 도는 작은 코드)에서 호출하면 우회돼요. 스킬이 알아서 처리해 줘요. 막히면 그 에러 화면을 그대로 Claude Code에 복붙하세요.
④ 친구에게 공유하고 싶어요
(1) 폴더 zip해서 보내고 친구도 "압축 해제된" 모드로 설치 (사이드로드). (2) Chrome Web Store 등록 (1회 $5 + 검수 1~3일). 처음에는 (1)로 충분.
완료 체크리스트
- ☐ 본인 익스텐션이 할 일을 한 줄로 정의했다
- ☐ 4개 파일(manifest.json / popup.html / popup.js / icon.png)을 받았다
- ☐
chrome://extensions에서 사이드로드 설치 성공 - ☐ 실제 페이지에서 아이콘 클릭 → 팝업 + 결과가 뜸
- ☐ API 키는 본인만 보는 환경에 있고, 공개하지 않음
다음 활용 사례 → 6-5 AI 비서 만들기
익스텐션이 "브라우저 안의 작은 도우미"라면, AI 비서는 "본인 자료 전부를 base로 한 큰 도우미"예요. 본인 노트·문서·블로그를 컨텍스트로 한 개인 AI를 만들어 봐요. RAG라는 패턴을 배워요.
실습하기
로그인하면 스킬을 실습할 수 있습니다