크롬 확장 프로그램 개발 가이드

안녕하세요!

이번 글에서는 크롬 확장 프로그램이 무엇인지, 어떤 구조로 되어 있는지, 그리고 어떻게 시작할 수 있는지를 간단하게 소개하겠습니다.

---

📌 크롬 확장 프로그램의 장점

• HTML, CSS, JavaScript만으로도 개발 가능
• 웹 프론트엔드 개발 지식만으로 빠르게 제작 가능
• 브라우저 환경에서 직접 실행되므로 테스트와 배포가 간편
• 자주 사용하는 기능을 자동화하거나 커스터마이징 가능

 

---

 

📌 기본 구조

📁 icons		// 확장 프로그램에 사용될 아이콘 모음
📁 popup
  ├─ popup.html		// 확장 프로그램 실행 시 보이는 팝업 UI
  ├─ popup.css		// 팝업 스타일 정의
  └─ popup.js		// 팝업에서 실행되는 JavaScript
📄 content.js		// 사용자가 방문하는 웹페이지에서 실행되는 스크립트
📄 background.js	// 이벤트 처리 및 브라우저 백그라운드 스크립트
📄 manifest.json	// 확장 프로그램의 핵심 설정 파일

 

---

 

📌 각 파일 설명

content.js

• 사용자가 방문한 웹페이지의 내부에서 실행되는 스크립트입니다.
• 웹페이지의 DOM 요소를 직접 읽거나 수정할 수 있어, 예를 들어 특정 요소를 숨기거나 자동 클릭하는 등의 조작이 가능합니다.
• 사용자의 행동(예: 클릭, 입력, 스크롤 등)을 감지하거나, 페이지의 내용 변화를 실시간으로 추적할 수 있습니다.
• 웹사이트와 직접 상호작용해야 하는 기능(예: 광고 차단, 버튼 자동화 등)에 적합합니다.
• ※ 웹페이지와 직접 상호작용하므로 content.js는 보안 권한 및 CORS 제한에 민감합니다. 외부 API 요청 등은 백그라운드에서 처리하는 것이 일반적입니다.

background.js

• 크롬 확장 프로그램의 핵심 제어 로직이 위치하는 곳입니다.
• 브라우저 전체에서 동작하며, 항상 실행되는 것이 아니라 특정 이벤트가 발생할 때만 작동합니다.
• manifest_version: 3에서는 **service_worker**로 등록되며, 메모리를 아끼기 위해 이벤트 발생 시에만 일시적으로 실행됩니다.
• 주로 다음과 같은 기능을 수행합니다:
  • 확장 프로그램 설치, 업데이트, 삭제 등 이벤트 감지
  • 탭 제어 (예: 새 탭 열기, 현재 탭 정보 확인)
  • 알림(Notification) 처리
  • 다른 스크립트(popup.js, content.js)와의 메시지 중계

popup.js

• 크롬 확장 프로그램 아이콘을 클릭했을 때 나타나는 팝업 UI에서 동작하는 스크립트입니다.
• 사용자 입력이나 버튼 클릭 같은 UI 이벤트를 처리하고, 필요한 데이터를 가져오거나 특정 명령을 실행합니다.
• background script나 content script와 메시지를 주고받아 기능을 연결할 수 있습니다.
• 예: 사용자가 버튼을 클릭하면 현재 탭의 정보를 가져와 보여주기

manifest.json

• 크롬 확장 프로그램의 전체 설정을 정의하는 필수 구성 파일
• 브라우저는 이 파일을 읽고 해당 확장 프로그램을 어떻게 동작시킬지 판단함

manifest.json

{
  "name": "My Chrome Extension",
  "description": "나만의 크롬 확장 프로그램",
  "version": "1.0",
  "manifest_version": 3,
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "permissions": ["storage"],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"],
      "css": ["style.css"],
      "run_at": "document_idle"
    }
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup/popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  }
}

속성	설명
name	확장 프로그램의 이름
description	간단한 소개 문구
version	버전 정보
manifest_version	매니페스트 버전
icons	아이콘 이미지 경로
permissions	API 및 기능 사용 권한 (storage, tabs, notifications 등)
content_scripts	웹페이지에 삽입될 스크립트 정의
background	백그라운드에서 동작할 service_worker 등록
action	확장 아이콘 클릭 시의 동작 (팝업, 아이콘 등 설정)

 

---

 

📌 실행 방법

Chrom Extensions 문서

Chrome 확장 프로그램  |  Chrome Extensions  |  Chrome for Developers

 

Hello World 크롬 확장 프로그램 개발

Hello World 확장 프로그램  |  Chrome Extensions  |  Chrome for Developers

 

• Chrome 브라우저 열기
• 주소창에 chrome://extensions/ 입력
• 우측 상단 개발자 모드 ON
• [압축해제된 확장 프로그램 로드] 클릭
• 프로젝트 폴더 선택하여 확장 프로그램 등록

 

---

 

필요한 기능만 잘 정리하면 크롬 확장 프로그램은 생각보다 빠르고 쉽게 만들 수 있어요.
평소 불편했던 웹 사용 습관을 자동화하거나, 나만의 툴을 만들어보고 싶다면 아주 좋은 선택입니다!

오늘도 즐거운 개발 되시길 바랍니다!