크롬 확장 프로그램 개발 시작하기

크롬 확장 프로그램(Chrome Extensions)은 브라우저의 기능을 확장하고 웹 경험을 향상시키는 강력한 도구입니다. 개발자로서 자신만의 확장 프로그램을 만드는 것은 실용적인 문제를 해결하거나 개인 워크플로우를 개선하는 좋은 방법이 될 수 있습니다. 이 글에서는 크롬 확장 프로그램 개발을 시작하는 방법부터 배포까지의 전체 과정을 안내해 드리겠습니다.

크롬 확장 프로그램이란?

크롬 확장 프로그램은 기본적으로 HTML, CSS, JavaScript로 구성된 웹 애플리케이션입니다. 일반 웹 페이지와 다른 점은 크롬 브라우저와 상호작용할 수 있는 특별한 권한과 API를 가지고 있다는 것입니다. 확장 프로그램은 다음과 같은 다양한 형태로 구현될 수 있습니다:

브라우저 toolbar에 버튼 추가
웹페이지 콘텐츠 수정 또는 향상
개발자 도구에 기능 추가
새로운 탭 페이지 커스터마이징
백그라운드 작업 처리

기본 구조 이해하기

모든 크롬 확장 프로그램은 manifest.json 파일로 시작합니다. 이 파일은 확장 프로그램의 메타데이터와 필요한 권한, 사용할 리소스 등을 정의합니다. Manifest V3는 현재 권장되는 최신 버전입니다.

{
  "manifest_version": 3,
  "name": "My First Extension",
  "description": "A simple Chrome extension",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon16.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  },
  "permissions": ["storage", "activeTab"],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["https://*.example.com/*"],
      "js": ["content.js"]
    }
  ]
}

주요 구성 요소

크롬 확장 프로그램은 다음과 같은 주요 구성 요소로 이루어집니다:

1. 팝업(Popup)

사용자가 확장 프로그램 아이콘을 클릭할 때 나타나는 UI입니다. popup.html과 연결된 JavaScript, CSS 파일로 구성됩니다.

<!-- popup.html -->
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="popup.css">
  </head>
  <body>
    <h1>My Extension</h1>
    <button id="changeColor">Change Color</button>
    <script src="popup.js"></script>
  </body>
</html>

2. 백그라운드 스크립트(Background Script)

확장 프로그램의 이벤트 핸들러 역할을 하며, 브라우저가 실행되는 동안 지속적으로 또는 필요에 따라 실행됩니다.

// background.js
chrome.runtime.onInstalled.addListener(() => {
  chrome.storage.sync.set({ color: '#3aa757' });
  console.log('Default background color set to green.');
});

3. 콘텐츠 스크립트(Content Scripts)

웹 페이지의 컨텍스트에서 실행되어 페이지의 DOM에 접근하고 수정할 수 있습니다.

// content.js
// 페이지의 모든 <p> 태그 배경색을 변경
const paragraphs = document.getElementsByTagName('p');
for (let i = 0; i < paragraphs.length; i++) {
  paragraphs[i].style.backgroundColor = 'yellow';
}

4. 옵션 페이지(Options Page)

사용자가 확장 프로그램을 커스터마이징할 수 있는 설정 페이지입니다.

// manifest.json에 추가
"options_page": "options.html"

첫 번째 확장 프로그램 만들기: 웹 페이지 색상 변경기

간단한 예제로 웹 페이지의 배경색을 변경하는 확장 프로그램을 만들어 보겠습니다.

1. 프로젝트 폴더 구조 만들기

color-changer/
  ├── manifest.json
  ├── popup.html
  ├── popup.js
  ├── popup.css
  ├── content.js
  └── images/
      ├── icon16.png
      ├── icon48.png
      └── icon128.png

2. manifest.json 작성

{
  "manifest_version": 3,
  "name": "Page Color Changer",
  "description": "Change the background color of web pages",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon16.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  },
  "permissions": ["storage", "activeTab", "scripting"],
  "host_permissions": ["<all_urls>"]
}

3. popup.html 작성

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="popup.css">
  </head>
  <body>
    <h2>Choose a background color:</h2>
    <div class="color-options">
      <button class="color-btn" data-color="#e8f5e9">Light Green</button>
      <button class="color-btn" data-color="#ffebee">Light Red</button>
      <button class="color-btn" data-color="#e3f2fd">Light Blue</button>
      <button class="color-btn" data-color="#ffffff">Reset</button>
    </div>
    <script src="popup.js"></script>
  </body>
</html>

4. popup.css 작성

body {
  width: 200px;
  padding: 10px;
  font-family: Arial, sans-serif;
}

h2 {
  font-size: 14px;
  margin-bottom: 10px;
}

.color-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.color-btn {
  padding: 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}

5. popup.js 작성

document.addEventListener('DOMContentLoaded', function() {
  const colorButtons = document.querySelectorAll('.color-btn');
  
  colorButtons.forEach(button => {
    button.addEventListener('click', function() {
      const color = this.dataset.color;
      
      chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        chrome.scripting.executeScript({
          target: {tabId: tabs[0].id},
          function: changeBackgroundColor,
          args: [color]
        });
      });
    });
  });
});

function changeBackgroundColor(color) {
  document.body.style.backgroundColor = color;
}

6. 확장 프로그램 로드 및 테스트

크롬 브라우저에서 chrome://extensions로 이동
개발자 모드 활성화
“압축해제된 확장 프로그램을 로드합니다” 버튼 클릭
프로젝트 폴더 선택

이제 아무 웹 페이지에 가서 확장 프로그램 아이콘을 클릭하고 색상을 선택하면 페이지 배경색이 변경됩니다!

고급 기능 구현하기

1. 저장 기능 추가

사용자가 선택한 색상을 기억하도록 Chrome Storage API를 활용할 수 있습니다.

// popup.js에 추가
chrome.storage.sync.get('lastColor', function(data) {
  if (data.lastColor) {
    // 마지막으로 선택한 색상 표시
    document.getElementById('lastUsed').style.backgroundColor = data.lastColor;
  }
});

// 색상 선택 시 저장
chrome.storage.sync.set({lastColor: color});

2. 컨텍스트 메뉴 추가

우클릭 메뉴에 옵션을 추가하려면:

// manifest.json에 권한 추가
"permissions": ["contextMenus", "storage", "activeTab", "scripting"]

// background.js
chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: "changeColor",
    title: "Change background to blue",
    contexts: ["page"]
  });
});

chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === "changeColor") {
    chrome.scripting.executeScript({
      target: {tabId: tab.id},
      function: () => {
        document.body.style.backgroundColor = '#e3f2fd';
      }
    });
  }
});

배포 과정

완성된 확장 프로그램을 Chrome Web Store에 배포하는 방법은 다음과 같습니다:

확장 프로그램을 zip 파일로 압축
Chrome Developer Dashboard에 계정 등록 (일회성 $5 개발자 등록비 필요)
“새 항목” 버튼 클릭
필요한 정보 입력 (스크린샷, 자세한 설명, 카테고리 등)
zip 파일 업로드
검토 및 발행하기 버튼 클릭

심사 과정은 보통 몇 일이 소요되며, 승인되면 Chrome Web Store에 공개됩니다.

디버깅 팁

크롬 확장 프로그램 개발 시 유용한 디버깅 방법을 소개합니다:

console.log()를 적극 활용하세요.
백그라운드 스크립트는 확장 프로그램 관리 페이지에서 “백그라운드 페이지 검사” 링크를 클릭하여 디버깅할 수 있습니다.
팝업은 팝업 창을 오른쪽 클릭하고 “검사”를 선택하여 디버깅할 수 있습니다.
콘텐츠 스크립트는 웹 페이지의 개발자 도구에서 디버깅할 수 있습니다.

마치며

크롬 확장 프로그램 개발은 웹 개발 기술을 활용하여 브라우저의 기능을 확장하는 재미있는 방법입니다. 이 글에서 소개한 기본 구조와 예제 코드를 바탕으로 여러분만의 아이디어를 구현해 보세요.

다음과 같은 아이디어로 시작해 볼 수 있습니다:

웹 페이지의 특정 콘텐츠를 하이라이트하는 도구
개발자를 위한 특정 사이트의 스타일 수정기
생산성 향상을 위한 북마크 관리 도구
특정 웹사이트의 사용자 경험을 개선하는 도구

행운을 빕니다! 멋진 확장 프로그램을 만들어 보세요.

2025-03-14·#한국어·#홈·#크롬·#확장