[Chrome Extension] 기본 개념

mahifest.json

This JSON file describes the extension's capabilities and configuration. 

JSON 파일은 익스텐션의 확장 기능 및 구성에 대해 설명합니다. 필수 key는 manifest_version과 name, version 입니다.

 

content script 

한 페이지의 내용을 읽고 쓸 수 있는 스크립트를 실행할 수 있는데, 이것이 바로 콘텐츠 스크립트입니다. menifest.json에 content.js라는 이름의 파일을 등록해 사용할 수 있습니다. 

 

background script | extension service worker

v2까지는 background script와 service worker가 따로 구분 or background script라는 용어가 사용된 것 같은데 v3부터는 service worker로 통합된 것 같습니다.

 

A service worker is a background script that acts as the extension's main event handler.

확장 프로그램의 메인 중앙 이벤트 핸들러입니다. 

 

익스텐션은 본인의 서비스 워커를 사용해 백그라운드에서 브라우저 이벤트를 모니터링 할 수 있습니다. 크롬 익스텐션의 백그라운드 작업을 처리하는 자바스크립트 환경으로 브라우저가 열려 있는 동안 필요할 때에만 활성화되고 작업이 끝나면 종료 됩니다.  일반적인 서비스 워크와 차이점이 있습니다.

 

일반적인 서비스 워커란?

웹 페이지와 독립적으로 동작하며 브라우저의 백그라운드에서 실행되는 자바스크립트 실행환경입니다. 백그라운드 작업을 수행하므로 브라우저가 닫혀 있어도 푸시 알림이나 동기화 등의 백그라운드 작업을 수행할 수 있고, 데이터를 캐시하여 페이지 로딩 속도를 향상시킬 수 있습니다. 오프라인 상태에서도 캐시된 자원을 로드하거나 네트워크 요청을 제어할 수 있습니다.  크롬 브라우저의 프로세스 위에서 돌아가며 웹 페이지 스크립트와 달리 백그라운드에서 작동이 가능하며, 필요할 때만 쓰이고 필요하지 않을 때에는 종료됩니다. (이벤트를 처리하고 필요하지 않을 때에는 종료할 수 있는 환경)

https://developer.chrome.com/docs/extensions/develop/concepts/service-workers

 

차이점

크롬 익스텐션 서비스 워커는 오직 크롬 익스텐션의 백그라운드 작업을 처리하기 위해 사용되며, 브라우저 전반에 걸쳐 작동합니다. 브라우저 이벤트 처리나 알림 등 다양한 백그라운드 작업을 처리합니다. 

 

이런 확장 서비스 워커(이하 서비스 워커로 칭함)는 특정 매서드들로 전달받을 이벤트를 대기(will listen for)합니다. 

 

UI element

익스텐션의 유저 인터페이스 부분. poput.html 으로 구현됩니다. (v2 버전의 ui element와 v3의 ui 디자인은 좀 다릅니다.)

 

 

이전 버전의 아키텍처 톺아보기 문서

이전버전이긴 한데, background.js가 서비스 워커로 대체되거나 통합된 것 외에는 큰 틀에서 비슷한 구조로 보이므로 참고용으로 보면 좋을 것 같습니다. 

https://developer.chrome.com/docs/extensions/mv2/architecture-overview

출처

https://developer.chrome.com/docs/extensions/develop/migrate/to-service-workers#differences-with-sws

https://developer.chrome.com/docs/extensions/reference/manifest/background

https://developer.chrome.com/docs/extensions/get-started