크롬 확장기능 주요 기능

1. 사용자 인터페이스 사용자화 : 브라우저 툴바에 버튼 추가, 사용자 정의 팝업/오버레이 생성 등

2. 콘텐츠 스크립트 : 웹페이지에 직접 스크립트를 삽입하여 DOM 조작 가능

3. 백그라운드 스크립트 : 브라우저를 사용하는 동안 지속적으로 실행돼서 필요한 기능 제공

4. API 접근 : 북마크/탭/윈도우 관리, 히스토리 조작 등 브라우저의 다양한 영역 접근 가능

   🔍 탭 이동, capture, zoom 등 다양한 방식으로 제어 가능

5. 메시징 시스템 : 확장 기능의 다른 컴포넌트 혹은 웹페이지와 메시지 교환 가능

6. 웹 요청 조작 : 네트워크 요청 가로채기, 광고 차단, 프라이버시 보호, 웹 트래픽 관리 등

   🔍  *chrome.webRequest API로 http 요청을 가로채거나 request header 수정 가능*

7. 사용자 데이터 저장 : 로컬 저장소 혹은 Google 계정과 동기화된 저장소를 사용하여 데이터 저장/관리

8. 다국어 지원 : 다양한 언어로 확장 기능 제공

크롬 확장기능 구조

<aside> <img src="/icons/search_gray.svg" alt="/icons/search_gray.svg" width="40px" /> 웹 페이지에서 마우스 우클릭 시 표시되는 메뉴에 확장 프로그램 항목을 추가할 수도 있다

</aside>

https://sunnyzhou-1024.github.io/chrome-extension-docs/extensions/overview.html

1. 백그라운드 스크립트 : 이벤트 기반의 서비스 워커(Manifest V3 기준)
   1. 확장 프로그램의 핵심 로직을 실행하는 곳(라이프사이클 관리/이벤트 처리 등)
   2. 브라우저 시작시 활성화되고, 대기 상태로 있다가 이벤트 발생시 작업 수행
   3. 대부분의 Extension API 사용 가능
   4. 웹페이지에 대한 접근 권한 없음 (DOM 접근 불가)
2. 콘텐츠 스크립트 : 웹페이지 로드시 스크립트 삽입/실행
   1. 웹 페이지의 컨텍스트에서 실행 (웹페이지의 자바스크립트 스코프/변수 등은 접근 불가)
   2. 스크립트가 주입된 웹사이트의 DOM에 접근하거나 수정 가능
   3. 일부 Extension API만 사용 가능
   4. window.postMessage 혹은 커스텀 이벤트를 통해 웹 페이지의 다른 스크립트와 통신 가능
3. 옵션 페이지 : 확장 프로그램의 설정을 변경할 수 있는 HTML 페이지
4. 팝업 페이지 : 확장 프로그램 아이콘을 클릭하면 나타나는 UI

웹 워커 vs 서비스 워커