Sample Chrome Extension

React + TypeScript + Vite로 만든 크롬 확장 프로그램 샘플입니다.

사전 준비

• Node.js 18 이상
• Chrome 브라우저

설치 방법

# 의존성 설치
npm install

# 개발 모드 실행
npm run dev

# 프로덕션 빌드
npm run build

크롬에서 확장 프로그램 로드하기

1. Chrome 브라우저에서 chrome://extensions/ 접속
2. 우측 상단의 "개발자 모드" 토글 활성화
3. "압축해제된 확장 프로그램을 로드합니다." 버튼 클릭
4. 프로젝트의 dist 폴더 선택
5. 확장 프로그램이 성공적으로 로드되면 아무 웹사이트에 접속하여 상단에 녹색 배너가 나타나는지 확인

프로젝트 구조

sample-chrome-extension/
├── public/
│   └── manifest.json          # 확장 프로그램 설정
├── src/
│   ├── background/
│   │   └── background.ts      # 백그라운드 스크립트
│   ├── content/
│   │   ├── content.ts         # 콘텐츠 스크립트
│   │   └── content.css        # 콘텐츠 스타일
│   ├── types/
│   │   └── chrome.d.ts        # TypeScript 타입 정의
│   └── App.tsx                # 팝업 UI 컴포넌트
├── popup.html                 # 팝업 진입점
└── vite.config.ts             # Vite 설정

Manifest.json 주요 항목 설명

• manifest_version: 3: 최신 매니페스트 버전 사용
• permissions:
  • activeTab: 현재 활성 탭에 접근 권한
  • tabs: 탭 정보 조회 권한
• background.service_worker: 백그라운드에서 실행될 스크립트 (Service Worker)
• content_scripts:
  • matches: ["<all_urls>"]: 모든 웹사이트에서 실행
  • js: 웹페이지에 삽입할 JavaScript 파일
• action:
  • default_popup: 확장 프로그램 아이콘 클릭 시 표시할 팝업 HTML
  • default_title: 아이콘 hover 시 표시되는 툴팁

주요 기능

• React 기반 팝업 UI (메시지 입력 및 전송)
• 모든 웹페이지에서 실행되는 콘텐츠 스크립트
• 페이지 로드 시 상단에 알림 배너 표시 (3초 후 자동 제거)
• 팝업에서 현재 탭으로 메시지 전송 기능
• Background script와 Content script 간 메시지 통신
• TypeScript 타입 지원

디버깅

Background Script 디버깅

1. chrome://extensions/ 접속
2. 해당 확장 프로그램의 "서비스 워커" 클릭
3. 개발자 도구에서 로그 확인

Content Script 디버깅

1. 웹페이지에서 F12 눌러 개발자 도구 열기
2. Console 탭에서 로그 확인

수정 및 개발

1. src/content/content.ts - 웹페이지에 표시되는 기능 수정
2. src/background/background.ts - 백그라운드 동작 수정
3. public/manifest.json - 확장 프로그램 권한 및 설정 변경

개발 모드에서는 코드 수정 시 자동으로 리로드됩니다.