크롬 확장 프로그램 제작을 처음 시작하는 분들도 한눈에 이해할 수 있도록 핵심 파일 구조와 각 부품의 역할을 친절하게 정리해 드립니다. 가장 기본이 되는 manifest.json 설정법부터 백그라운드 실행 파일, 콘텐츠 스크립트 활용법까지 실무 중심으로 차근차근 안내해 드릴게요.
크롬 확장 프로그램은 평소 웹 브라우저를 쓰면서 느꼈던 사소한 불편함을 해결하고, 자주 반복하는 귀찮은 작업들을 클릭 한 번으로 끝낼 수 있게 도와주는 유용한 도구입니다. 쉽게 말해 구글 크롬 브라우저에 나만의 새로운 기능을 추가하여 사용하는 것이죠.
단순히 웹 페이지의 정보를 수집하거나 화면 구성을 내 입맛대로 바꾸는 것은 물론, 최근에는 인공지능 기술을 접목해 나만의 업무 자동화 프로그램을 만들어 효율을 높이는 분들이 정말 많아졌습니다. 이번 기회에 확장 프로그램 개발을 위한 기본 뼈대와 각 파일이 어떤 일을 하는지 자세히 파헤쳐 보겠습니다.
크롬 확장 프로그램 만들기: 필수 파일과 폴더 구성 방법
이러한 크롬 확장 프로그램을 직접 만들거나 테스트할 때, 여러 창을 동시에 띄워놓고 코딩하다 보면 화면이 좁아 답답할 때가 많습니다. 이럴 때 화면이 큰 모니터를 사용하면 사이드바 형태로 참고 자료를 배치해두고 작업하기가 훨씬 수월해집니다. 넉넉한 작업 공간은 다양한 탭과 개발 도구를 한눈에 관리하게 해 주어, 결과적으로 프로그램 개발 속도를 눈에 띄게 높여줍니다.
업무 자동화와 크롬 확장 프로그램 활용 팁
요즘은 대화면 모니터도 가격 부담이 많이 낮아져서 성능 좋은 제품을 쉽게 찾을 수 있습니다. 예를 들어, 32인치 이상의 모니터는 넓은 시야를 제공하면서도 가격대가 합리적이라 사무실이나 재택근무 환경에 적합합니다. 쾌적한 PC 환경에서 확장 프로그램을 활용하면 작업 능률이 올라가니, 개발을 시작하신다면 넉넉한 사이즈의 화면을 사용하시는 것을 추천드립니다.
한눈에 보는 확장 프로그램 필수 파일 구조
먼저 컴퓨터에 폴더를 하나 만들고 아래와 같이 구성 파일들을 준비하는 것부터 시작해 보세요.
my-chrome-extension/
├── manifest.json # 확장 프로그램의 '설계도' (필수)
├── background.js # 뒤에서 상시 대기하는 두뇌 역할 (필수)
├── popup.html # 아이콘 클릭 시 나타나는 작은 창 (선택)
├── popup.js # 팝업창의 기능을 작동시키는 코드 (선택)
├── popup.css # 팝업창 디자인을 꾸며주는 스타일 (선택)
├── content.js # 웹사이트 페이지 내부에서 작동하는 코드 (선택)
├── styles.css # 웹 페이지에 적용할 나만의 디자인 (선택)
├── icons/ # 프로그램 얼굴인 아이콘 폴더 (필수)
│ ├── icon16.png
│ ├── icon48.png
│ └── icon128.png
└── (기타 설정 파일들: options.html 등)
각 파일은 구체적으로 어떤 역할을 하나요?
내가 만든 프로그램을 관리하려면 주소창에 chrome://extensions/를 입력해 관리 페이지를 확인할 수 있습니다.
1. manifest.json (가장 중요한 설계도)
이 파일은 확장 프로그램의 이름, 버전, 사용 권한 등을 정의하는 가장 중요한 설정 파일입니다. 브라우저가 이 파일을 가장 먼저 읽고 프로그램을 어떻게 실행할지 결정합니다.
{
"manifest_version": 3,
"name": "나의 첫 확장 프로그램",
"version": "1.0",
"description": "내가 직접 만든 크롬 확장 프로그램입니다",
"permissions": ["storage", "activeTab", "scripting"],
"host_permissions": ["<all_urls>"],
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
}
},
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"],
"css": ["styles.css"]
}
],
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
}
}
manifest_version: 현재 구글의 최신 표준인 버전 3을 사용해야 합니다.
- permissions: 브라우저의 저장소나 탭 기능 등을 쓸 수 있게 미리 허락을 받는 목록입니다.
- action: 상단 아이콘을 눌렀을 때 나타날 화면과 아이콘 이미지를 지정합니다.
2. background.js (뒤에서 일하는 서비스 워커)
웹 페이지와는 별개로 브라우저 뒷단에서 묵묵히 일하는 중앙 통제실 역할을 합니다. 특정 사건이 발생할 때만 잠시 깨어나서 일을 처리하므로 컴퓨터 자원을 아낄 수 있습니다.
- 페이지 내용을 직접 수정할 수는 없지만, 전체적인 프로그램의 흐름을 조절합니다.
- 팝업창과 페이지 내부 스크립트 사이에서 정보를 전달하는 허브가 되어줍니다.
3. popup.html & popup.js (사용자 화면 구성)
확장 프로그램 버튼을 눌렀을 때 툭 튀어나오는 작은 메뉴창입니다. 일반적인 홈페이지를 만드는 방식과 거의 비슷합니다.
<button id="runBtn">기능 실행</button>
<script src="popup.js"></script>
document.getElementById("runBtn").addEventListener("click", () => {
alert("축하합니다! 프로그램이 정상적으로 작동하고 있습니다.");
});
4. content.js (웹 페이지 직접 조작)
지금 내가 보고 있는 네이버나 구글 같은 사이트의 글자색을 바꾸거나, 특정 데이터를 수집할 때 사용합니다. 웹 사이트의 HTML 구조에 직접 접근할 수 있는 유일한 파일입니다.
// 모든 웹 페이지의 배경색을 부드러운 회색으로 바꾸는 코드
document.body.style.backgroundColor = "#f0f0f0";
5. styles.css & icons/
프로그램의 시각적인 부분을 완성합니다. 아이콘 이미지는 16, 48, 128 픽셀 등 다양한 크기를 준비해야 브라우저 메뉴나 관리창에서 깨지지 않고 선명하게 보입니다.
확장 프로그램 개발은 처음엔 낯설게 느껴질 수 있지만, manifest.json이라는 기본 지도와 몇 가지 코드 파일만 있으면 누구나 금방 익힐 수 있습니다. 이 기본 구조를 뼈대 삼아 하나씩 살을 붙여 나가다 보면, 어느새 나를 대신해 업무를 처리해 주는 든든한 나만의 자동화 도구를 갖게 될 것입니다.
