AI로 크롬 확장 프로그램 만들기 — 기획부터 배포까지 1시간

게시일 2026-04-28수정일 2026-04-28

브라우저에 기능을 추가하고 싶지만 코딩을 모른다면

특정 사이트에서 광고를 숨기거나, 선택한 텍스트를 자동 번역하거나, 자주 쓰는 문구를 단축키로 붙여넣고 싶은 상황이 있습니다. 이런 기능은 대부분 크롬 확장 프로그램으로 구현할 수 있습니다. 문제는 확장 프로그램을 만들려면 JavaScript를 알아야 한다는 점이었습니다. 2026년 4월 기준, 이 전제가 달라졌습니다. Claude나 ChatGPT 같은 AI에게 원하는 기능을 설명하면 동작하는 코드를 받아 1시간 안에 배포까지 마칠 수 있습니다.

크롬 확장 프로그램이란 무엇인가

크롬 확장 프로그램(Chrome Extension)은 Chrome 브라우저에 기능을 추가하는 소형 소프트웨어 패키지입니다. Chrome Web Store에서 설치하거나, 직접 만든 파일을 로컬에서 불러올 수 있습니다. 구조적으로 4가지 핵심 파일로 구성됩니다.

manifest.json: 확장 프로그램의 설정 파일입니다. 이름·버전·권한·파일 구조를 정의합니다.
popup.html / popup.js: 확장 프로그램 아이콘을 클릭했을 때 나타나는 UI입니다.
content.js: 실제 웹페이지 위에서 실행되는 스크립트입니다. 페이지의 DOM(Document Object Model, 문서 구조)을 읽거나 수정할 수 있습니다.
background.js (Service Worker): 페이지와 독립적으로 백그라운드에서 실행되는 스크립트입니다.

2023년부터 Chrome은 Manifest V3(이하 MV3)를 기본 사양으로 채택했습니다. AI에게 코드를 요청할 때 "Manifest V3 기준으로 작성해줘"라고 명시해야 구형 사양(V2)으로 응답하는 오류를 방지할 수 있습니다. MV3는 Service Worker 방식을 채택해 백그라운드 스크립트가 항상 실행되는 대신 이벤트 발생 시에만 깨어나는 구조입니다. 이 차이를 알고 있으면 AI가 잘못된 구조로 코드를 생성했을 때 어떤 부분을 다시 요청해야 하는지 파악하기 쉽습니다.

AI 바이브코딩으로 확장 프로그램을 만드는 원리

바이브코딩(Vibe Coding)은 코드를 직접 짜는 대신, AI에게 기능을 말로 설명하고 받은 코드를 조합해 결과물을 만드는 방식을 뜻합니다. 확장 프로그램 제작에 적용하면 다음 흐름이 됩니다.

1. 기능 명세 작성: 무엇을 하는 확장인지 한국어로 구체적으로 설명합니다.
2. AI에게 전체 파일 요청: manifest.json, popup.html, popup.js, content.js를 한 번에 요청합니다.
3. 로컬 로드로 즉시 테스트: Chrome에 파일을 직접 불러와 동작을 확인합니다.
4. 오류 발생 시 콘솔 메시지 붙여넣기: 오류 문구를 그대로 AI에게 전달해 수정 코드를 받습니다.
5. Chrome Web Store 제출: 완성된 파일을 zip으로 압축해 등록합니다.

JavaScript 문법을 몰라도 이 흐름을 따라가면 됩니다. AI가 작성한 코드를 복사해 파일에붙여넣는 것만으로 동작하는 확장 프로그램이 만들어집니다. 중요한 것은 기능을 구체적으로 설명하는 것입니다. "광고 숨기기"보다 "example.com에서 class가 ad-banner인 div를 페이지 로드 시 숨기기"처럼 구체적으로 요청할수록 AI가 정확한 코드를 생성합니다.

실습: 선택한 텍스트에 자동으로 따옴표를 붙여 복사하는 확장 만들기

1단계 — AI에게 전체 코드 요청

Claude 또는 ChatGPT에 다음과 같이 입력합니다.

Chrome 확장 프로그램을 만들어줘. 기능: 사용자가 웹페이지에서 텍스트를 선택하고 Ctrl+Shift+C를 누르면, 선택한 텍스트 앞뒤에 큰따옴표("")를 붙인 뒤 클립보드에 복사한다. Manifest V3 기준으로 manifest.json, content.js 파일을 전체 코드로 작성해줘.

AI가 두 파일의 전체 코드를 출력합니다. 각각 복사해서 텍스트 편집기(메모장, VS Code 등)에 붙여넣고 파일명을 지정해 저장합니다.

2단계 — 폴더 구조 만들기

quote-extension/ 폴더를 새로 만듭니다.
폴더 안에 manifest.json과 content.js 두 파일을 저장합니다.

폴더 이름은 자유입니다. 두 파일이 같은 폴더 안에 있으면 됩니다.

3단계 — Chrome에 로드하기

1. Chrome 주소창에 chrome://extensions를 입력합니다.
2. 우측 상단 "개발자 모드" 토글을 켭니다.
3. "압축 해제된 확장 프로그램 로드" 버튼을 클릭합니다.
4. 방금 만든 quote-extension 폴더를 선택합니다.

확장 프로그램이 목록에 나타나면 로드 성공입니다. 임의의 웹페이지에서 텍스트를 선택하고 Ctrl+Shift+C를 눌러 동작을 확인합니다.

4단계 — 오류가 나면

확장 프로그램 카드의 "오류" 버튼을 클릭하거나, 웹페이지에서 F12를 눌러 콘솔 탭에서 빨간 메시지를 확인합니다. 해당 메시지를 그대로 AI에게 붙여넣으면 수정된 코드를 받을 수 있습니다. 오류 메시지를 수정하려 하지 말고, 있는 그대로 복사해 전달하는 것이 가장 빠른 방법입니다.

5단계 — Chrome Web Store 배포 (선택)

Chrome Web Store 개발자 계정 등록에는 1회 5달러(USD)의 수수료가 발생합니다. 등록 후 폴더를 zip으로 압축해 업로드하면 됩니다. 심사는 통상 수 일이 소요되며, 기능 설명·스크린샷·개인정보처리방침 문서가 요구됩니다. 심사 기준은 Chrome Web Store 정책 페이지에서 확인할 수 있습니다. 개인 사용 목적이라면 배포 없이 로컬 로드만으로 충분합니다.

언제 써야 하고, 언제 쓰지 말아야 하는가

적합한 상황:

특정 사이트에서 반복적으로 수행하는 작업을 자동화하고 싶을 때
기존 확장 프로그램이 원하는 기능의 일부만 제공하거나, 불필요한 권한을 요구할 때
사내 도구나 개인 워크플로우에 맞춘 맞춤형 기능이 필요할 때

주의해야 할 상황:

Chrome Web Store 배포를 목표로 할 경우, AI가 생성한 코드에 대한 최소한의 이해가 필요합니다. 심사 과정에서 기능 설명·스크린샷·개인정보처리방침이 요구됩니다.
로그인 정보나 금융 데이터 등 민감한 정보를 다루는 기능은 보안 검토 없이 구현하지 않아야 합니다. AI가 생성한 코드가 데이터를 외부로 전송하는 구문을 포함하는지 반드시 확인해야 합니다.
확장 프로그램이 접근하는 사이트의 이용약관을 확인해야 합니다. 자동화를 금지한 서비스에 적용하면 계정이 차단될 수 있습니다.
Chrome이 메이저 업데이트될 때마다 확장 프로그램 동작이 달라질 수 있습니다. AI에게 코드를 받을 때 Chrome 버전을 명시하거나, 이후 동작이 달라지면 오류 메시지를 다시 붙여넣어 보정 요청을 하면 됩니다.

다음 단계

이 단계를 완료했다면 아래 주제로 응용 범위를 넓힐 수 있습니다.

Chrome Storage API: 확장 프로그램 내부에 설정값이나 데이터를 저장하는 방법입니다. 공식 문서(chrome.storage API reference)에서 저장·불러오기 예시를 확인할 수 있습니다.
외부 API 연동: content.js에서 fetch를 사용해 외부 서버에 데이터를 보내거나 받을 수 있습니다. 선택한 텍스트를 번역 API에 전달하거나, 요약 모델로 보내는 확장을 만들 수 있습니다.
팝업 UI 고도화: popup.html에 설정 화면을 추가해 사용자가 기능을 on/off하거나 단축키를 변경할 수 있게 만들 수 있습니다.

Chrome 확장 프로그램 개발의 전체 구조는 Chrome Developers 공식 시작 가이드(Getting started - Chrome Extensions)에 정리되어 있습니다. AI가 작성한 코드를 이 문서와 대조하면서 각 파일의 역할을 파악하면, 다음 확장 프로그램은 더 빠르게 만들 수 있습니다.

관련 글: AI 바이브코딩으로 나만의 도구 만들기