확장프로그램으로 뭘 만들 수 있을까 — 가능성의 지도와 프로젝트 아이디어 25선

작성자:


브라우저 확장프로그램 시리즈 (2/5)
지난 편에서는 확장프로그램 생태계의 큰 그림을 봤어요. 이번 편에서는 “구체적으로 뭘 만들 수 있고, 무엇은 안 되는가” 를 전부 정리하고, 난이도별 프로젝트 아이디어 25개를 소개합니다. 이 편을 다 읽으면 당신이 만들 첫 확장프로그램의 윤곽이 잡힐 거예요.

들어가며

“확장프로그램 만들어보고 싶은데, 뭘 만들어야 할지 모르겠어요.”

강의나 블로그 댓글에서 가장 많이 보는 말이에요. 이상한 일이 아니에요. 가능성이 너무 넓어서 오히려 선택이 어려운 거죠. 웹 개발자에게 “웹사이트 뭐 만들고 싶어요?” 하고 물으면 똑같이 막막해지잖아요.

이 편은 그 막막함을 해소해주는 편이에요. 먼저 확장프로그램으로 할 수 있는 일 전체를 카테고리별로 정리하고, 반대로 할 수 없는 것의 경계선도 명확히 그어드려요. 그다음 난이도별로 프로젝트 아이디어 25개를 소개합니다. 각 아이디어마다 필요한 API, 대략적인 개발 기간, 참고할 만한 기존 확장도 적어둘게요.

여러분이 이 편을 다 읽고 “아, 나는 저걸 만들어볼래” 하고 프로젝트를 정하는 게 이 편의 목표예요.

1부. 할 수 있는 일 — 12가지 영역

확장프로그램이 건드릴 수 있는 영역을 크게 12가지로 나눠봤어요. 각 영역마다 대표적인 유명 확장을 예시로 붙였으니 “아, 저런 게 이 기능으로 만들어진 거였구나” 하고 감을 잡으실 수 있을 거예요.

① 웹페이지 조작 (DOM Manipulation)

웹페이지의 HTML 요소를 읽고, 수정하고, 추가하거나 숨길 수 있어요. 확장프로그램의 가장 기본적이면서 가장 강력한 기능이에요.

어떤 것이 가능한가

  • 특정 광고 요소를 찾아서 숨기기
  • 페이지에 새로운 버튼·배너·정보 블록 추가하기
  • 글자 크기, 색상, 폰트 등 스타일 변경
  • 특정 단어를 다른 단어로 자동 치환

대표 확장: uBlock Origin (광고 차단), Dark Reader (다크 모드 강제 적용), Grammarly (실시간 맞춤법 교정)

핵심 API: chrome.scripting, Content Script

간단한 코드 예시 — 모든 페이지의 배경색을 바꾸는 한 줄짜리 content script:

// content.js
document.body.style.backgroundColor = '#1a1a1a';
document.body.style.color = '#ffffff';

② 브라우저 UI 확장

브라우저 자체에 새로운 UI 요소를 추가할 수 있어요. 툴바 아이콘, 우클릭 메뉴, 사이드 패널 등이요.

어떤 것이 가능한가

  • 툴바 아이콘 클릭 시 팝업 창 띄우기
  • 우클릭(컨텍스트) 메뉴에 “선택한 텍스트 번역하기” 같은 항목 추가
  • 사이드 패널을 열어 지속적으로 도구 띄우기
  • 옴니박스(주소창)에서 특정 키워드로 기능 호출

대표 확장: Google Translate (우클릭 메뉴로 번역), Notion Web Clipper (사이드 패널), DuckDuckGo (옴니박스)

핵심 API: action, contextMenus, sidePanel, omnibox

간단한 코드 예시 — 우클릭 메뉴 추가:

// background.js
chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: "translate",
    title: "선택한 텍스트 번역하기",
    contexts: ["selection"]
  });
});

chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === "translate") {
    console.log("선택한 텍스트:", info.selectionText);
    // 번역 로직 실행
  }
});

③ 탭과 창 관리

브라우저에 열린 탭과 창을 조회하고 제어할 수 있어요. 탭을 많이 띄우는 사람들에게 필수적인 기능을 만들 수 있어요.

어떤 것이 가능한가

  • 현재 열린 모든 탭 목록 가져오기
  • 탭을 세션으로 저장하고 나중에 복원
  • 탭을 그룹화하고 색상 지정
  • 중복된 탭 자동 닫기
  • 특정 패턴의 URL을 가진 탭 일괄 처리

대표 확장: OneTab (탭 세션 관리), Toby (작업 공간 관리), Tab Wrangler (오래된 탭 자동 닫기)

핵심 API: tabs, windows, tabGroups

간단한 코드 예시 — 현재 열린 탭 개수와 제목 목록 가져오기:

// 모든 탭 조회
chrome.tabs.query({}, (tabs) => {
  console.log(`현재 ${tabs.length}개 탭이 열려 있어요`);
  tabs.forEach(tab => console.log(tab.title));
});

// 현재 활성 탭만 조회
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
  const currentTab = tabs[0];
  console.log("지금 보고 있는 탭:", currentTab.url);
});

④ 데이터 저장

확장프로그램은 자체 저장소를 가질 수 있어요. 사용자 설정, 작업 기록, 수집한 데이터 등을 영구적으로 보관할 수 있습니다.

어떤 것이 가능한가

  • 사용자 설정 저장 (테마, 옵션 등)
  • 여러 기기 간 동기화 (구글 계정 연동)
  • 작업 히스토리·메모 보관
  • 오프라인 캐시

대표 확장: Bitwarden (비밀번호 저장), Raindrop.io (북마크 저장), Momentum (대시보드 설정)

핵심 API: chrome.storage.local, chrome.storage.sync

두 가지 저장소의 차이

저장소용도용량 제한동기화
storage.local기기별 저장약 10MB안 됨
storage.sync계정 연동약 100KB브라우저 로그인 기기 간 자동

간단한 코드 예시:

// 저장
await chrome.storage.local.set({ theme: 'dark', fontSize: 16 });

// 읽기
const result = await chrome.storage.local.get(['theme', 'fontSize']);
console.log(result.theme); // 'dark'

// 삭제
await chrome.storage.local.remove('theme');

⑤ 네트워크 요청 제어

웹페이지가 보내는 HTTP 요청을 감시하고 차단·수정할 수 있어요. 광고 차단기, 개인정보 보호 도구의 핵심 기능이에요.

어떤 것이 가능한가

  • 특정 도메인으로의 요청 차단
  • 요청을 다른 URL로 리다이렉트
  • 응답 헤더 수정
  • 광고·추적 스크립트 차단

대표 확장: uBlock Origin, Privacy Badger, HTTPS Everywhere

핵심 API: declarativeNetRequest (Manifest V3에서 권장)

Manifest V3부터는 규칙을 JSON으로 미리 선언하는 방식이 기본이에요. 코드로 실시간 제어하던 V2 방식에서 바뀌었어요.

간단한 규칙 예시 — evil-tracker.com 요청을 전부 차단:

// rules.json
[
  {
    "id": 1,
    "priority": 1,
    "action": { "type": "block" },
    "condition": {
      "urlFilter": "evil-tracker.com",
      "resourceTypes": ["script", "image", "xmlhttprequest"]
    }
  }
]

⑥ 쿠키·북마크·히스토리 접근

브라우저에 저장된 사용자 데이터를 읽고 쓸 수 있어요. 당연히 사용자 권한이 필요합니다.

어떤 것이 가능한가

  • 특정 사이트의 쿠키 읽기·삭제
  • 북마크 자동 정리·분류
  • 방문 기록 검색·삭제
  • 중복 북마크 찾기

대표 확장: EditThisCookie (쿠키 편집), Raindrop.io (북마크 관리), History Trends (방문 기록 분석)

핵심 API: cookies, bookmarks, history

간단한 코드 예시 — 최근 1주일 방문한 사이트 목록:

const oneWeekAgo = Date.now() - (7 * 24 * 60 * 60 * 1000);

chrome.history.search({
  text: '',
  startTime: oneWeekAgo,
  maxResults: 100
}, (results) => {
  results.forEach(item => {
    console.log(item.title, '-', item.url);
  });
});

⑦ 다운로드 관리

브라우저의 다운로드 기능을 프로그래밍 방식으로 제어할 수 있어요.

어떤 것이 가능한가

  • 코드로 다운로드 시작하기
  • 진행 중인 다운로드 감시·일시정지
  • 완료된 파일 자동 분류
  • 다운로드 히스토리 관리

대표 확장: Video DownloadHelper, DownThemAll

핵심 API: downloads

간단한 코드 예시:

// 이미지 다운로드
chrome.downloads.download({
  url: 'https://example.com/image.jpg',
  filename: 'my-images/photo.jpg'
});

// 진행 중인 다운로드 목록
chrome.downloads.search({ state: 'in_progress' }, (items) => {
  items.forEach(item => console.log(item.filename, item.bytesReceived));
});

⑧ 알림과 알람

시스템 알림을 띄우거나 특정 시간 후 코드를 실행하는 알람을 설정할 수 있어요. 타이머·리마인더 앱의 기반입니다.

어떤 것이 가능한가

  • 데스크톱 알림 띄우기 (우측 상단에 뜨는 그거요)
  • N분 후 알림 예약
  • 반복 알림 (매일, 매시간 등)
  • 뽀모도로 타이머 구현

대표 확장: Pomodoro Timer, Tomato Clock, 각종 리마인더 앱

핵심 API: notifications, alarms

간단한 코드 예시 — 25분 뒤 뽀모도로 알림:

// background.js
// 25분 뒤 알람 예약
chrome.alarms.create('pomodoro', { delayInMinutes: 25 });

// 알람이 울리면 알림 띄우기
chrome.alarms.onAlarm.addListener((alarm) => {
  if (alarm.name === 'pomodoro') {
    chrome.notifications.create({
      type: 'basic',
      iconUrl: 'icon128.png',
      title: '🍅 집중 시간 끝!',
      message: '5분 휴식하세요'
    });
  }
});

⑨ 단축키 등록

사용자가 커스텀 키보드 단축키로 확장 기능을 호출할 수 있게 만들 수 있어요.

어떤 것이 가능한가

  • Ctrl+Shift+X 같은 단축키로 확장 동작 실행
  • 사용자가 chrome://extensions/shortcuts에서 키 바꾸기 가능
  • 특정 페이지에서만 동작하는 단축키

핵심 API: commands

manifest.json 설정:

{
  "commands": {
    "toggle-feature": {
      "suggested_key": {
        "default": "Ctrl+Shift+Y",
        "mac": "Command+Shift+Y"
      },
      "description": "기능 토글"
    }
  }
}

// background.js
chrome.commands.onCommand.addListener((command) => {
  if (command === "toggle-feature") {
    console.log("단축키 눌렸어요!");
  }
});

⑩ 클립보드와 스크린샷

클립보드 제어와 현재 탭 캡처가 가능해요.

어떤 것이 가능한가

  • 특정 텍스트를 클립보드로 복사
  • 현재 보이는 탭 영역 스크린샷
  • 전체 페이지 캡처 (스크롤 포함)

대표 확장: GoFullPage (전체 페이지 캡처), Awesome Screenshot

핵심 API: tabs.captureVisibleTab, Clipboard API

간단한 코드 예시 — 현재 탭 스크린샷:

chrome.tabs.captureVisibleTab(null, { format: 'png' }, (dataUrl) => {
  // dataUrl은 base64 이미지 데이터
  // 다운로드하거나 새 탭으로 열어서 보여줄 수 있음
  chrome.downloads.download({
    url: dataUrl,
    filename: 'screenshot.png'
  });
});

⑪ 외부 API 호출

이게 의외로 강력한 포인트예요. 일반 웹사이트와 달리 확장프로그램은 CORS 제약을 넘어서 외부 API를 호출할 수 있어요. (권한 선언 필요)

어떤 것이 가능한가

  • 번역 API, AI API, 날씨 API 등 외부 서비스 호출
  • OAuth 로그인으로 구글·깃허브·노션 등 연동
  • 자체 백엔드 서버와 통신

대표 확장: ChatGPT 관련 확장, Pocket, 각종 AI 어시스턴트

핵심 API: fetch (일반 JS) + host_permissions

manifest.json 설정:

{
  "host_permissions": [
    "https://api.openai.com/*",
    "https://api.deepl.com/*"
  ]
}

// 외부 API 호출
async function translate(text) {
  const response = await fetch('https://api.deepl.com/v2/translate', {
    method: 'POST',
    headers: {
      'Authorization': 'DeepL-Auth-Key YOUR_KEY',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      text: [text],
      target_lang: 'KO'
    })
  });
  const data = await response.json();
  return data.translations[0].text;
}

⑫ 개발자 도구 확장

F12 개발자 도구에 새 탭(패널)을 추가할 수 있어요. 개발자용 확장의 꽃이에요.

어떤 것이 가능한가

  • F12에 커스텀 패널 추가
  • 페이지 상태·프레임워크 내부 들여다보기
  • 네트워크 요청 분석 확장

대표 확장: React Developer Tools, Redux DevTools, Vue DevTools

핵심 API: devtools

이건 난이도가 좀 높은 편이라 입문 프로젝트로는 추천하지 않아요. 나중에 중상급 프로젝트로 도전해볼 만해요.

2부. 할 수 없는 것 — 경계선 알기

가능성만 보다가 막상 개발 시작했는데 “어, 이게 안 되네?” 하면 시간 낭비예요. 미리 선을 그어볼게요.

❌ 운영체제 수준의 작업

  • 파일 시스템에 직접 읽고 쓰기 (다운로드 폴더 외)
  • 다른 프로그램 실행 (엑셀 열기, 파이썬 실행 등)
  • 시스템 설정 변경

우회 방법: Native Messaging이라는 기능으로, 사용자가 별도로 설치한 네이티브 프로그램과 통신할 수는 있어요. 하지만 설치 장벽이 높아져서 대중적인 확장에는 잘 안 써요.

❌ 다른 확장프로그램 조작

  • 다른 확장의 데이터 훔쳐보기
  • 다른 확장의 기능 막기
  • 확장끼리 격리되어 있어 서로 못 건드려요

❌ 브라우저 핵심 UI 변경

  • 주소창 자체를 다른 걸로 교체
  • 탭 렌더링 방식 변경
  • 브라우저의 근본 구조 변경

❌ 특정 보호된 페이지 접근

Content Script가 아예 동작하지 않는 페이지들이 있어요.

  • chrome:// 내부 페이지 (설정, 히스토리 페이지 등)
  • 크롬 웹 스토어 페이지
  • 다른 확장프로그램 페이지
  • 일부 file:// 페이지 (설정에서 허용해야 함)

❌ 백그라운드에서 영원히 상주

Manifest V3의 Service Worker는 일정 시간 idle하면 자동으로 종료돼요. 24시간 돌아가는 크롤러나 상시 감시 프로그램은 만들기 어려워요. 중요한 상태는 chrome.storage에 저장했다가 깨어날 때 다시 읽어와야 해요.

❌ 페이지 자체의 JS 전역 변수 접근

Content Script는 페이지와 격리된 환경에서 돌아가요. DOM은 공유하지만 JS 전역 변수(window.myApp 같은)는 분리돼 있어요. 우회 방법이 있지만 복잡해요.

❌ 정책적으로 금지되는 것 (기술적으로는 가능해도)

스토어 심사에서 반려되는 것들이에요.

  • 사용자 동의 없는 데이터 수집
  • 크립토마이닝
  • 자동 결제·금융 자동화
  • 성인·폭력·불법 콘텐츠
  • 권한 과다 요구 (최소 권한 원칙 위반)

3부. 프로젝트 아이디어 25선 — 난이도별 정리

이제 진짜 재미있는 부분이에요. 직접 만들어볼 만한 아이디어들을 난이도별로 정리했어요. 각 아이디어마다 필요한 API와 개발 기간 추정치를 붙였어요.

🟢 초급 (반나절~하루) — 첫 확장프로그램용

웹 개발 경험이 있다면 몇 시간이면 만들 수 있는 수준이에요. API 한두 개만 쓰니까 학습 부담도 적어요.

1. 새 탭 커스터마이저

  • 설명: 새 탭을 명언, 날씨, 할 일 목록이 있는 대시보드로 교체
  • API: chrome_url_overrides, storage
  • 기간: 반나절
  • 참고: Momentum

2. 페이지 다크 모드 강제기

  • 설명: 다크 모드를 지원하지 않는 사이트에 어두운 CSS 주입
  • API: Content Script, storage
  • 기간: 몇 시간
  • 참고: Dark Reader (초간단 버전)

3. 읽기 시간 표시기

  • 설명: 블로그·기사 페이지에 “예상 읽기 시간: 5분” 배지 자동 추가
  • API: Content Script
  • 기간: 2~3시간
  • 포인트: 글자 수 세고 분당 읽기 속도로 나누기만 하면 됨

4. 빠른 메모장

  • 설명: 툴바 아이콘 클릭 시 뜨는 팝업에서 메모 작성·저장
  • API: action, storage
  • 기간: 반나절
  • 확장 아이디어: 태그 기능, 검색, 카테고리

5. 뽀모도로 타이머

  • 설명: 25분 집중 + 5분 휴식 타이머, 완료 시 알림
  • API: alarms, notifications, action
  • 기간: 반나절
  • 참고: Marinara

6. 색상 추출기 (Color Picker)

  • 설명: 웹페이지에서 클릭한 부분의 색상을 HEX/RGB로 복사
  • API: tabs.captureVisibleTab, Clipboard API
  • 기간: 하루
  • 수요층: 디자이너, 개발자

7. URL 단축 생성기

  • 설명: 현재 페이지 URL을 단축 URL로 변환해서 클립보드 복사
  • API: Clipboard API, tabs, 외부 API (Bitly 등)
  • 기간: 2~3시간

🟡 중급 (2~5일) — 실제로 유용한 도구

여러 API를 조합하고 UI에 좀 더 신경을 써야 해요. 실제로 매일 쓰고 싶어질 만한 수준이에요.

8. 탭 세션 관리자

  • 설명: 현재 열린 탭들을 “작업용”, “공부용” 세션으로 저장·복원
  • API: tabs, windows, storage.sync
  • 기간: 2~3일
  • 참고: OneTab, Toby
  • 수익성: 탭 많이 띄우는 사람 필수

9. YouTube 집중 모드

  • 설명: 유튜브 쇼츠, 홈 추천, 사이드바 추천 영상 숨기기
  • API: Content Script, storage, scripting
  • 기간: 2~3일
  • 트렌드: “도파민 디톡스” 수요와 잘 맞음
  • 참고: Unhook

10. 쇼핑몰 가격 추적기

  • 설명: 상품 페이지 가격을 기록하고 하락 시 알림
  • API: Content Script, storage, alarms, notifications
  • 기간: 4~5일
  • 참고: Keepa, Honey

11. AI 번역기 (우클릭 메뉴)

  • 설명: 선택한 텍스트를 우클릭 메뉴로 AI 번역
  • API: contextMenus, 외부 API (DeepL, OpenAI)
  • 기간: 3~4일
  • 확장 아이디어: 번역 히스토리, 단어장

12. 북마크 자동 정리기

  • 설명: 북마크를 자동 카테고리 분류, 중복·죽은 링크 찾기
  • API: bookmarks
  • 기간: 3~4일

13. 전체 페이지 스크린샷

  • 설명: 스크롤되는 페이지 전체를 하나의 이미지로 캡처
  • API: tabs.captureVisibleTab, Content Script로 스크롤 제어
  • 기간: 3~4일
  • 참고: GoFullPage

14. 쿠키 배너 자동 닫기

  • 설명: “쿠키 수락” 팝업 자동 감지·처리
  • API: Content Script
  • 기간: 3~4일 (규칙 DB 구축이 관건)
  • 참고: I don’t care about cookies

15. 링크 미리보기 (호버 시 썸네일)

  • 설명: 링크에 마우스 올리면 해당 페이지 미리보기
  • API: Content Script, 외부 스크린샷 API
  • 기간: 4~5일

16. 웹페이지 요약기 (AI)

  • 설명: 현재 페이지를 AI가 3줄로 요약
  • API: Content Script, OpenAI/Claude API
  • 기간: 3~4일
  • 트렌드: 지금 가장 핫한 카테고리

🟠 중상급 (1~2주) — 개발자·파워유저용

좀 더 깊이 있는 기능과 복잡한 UI가 들어가요. 포트폴리오로 쓸 만한 수준이에요.

17. API 응답 JSON 뷰어

  • 설명: JSON 응답을 예쁘게 포맷팅·접기·검색 가능하게 렌더링
  • API: declarativeContent, Content Script
  • 기간: 1주
  • 대상: 개발자
  • 참고: JSONView

18. 개발자 도구 커스텀 패널

  • 설명: F12에 커스텀 탭 추가해서 특정 프레임워크 디버깅
  • API: devtools, debugger
  • 기간: 1~2주
  • 참고: React DevTools, Redux DevTools

19. CSS 인스펙터·편집기

  • 설명: 요소 클릭 시 적용된 CSS를 보여주고 실시간 수정
  • API: Content Script, DevTools API
  • 기간: 1~2주

20. GitHub 저장소 파일 트리

  • 설명: GitHub 페이지에 IDE 같은 파일 트리 사이드바 추가
  • API: Content Script, GitHub API
  • 기간: 1~2주
  • 참고: Octotree

21. 로컬스토리지·쿠키 편집기

  • 설명: 개발 중 자주 건드리는 브라우저 저장소를 예쁜 UI로 편집
  • API: cookies, Content Script
  • 기간: 1주

🔴 고급 (수 주~수 개월) — 야심차게

잘 만들면 수만 명이 쓰는 킬러 앱이 될 수 있는 것들이에요.

22. AI 페이지 어시스턴트

  • 설명: 현재 페이지에 대해 AI와 대화·질문·요약
  • API: Content Script, sidePanel, LLM API
  • 기간: 수 주
  • 수익화: Freemium 가능
  • 참고: Harpa, Monica

23. 프라이버시 보호 도구

  • 설명: 추적 스크립트 차단, 핑거프린팅 방어
  • API: declarativeNetRequest, webRequest
  • 기간: 수 개월
  • 참고: Privacy Badger, DuckDuckGo Privacy

24. 비밀번호 관리자

  • 설명: 암호화 저장, 자동 채우기, 동기화
  • API: storage, Content Script, Crypto API
  • 기간: 수 개월
  • 주의: 보안이 핵심. 책임감 필요
  • 참고: Bitwarden

25. 웹 자동화·매크로

  • 설명: 반복 작업 녹화·재생 (노코드 자동화)
  • API: Content Script, scripting
  • 기간: 수 개월
  • 참고: UI.Vision, Automa

아이디어 선택 가이드

“25개 중에 뭘 고르지?” 또 막막해지셨죠? 고르는 기준 몇 가지를 드릴게요.

첫 프로젝트라면

초급 1~7번 중에서 고르세요. 완성해서 성공 경험을 쌓는 게 중요해요. 개인적으로는 5번 뽀모도로 타이머 를 추천해요. alarms, notifications, storage, action 같은 핵심 API를 골고루 경험할 수 있고, 실제로 유용하거든요.

포트폴리오용이라면

중급 8~16번 중에서 고르세요. 특히 트렌드에 맞는 것(9번 유튜브 집중 모드, 16번 AI 요약기)이 좋아요. 검색 노출도 잘 되고, 스토어에서도 눈에 띄거든요.

실제로 내가 매일 쓸 도구

자기 불편을 해결하는 것을 고르세요. “나는 탭을 너무 많이 여는데 관리가 안 돼” → 8번. “유튜브에서 자꾸 딴 영상 보게 돼” → 9번. 자기가 쓰면서 개선하면 진짜 좋은 확장이 나와요.

수익화를 노린다면

중상급·고급 중에서 B2B 성격이 있는 것(개발자용 도구, 생산성 도구)을 고르세요. Freemium 모델이 잘 먹히는 영역이에요. 다만 경쟁도 치열하니 차별화 포인트가 필요해요.

이 시리즈의 실습 예제

참고로 4편 실습에서는 “웹페이지 분석기 + 다크 모드 토글” 을 함께 만들 거예요. 이 예제 하나에 오늘 소개한 기능 중 다음 것들이 다 들어가요.

  • ① 웹페이지 조작 (배경색 변경)
  • ② 브라우저 UI 확장 (팝업 UI)
  • ④ 데이터 저장 (설정 저장)
  • 그리고 세 환경 간 메시지 패싱 (다음 편의 핵심 주제)

실습을 끝내면 오늘 소개한 초급 아이디어 대부분을 혼자서 만들 수 있게 돼요.

마무리하며

오늘 다룬 내용을 한 줄로 요약하면 이래요.

확장프로그램은 웹페이지 조작부터 브라우저 UI 확장, 외부 API 연동까지 12가지 영역을 건드릴 수 있다. 반대로 OS 수준 작업이나 영구 상주는 불가능하다. 이 경계 안에서 25개 이상의 실용적 프로젝트 아이디어가 존재한다.

이제 여러분 차례예요. 종이 한 장 꺼내서 “내가 만들어보고 싶은 아이디어 3개” 를 적어보세요. 이 시리즈가 끝날 때쯤이면 그중 최소 하나는 만들 수 있게 돼 있을 거예요.

다음 편에서는 “확장프로그램의 4가지 구성 요소” 를 깊이 있게 해부할 거예요. manifest가 왜 필요한지, popup과 content script는 왜 서로 직접 대화할 수 없는지, background service worker는 왜 자꾸 죽는지 — 공식 문서를 봤을 때 길을 잃지 않을 지도를 손에 쥐게 되는 편이에요.

그럼 다음 편에서 만나요. 👋



댓글 남기기