2.4. 크롬 익스텐션 만들어보기 Part I - 구조 및 예제 정리

 

이전 세 포스팅들을 통해 크롬 익스텐션을 구성하는 요소들을 하나씩 살펴보고 각각 예제를 작성해보았다. 크롬 익스텐션은 크게 아래 세 가지 요소들로 구성된다.

 

· 익스텐션의 UI: popup 스크립트

· 웹 페이지에 삽입되는 스크립트: content 스크립트

· 백그라운드 스크립트: 서비스 워커(service worker)

 

위 요소들 각각을 설명하는 포스팅들은 아래와 같았다.

· 익스텐션의 UI: popup 스크립트

2024.01.30 - [웹 프로그래밍 고급 주제들] - 2.1 크롬 익스텐션 만들어 보기 Part I - 기본 구조

 

· 웹 페이지에 삽입되는 스크립트: content 스크립트

2024.02.02 - [웹 프로그래밍 고급 주제들] - 2.2 크롬 익스텐션 만들어 보기 Part I - 웹 페이지 삽입 스크립트

 

· 백그라운드 스크립트: 서비스 워커(service worker)

2024.02.08 - [웹 프로그래밍 고급 주제들] - 2.3 크롬 익스텐션 만들어 보기 Part I - 서비스 워커

 

---

 

<익스텐션, 웹 페이지, 그리고 웹 브라우저 사이의 관계>

 

익스텐션과 웹 페이지, 그리고 웹 브라우저 사이의 관계를 나타낸 위 그림에서 사용자가 인지하고 상호작용하는 영역은 웹 브라우저의 foreground 부분인 extention UI script, content script, 그리고 웹 페이지들이다. 먼저 extention UI는 익스텐션 아이콘을 클릭하면 나타나는 익스텐션 자체의 사용자 인터페이스 화면이다.

<익스텐션 아이콘 그리고 익스텐션 UI>

 

익스텐션 UI를 구성하는 코드는 HTML과 CSS로 구성된다. 그리고 여기에 사용자와의 동적인 상호작용을 위해 JavaScript 코드가 사용된다. 즉, 일반적인 웹 페이지 작성과 같다고 보면 된다. 익스텐션 UI 코드를 popup 스크립트라고도 부른다. 그 이유는 익스텐션 아이콘을 클릭하면 익스텐션 UI가 popup 메뉴와 같이 나타나기 때문이다.

 

popup 스크립트가 일반 웹 페이지와 다른 점은 서비스 워커와 상호작용하는 API들을 사용한다는 점이다. 일반적인 웹 페이지가 웹 서버와 통신하듯이 popup 스크립트는 서비스 워커와 통신한다. 그리고 서비스 워커는 다시 외부 서버 또는 웹 브라우저에 저장되어 있는 데이터를 가져다 popup 스크립트에 제공한다.

popup 스크립트가 이와 같이 간접적인 방법을 통해 외부 서버 또는 브라우저 내부에 저장되어 있는 데이터에 접근하는 이유는 popup 스크립트가 그 내부에 상태값 저장을 위한 데이터를 만들지 않기 때문이다. 이는 일반적인 웹 페이지들이 상태값을 저장하지 않는 것과 마찬가지이다(쿠키에 값을 저장하거나 서비스를 제공하는 서버에 값을 저장한다).

 

웹 페이지에 삽입되는 content 스크립트는 타겟 웹 페이지에 삽입되어 마치 하나의 페이지처럼 동작한다. content 스크립트 역시 서비스 워커를 통해 외부 서버 또는 브라우저 내부 데이터에 접근한다. 그 이유는 popup 스크립트의 경우와는 차이가 있다. content 스크립트가 서비스 워커를 통해 외부 서버에 접근하는 이유는 Single Origin Policy(SOP) 때문이다. content 스크립트는 자신만의 고유한 도메인(domain ≒ URL 주소)을 갖지 않고 타겟 페이지에 삽입되어 동작한다. 따라서 fetch 함수와 같은 JavaScript API를 이용하여 외부 서버에 접근하면 자신이 삽입되어 있는 타겟 페이지 도메인에서 이와는 다른 도메인을 가진 서버에 데이터를 요청하는 것이 되고 이는 SOP 위반이 된다. 따라서 content 스크립트는 서비스 워커를 통해 외부 서버와 데이터를 주고 받는다.

 

popup 스크립트, content 스크립트를 각각 익스텐션이라는 회사의 고객센터 직원, 영업부 직원이라고 한다면 서비스 워커는 지사(local office)에 비유할 수 있다. 서비스 워커는 popup 스크립트, content 스크립트가 필요로 하는 데이터를 웹 브라우저로부터 가져와 전달하거나, 필요에 따라 외부 서버(본사headquarter에 비유할 수 있다)에서 가져와 전달한다. 서비스 워커를 로컬 프록시(local proxy)라고 부르는 이유도 여기에 있다.

 

서비스 워커는 컴퓨팅 자원을 절약하기 위해 종료되었다가 필요할 때 다시 호출된다. 크롬 웹 브라우저 기준으로 서비스 워커가 종료되는 경우는 아래와 같다.

· 30초 이상 이벤트 메시지를 받지 않았을 때.

· 30초 이상 서비스 워커가 API를 호출하지 않았을 때.

· fetch() API를 호출한 후 30초가 지났는데 응답(response)이 도착하지 않았을 때.

· 이벤트 처리, API 호출 후 대기가 5분 이상 계속될 때.

서비스 워커는 자바스크립트의 웹 워커(web worker)중 하나이다. 웹 워커를 실행하면 웹 브라우저의 백그라운드에서 실행되는 스레드가 생성된다. 당연히 서비스 워커도 같은 방식으로 동작한다.

 

다음 포스팅에서는 조금 더 많은 기능을 제공하는 브라우저 익스텐션을 만들면서 서비스 워커 그리고 서비스 워커와 popup 스크립트, content 스크립트의 상호작용에 대해 좀 더 살펴보도록 하겠다.

 

■