(기록용) 크롬 익스텐션에서 각 무슨역할들을 할수 있을까? - 1 - (background, content, popup)

목차

 

 

 익스텐션의 많은 기능들

크롬 익스텐션은 우리가 아는 웹사이트와 개발이 조금 다르다. 익스텐션은 브라우저 자체에 기능을 추가하는 거다보니, 여러 상황에서 다르게 동작을해야하기 때문이다

크롬 익스텐션의 주요 구성요소:

├── Background # 브라우저 백그라운드에서 조용히 실행

├── Content Script # 웹페이지 위에 내용을 추가

├── Popup # 익스텐션 아이콘 클릭 시 나타나는 창

├── Options # 설정 페이지

├── Dashboard # 큰 화면에서 작업하는 페이지

├── New Tab # 새 탭을 열 때 보이는 페이지

└── DevTools # 개발자 도구에 추가하는 패널

 

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

 

무슨  일을  하는가?

**뇌**의 역할을 수행한다. 사용자가 안 보는 곳에서 조용히 실행되며 익스텐션 전체를 조율하는데 보통 데이터 저장, 네트워크 요청, 탭 관리 등을 담당한다.

 

실생활  비유

식당의 주방장 처럼 손님(사용자) 눈에 안 보이지만, 모든 주문을 받고 요리를 조율한다.

 

사용  예시

- 데이터 주기적으로 가져오기

- 여러 탭에서 공유하는 상태 관리

- 알림 보내기

 

// 매 1분마다 데이터 확인
chrome.alarms.create('fetchData', { periodInMinutes: 1 });

chrome.alarms.onAlarm.addListener((alarm) => {
  if (alarm.name === 'fetchData') {
    // 데이터 가져오기
  }
});

 

---

 Content Script (컨텐트 스크립트)

 

무슨  일을  하는가?

- 실제 웹페이지 위에 내용을 추가하거나 수정한다.- 현재 열려있는 웹사이트의 DOM에 접근할 수 있다.

 

실생활 비유

- 번역가 처럼 원래 웹사이트 위에 우리가 원하는 내용을 덧붙인다.

 

사용 예시

- 웹페이지에 번역 버튼 추가

- 유튜브에 다운로드 버튼 표시

- 웹사이트의 텍스트 변경

- 알림 토스트 표시

 

// 페이지에 버튼 추가
const button = document.createElement('button');
button.textContent = '번역하기';
document.body.appendChild(button);

 

중요한 점

- 웹페이지마다 **독립적으로** 실행된다.

- 웹페이지가 닫히면 같이 종료된다.

- 같은 웹사이트를 여러 탭으로 열면 각각 따로 실행된다.

---

 Popup (팝업)

 

무슨 일을 하는가?

- 브라우저 우측 상단의 **익스텐션 아이콘**을 클릭했을 때 나타나는 작은 창이다.

 

실생활 비유

- 스마트폰의 위젯 처럼 한눈에 상태를 보고 빠르게 제어할 수 있다.

 

사용 예시

- 현재 연결 상태 표시

- 빠른 설정 ON/OFF

- 간단한 통계 보여주기

// 팝업 HTML
<div class="popup">
  <h1>내 익스텐션</h1>
  <button id="toggle">켜기/끄기</button>
</div>

 

특징

- 팝업이 **닫히면 모든 상태가 사라진다** (매번 새로 시작)

- 필요한 정보는 Backgorund에서 가져와야 한다.

---

 마치며

크롬 익스텐션을 개발하면서 일단 우선순위가 높은 기능부터 정리를했는데 크롬익스텐션은 진짜 기능이 많다.

요즘 바이브코딩도 성능이 좋기때문에 모든걸 알필요는 없으나 알아두면 꽤 유용하기 때문에 한번 정리하는 시간을 가졌다.

이후 나머지는 2편에서 제작하려고한다.