크롬 확장 실습
이 레슨이 끝나면
- "크롬 익스텐션"이 정확히 뭐고
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
<!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 키를 익스텐션 코드에 직접 넣지 마세요
위 예시는 단순화를 위해 키를 직접 넣었지만, 실제 배포 익스텐션에서는 본인 SaaS의 백엔드를 거쳐야 해요. 익스텐션 코드는 사용자 PC에 그대로 풀려서 키가 노출돼요. 본인만 쓰는 사이드로드라면 OK, 공개 배포는 절대 X.
막히는 지점 — 미리 답
① "압축 해제된 확장 프로그램 로드"가 안 보여요
우상단 "개발자 모드" 토글이 ON 되어 있는지 확인. OFF면 좌상단 버튼이 숨겨져 있어요.
② manifest 오류 메시지가 떠요
chrome://extensions 본인 익스텐션 카드 우하단의 "오류" 버튼 클릭 → 어떤 줄에서 문제가 났는지 표시.
대부분 JSON 문법 오류(콤마/괄호) 또는 manifest_version이 2(구버전)인 경우. 3으로 바꾸세요.
③ 외부 API 호출이 CORS로 막혀요
host_permissions에 호출할 도메인 추가 + Service Worker(background.js)에서 호출하면 CORS 우회. 스킬이 알아서 처리해 줘요.
④ 친구에게 공유하고 싶어요
(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라는 패턴을 배워요.
실습하기
로그인하면 스킬을 실습할 수 있습니다