AI로 크롬 확장프로그램 만들기
코딩 지식 0%
Claude로 코드 받고 → 크롬에 바로 설치 — 나만의 브라우저 기능을 30분 안에
📋 이 글에서 알 수 있는 것
- 크롬 확장프로그램이 어떤 파일로 구성되는지 (팩트 기반)
- Claude에게 코드를 요청하는 실전 프롬프트 예시
- 개발자 모드로 내 컴퓨터에 바로 설치해보는 방법
- 실제 예제: 페이지의 텍스트를 클립보드에 복사하는 확장프로그램
- 크롬 웹스토어 등록 절차와 비용 ($5 개발자 등록비)
크롬 확장프로그램이란
크롬 확장프로그램(Chrome Extension)은 크롬 브라우저에 기능을 추가하는 미니 앱입니다. 광고 차단기 uBlock Origin, 비밀번호 관리자 LastPass, 번역 도구 DeepL 등이 모두 크롬 확장프로그램입니다.
그런데 이걸 직접 만들 수 있다는 걸 아는 사람은 많지 않습니다. 그리고 AI 덕분에 이제는 코딩을 몰라도 만들 수 있게 됐습니다. 크롬 확장프로그램은 사실 구조가 매우 단순합니다.
⚡ 크롬 확장프로그램의 기본 구조
모든 크롬 확장프로그램은 최소 두 개의 파일로 구성됩니다.
- manifest.json: 확장프로그램의 이름·버전·권한 등을 정의하는 설정 파일
- 기능 파일 (JS/HTML/CSS): 실제 동작을 구현하는 코드 파일
이 두 파일을 하나의 폴더에 넣고 크롬 개발자 모드에서 불러오면 즉시 설치됩니다. 서버도, 앱스토어 승인도 필요 없습니다.
비개발자도 AI로 앱 만든다: 기획부터 배포까지 완전 가이드를 읽어보세요.
아이디어 정하기
크롬 확장프로그램은 브라우저에서 반복하는 불편한 일을 자동화하거나 새 기능을 추가하는 게 핵심입니다. 처음엔 기능이 단 하나인 간단한 것부터 시작하는 게 좋습니다.
💡 비개발자가 만들기 좋은 확장프로그램 아이디어
- 페이지 텍스트 복사: 선택한 텍스트 또는 페이지 전체를 클립보드에 복사
- 특정 요소 숨기기: 자주 가는 사이트의 특정 광고·배너 숨기기
- 단어 하이라이트: 특정 키워드가 있는 페이지에서 해당 단어를 색상으로 표시
- 빠른 북마크: 현재 페이지를 원하는 노션·구글시트에 바로 저장
- 다크모드 토글: 원하는 사이트에만 다크모드 적용
이 글에서는 "현재 페이지에서 선택한 텍스트를 버튼 클릭으로 클립보드에 복사하는 확장프로그램"을 예제로 만들어보겠습니다. 구조가 단순해서 처음 만들기에 딱 좋습니다.
① 어떤 상황에서 쓰나? (예: 유튜브를 볼 때)
② 어떤 동작을 하나? (예: 버튼을 클릭하면)
③ 결과가 무엇인가? (예: 자막 텍스트가 클립보드에 복사된다)
이 세 가지가 정해지면 AI에게 요청할 준비가 된 겁니다.
Claude로 코드 받기
아이디어가 정해졌다면 Claude(claude.ai)에게 코드를 요청합니다. 아래 프롬프트 형식을 참고하세요.
📝 Claude 프롬프트 예시
"크롬 확장프로그램을 만들어줘.
기능: 브라우저에서 텍스트를 선택하고 확장프로그램 팝업의 '복사' 버튼을 클릭하면, 선택한 텍스트가 클립보드에 복사되는 기능
조건:
- manifest.json (Manifest V3 기준)
- popup.html (버튼 하나짜리 간단한 팝업)
- popup.js (복사 동작 로직)
- content.js (선택된 텍스트 감지)
- 각 파일의 전체 코드를 순서대로 출력해줘
- 초보자도 이해할 수 있도록 주석 포함"
크롬은 2023년부터 Manifest V3를 기본 표준으로 사용합니다. 프롬프트에 "Manifest V3 기준"을 명시하지 않으면 구버전(V2) 코드가 나올 수 있습니다. V2 코드는 현재 크롬에서 경고가 뜨거나 작동하지 않을 수 있습니다.
Claude가 파일별 코드를 출력해주면 각각 복사해서 파일로 저장합니다. 코드 내용을 이해하지 못해도 괜찮습니다. 일단 파일로 저장하는 것이 다음 단계의 전부입니다.
파일 만들고 크롬에 설치하기
받은 코드를 파일로 저장하고 크롬에 개발자 모드로 설치합니다. 설치 과정은 생각보다 훨씬 쉽습니다.
폴더 만들기
바탕화면이나 원하는 위치에 새 폴더를 만듭니다. 이름은 my-extension처럼 영어로 짓는 게 좋습니다.
파일 저장
메모장(Windows) 또는 텍스트 편집기(Mac)를 열고, Claude가 출력한 코드를 붙여넣은 뒤 각각 manifest.json, popup.html, popup.js, content.js 이름으로 위 폴더에 저장합니다.
크롬 확장프로그램 관리 페이지 열기
크롬 주소창에 chrome://extensions를 입력합니다. 또는 크롬 우측 상단 점 세 개 메뉴 → 확장 프로그램 → 확장 프로그램 관리에서 접근할 수 있습니다.
개발자 모드 켜기
확장 프로그램 관리 페이지 우측 상단의 개발자 모드 토글을 켭니다. 토글이 활성화되면 "압축해제된 확장 프로그램 로드" 버튼이 나타납니다.
폴더 선택하여 설치
"압축해제된 확장 프로그램 로드" 버튼을 클릭하고, 아까 만든 my-extension 폴더를 선택합니다. 오류 없이 설치되면 확장프로그램 목록에 내가 만든 확장프로그램이 나타납니다.
메모장에서 저장할 때 파일 형식을 반드시 "모든 파일(*.*)"로 바꾸고, 파일 이름을
manifest.json처럼 확장자까지 직접 입력하세요. 기본값으로 저장하면 manifest.json.txt처럼 .txt가 붙어버립니다. VS Code나 메모장++ 같은 에디터를 쓰면 이 문제가 없습니다.
테스트 및 수정
설치가 됐다면 실제로 작동하는지 확인합니다. 예제 확장프로그램의 경우 아무 웹페이지에서 텍스트를 선택한 뒤 크롬 우측 상단 확장프로그램 아이콘 → 내 확장프로그램 → '복사' 버튼을 클릭하면 됩니다.
설치 시 빨간 오류 메시지가 뜨는 경우
→ 오류 메시지 전체를 복사해 Claude에게 "이 오류가 뜨는데 어떻게 고치면 되나?"라고 붙여넣으세요. 대부분 manifest.json 문법 오류이며 Claude가 바로 수정해줍니다.
동작은 되는데 원하는 대로 안 되는 경우
→ Claude에게 "지금 이런 동작이 나오는데, 원하는 건 [설명]야. 어떻게 수정하면 되나?"라고 요청합니다. 코드 일부를 수정해서 돌려주면 해당 파일만 바꾸고 크롬에서 새로고침(↻)하면 됩니다.
파일을 수정한 뒤에는
chrome://extensions 페이지에서 해당 확장프로그램의 새로고침 아이콘(↻)을 클릭해야 변경 사항이 반영됩니다. 브라우저 전체를 껐다 켤 필요는 없습니다.
웹스토어 등록하고 싶다면
개발자 모드로 설치한 확장프로그램은 내 컴퓨터에서만 작동합니다. 다른 사람들도 쓸 수 있게 하려면 크롬 웹스토어에 등록해야 합니다.
개발자 계정 등록 ($5 일회성)
Chrome Web Store Developer Dashboard(chrome.google.com/webstore/devconsole)에서 구글 계정으로 로그인 후 개발자 등록비 $5를 결제합니다. 일회성 비용이며 이후 무제한으로 앱을 등록할 수 있습니다.
패키지 업로드
확장프로그램 폴더를 ZIP 파일로 압축한 뒤 대시보드에서 업로드합니다. 아이콘(128×128px), 설명, 스크린샷 등 메타데이터를 함께 입력합니다.
검토 대기
구글 팀이 정책 위반 여부를 검토합니다. 간단한 확장프로그램은 보통 수일 내 승인되지만, 경우에 따라 더 걸릴 수 있습니다. 승인 후 웹스토어에 공개됩니다.
구글은 개인정보 수집, 의심스러운 권한 요청, 중복 콘텐츠 등에 엄격합니다. 등록 전 Chrome Web Store 개발자 정책을 반드시 확인하세요. AI가 생성한 코드가 광범위한 권한을 요청하는 경우 최소한의 권한만 사용하도록 Claude에게 수정을 요청하는 것이 좋습니다.
자주 묻는 질문
프로그래밍을 전혀 몰라도 크롬 확장프로그램을 만들 수 있나요?
간단한 기능이라면 가능합니다. AI가 코드를 생성해주고, 파일로 저장해 크롬에 설치하는 과정에서 코딩 지식은 필요 없습니다. 다만 오류가 생겼을 때 원인을 파악하거나 복잡한 기능을 추가하려면 기초적인 이해가 도움이 됩니다. 처음엔 단순한 기능부터 시작하는 걸 권장합니다.
Claude 대신 ChatGPT로도 코드를 받을 수 있나요?
네, ChatGPT도 잘 생성해줍니다. 같은 프롬프트를 넣으면 비슷한 품질의 코드를 받을 수 있습니다. 결과물에 차이가 있다면 두 툴 모두에 요청해보고 더 잘 동작하는 쪽을 선택하면 됩니다.
개발자 모드로 설치한 확장프로그램은 안전한가요?
내가 직접 만든 코드를 내 컴퓨터에서만 실행하는 것이므로 안전합니다. 다만 인터넷에서 다른 사람이 만든 확장프로그램 코드를 복사해 설치하는 것은 주의가 필요합니다. 출처를 모르는 코드는 실행 전에 Claude에게 "이 코드에 보안 위험이 있나?"라고 검토를 요청하는 게 좋습니다.
크롬이 아닌 브라우저(엣지, 웨일 등)에서도 쓸 수 있나요?
Microsoft Edge와 네이버 웨일은 크롬과 동일한 Chromium 기반이라 크롬 확장프로그램을 그대로 설치할 수 있습니다. Edge는 Chrome Web Store의 확장프로그램을 설치하도록 허용하고 있습니다.
웹스토어 등록 없이 다른 사람과 공유할 수는 없나요?
가능합니다. 확장프로그램 폴더를 ZIP 파일로 압축해서 공유하면 상대방도 동일하게 개발자 모드로 설치할 수 있습니다. 다만 일반 사용자에게는 이 과정이 낯설 수 있으니 설치 방법을 함께 안내해주는 게 좋습니다.
크롬 확장프로그램, 생각보다 어렵지 않습니다.
아이디어 정하기 → Claude에게 코드 받기 → 파일 저장 → 크롬에 설치
이 네 단계만 따라가면 30분 안에 나만의 브라우저 기능이 완성됩니다.
VibeLab이었습니다.