우리가 매일 사용하는 크롬 브라우저의 확장 프로그램, 좋은 소프트웨어 상품이 될 수 있습니다. 문제는 어떻게 만드냐는 것이었는데요. AI로 쉽게 만들 수 있습니다.
AI를 활용해 클릭하면 팝업이 나오는 아주 기초적인 크롬 확장 프로그램을 간단한 예제로 만드는 방법을 알려드리려고 합니다. 너무 어렵게 생각하지 마세요. 실행 결과를 직접 확인하면서 따라해보세요.
코드 편집기 필요 없습니다. 메모장에 복사 붙여넣기 하세요.
저는 VS Code라는 코드 편집기를 사용하지만, 여러분은 메모장만 켜놓고 복사-붙여넣기만 해도 충분하니까 걱정하지 않으셔도 돼요. 이 과정은 단순히 따라하기만 하면 되는 5단계로 나뉘어져 있으니 긴장 풀고 계속 읽어주세요.
1. 프로젝트 폴더 만들기
먼저 새 폴더를 하나 만드세요. 이 폴더는 우리가 만들 크롬 확장 프로그램을 저장할 작업 폴더가 됩니다. 이름은 자유롭게 정하면 됩니다.
2. manifest.json 만들기
이제, 이 폴더 안에 크롬 확장 프로그램의 필수 파일인 manifest.json 파일을 만들어야 합니다. 메모장을 열고 아래 코드를 복사해서 붙여넣은 다음, manifest.json으로 저장하세요.
{
"manifest_version": 3,
"name": "My First Extension",
"version": "1.0",
"description": "This is my first Chrome extension!",
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
}
}
}3. popup.html 파일 생성
다음은 팝업 창을 담당할 popup.html 파일을 만들어야 합니다. 여기에 버튼을 하나 추가할 거예요. 메모장을 다시 열고 아래 코드를 복사해 popup.html이라는 이름으로 저장하세요.
<!DOCTYPE html>
<html>
<head>
<title>My First Extension</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
</style>
</head>
<body>
<h1>Hello Chrome Extension!</h1>
<button id="clickMe">Click me</button>
<script src="popup.js"></script>
</body>
</html>4. popup.js 파일로 기능 추가
이제, 버튼을 눌렀을 때 경고창(alert)이 뜨는 기능을 추가해야 합니다. 메모장을 다시 열고 아래 코드를 복사해 popup.js 파일로 저장하세요.
document.getElementById('clickMe').addEventListener('click', () => {
alert('버튼이 눌렸습니다!');
});5. 아이콘 파일 추가
크롬 확장 프로그램에는 아이콘이 필요합니다. 16×16, 48×48, 128×128 크기의 정사각형 png 파일을 준비하세요. 프로젝트 폴더 안에 images라는 폴더를 만들고, 이 안에 각각의 크기별 아이콘 파일을 넣어주세요.
크롬에서 확장 프로그램 설치 및 테스트
모든 준비가 끝났다면, 이제 크롬 브라우저에서 확장 프로그램을 설치하고 테스트할 차례입니다!
- 크롬 브라우저를 열고 주소창에
chrome://extensions/를 입력하세요. 점세개 눌러서 확장프로그램 관리로 들어가도 됩니다. - 우측 상단의 개발자 모드를 켜줍니다.
- 좌측 상단의 압축 해제된 확장 프로그램을 로드 버튼을 클릭한 후, 우리가 처음에 만든 프로젝트 폴더를 선택하세요.
이제 브라우저 상단에 우리의 첫 번째 확장 프로그램 아이콘이 나타날 거예요! 오른쪽 상단의 퍼즐 아이콘을 눌러 확장 프로그램을 실행해 보세요. 버튼을 눌렀을 때 경고창이 뜨면 성공입니다.
AI를 활용해서 크롬 확장 프로그램을 상품화
어떻게 보면 매우 간단하지만, 이런 식으로 AI를 활용하면 작은 기능을 시험해볼 수 있습니다. 상품으로 배포하려면 동작 검증과 권한·개인정보·배포 조건을 추가로 살펴봐야 합니다. 이번에 만든 크롬 확장 프로그램으로 자신감이 생겼을 겁니다.
아이디어를 좀더 AI와 대화하면서 다듬고 구현해나가다보면 결국 하나의 좋은 상품을 만들 수 있을겁니다. 저는 개인적으로 유튜브 관련 확장 프로그램을 만들어보려고 계획 중입니다. 여러분도 시도해보세요.
예제 권한과 파일 확인
이 팝업의 버튼은 탭 내용을 읽지 않으므로 manifest.json의 permissions에 activeTab을 넣을 필요가 없습니다. 불필요한 권한은 빼고, 아이콘을 선언했다면 해당 파일을 실제 경로에 준비하세요. 메모장에서는 파일 형식을 모든 파일·UTF-8로 선택해 .txt가 붙지 않도록 확인합니다.