2.1 크롬 익스텐션 만들어 보기 Part I - 기본 구조
글을 쓰고 있는 나는 개발자이기 때문에 일단 만드는 것에 관심이 많다. 먼저 간단한 익스텐션들을 몇 개 만들어 보고 익스텐션의 구조를 살펴보면 코드와 개념이 서로 더 잘 연결될 것 같다.
익스텐션은 크게 아래와 같이 네 부분들로 구성된다.
ⓐ 익스텐션 UI
익스텐션 UI는 익스텐션의 메뉴와 같다. 익스텐션의 기능을 선택하고 현재 상태를 보여줄 수도 있다. 익스텐션의 자체 메뉴를 구성하는 UI를 popup 스크립트라고 부르기도 한다.
ⓑ 웹 페이지 삽입 스크립트
익스텐션은 기본적으로 웹 페이지 위에서 동작하는 애드온(add-on)이다. 따라서 특정 웹 페이지에 기능을 추가하기 위한 스크립트가 존재한다. 페이지에 삽입되는 이 스크립트를 보통 content 스크립트라고 부르기도 한다.
ⓒ 백그라운드(background) 스크립트
백그라운드 스크립트는 익스텐션 UI와 웹 페이지에 삽입되는 스크립트 사이를 중계한다. 예를 들어 익스텐션 UI의 입력(예, 메뉴 선택)에 따라 웹 페이지에 삽입되는 스크립트의 동작에 변화를 줄 수 있고 이는 익스텐션 UI → 백그라운드 스크립트 → 웹 페이지 삽입 스크립트 순서로 전달 및 반영된다.
백그라운드 스크립트는 웹 브라우저의 백그라운드에서 대기하고 있다. 그리고 위와 같이 자신이 필요한 경우 필요한 서비스를 제공하고 다시 대기 상태로 들어간다. 이 백그라운드 서비스를 보통 service worker라고 부른다.
ⓓ manifest 파일
키(key)-값(value)의 쌍으로 이루어진 JSON 형태로 기술되는 manifest 파일은 위에서 소개한 익스텐션 UI, 웹 페이지 삽입 스크립트, 그리고 백그라운드 스크립트를 묶는 역할을 하는 파일이다. 여기에 더해 익스텐션이 필요로 하는 권한, 익스텐션의 아이콘 등이 명시된다.
익스텐션과 웹 페이지의 관계를 아래와 같이 그림으로 나타내 볼 수 있다.
간단한 익스텐션을 만들어보면서 익스텐션을 구성하는 각 요소들의 역할에 대해 다시 살펴볼 것이다. 자세한 내용보다 브라우저 익스텐션이 여러 파일들로 구성된다는 큰 그림을 아는 것이 더 중요하다.
처음 만들어 볼 익스텐션 예제는 Hello, world! 익스텐션이다. 구글에서 제공하는 익스텐션 표준 예제로 가장 간단한 익스텐션이다. 이 Hello, world! 익스텐션을 통해 익스텐션에 대해 아래 내용들을 배울 수 있다.
· 크롬 익스텐션의 기본적인 구성 요소를 파악한다.
· popup 스크립트(익스텐션 UI) 작성 방법
먼저 익스텐션 코드들을 저장할 폴더를 하나 만든다. 여기서는 hello_extension이라는 이름으로 폴더를 만들었다. 에디터를 열고 새로 만든 hello_extension 폴더를 open한다. 에디터는 Visual Studio Code(이하 vscode)를 사용하였다.
먼저 manifest.json 파일을 생성하고 작성한다. manifest파일은 익스텐션의 전체 내용에 대해 설명하는 역할을 한다.
{
"manifest_version": 3
, "name": "Hello Extensions"
, "description": "Base Level Extension"
, "version": "1.0"
, "action": {
"default_popup": "hello.html"
, "default_icon": "hi.png"
}
}<hello_extension/manifest.json>
manifest 파일은 확장자에 나타난 것과 같이 '키-값'이 쌍을 이루는 JSON 파일이다. 예제의 manifest.json 파일을 기준으로 설명하면 아래와 같다. 가장 기본적인 내용들로 구성되어 있다.
| 항목 | 설명 | 필수 여부 |
| manifest_version | 매니페스트 파일의 버전을 표시한다. 크롬 웹 익스텐션에서 사용하는 현재 버전은 3이다. | Y |
| name | 익스텐션의 이름이다. | Y |
| description | 익스텐션에 대한 설명이다. | N |
| version | 익스텐션의 버전이다. 버전은 0.0 부터 시작하고 크롬 웹 스토어를 통해 배포하는 경우 새로 배포하는 익스텐션의 버전은 이전 익스텐션보다 무조건 커야한다. 따라서 처음부터 큰 값을 사용하면 얼마 지나지 않아 버전 값이 꽤 커지게 될 수 있다. | Y |
| action | 크롬 익스텐션의 아이콘을 클릭했을 때 실행할 스크립트(default_popup)와 아이콘(default_icon) 등을 지정한다. | N |
익스텐션의 아이콘은 브라우저에 아래와 같이 나타난다(크롬 웹 브라우저 기준).
아이콘으로 사용할 파일을 직접 만들거나 자유로이 사용이 가능한 이미지를 사용하면 된다. 예제에서는 구글에서 제공하는 아이콘 이미지를 아래 위치에서 다운로드 받아 사용하였다. 다운로드 받은 이미지를 익스텐션 디렉토리인 hello_extension 디렉토리 안에 포함시킨다.
아이콘은 정사각형 모양의 16x16 픽셀 이상의 크기를 가진 이미지 파일을 사용할 수 있다. 기기에 따라 다양한 해상도의 이미지가 필요할 수 있으므로 여러개를 지정하여 사용하기도 한다(본 예제에서는 하나만 사용).
이제 익스텐션의 UI를 구성하는 스크립트를 hello.html이라는 이름으로 만들어 보자. 익스텐션 디렉토리 안에 hello.html 파일을 생성하고 아래 내용을 입력한다.
<html>
<body>
<h1>Hello, Extension!</h1>
<script src="popup.js"></script>
</body>
</html><hello_extension/hello.html>
hello.html 스크립트 내용을 보면 제목 엘리먼트<h1>으로 익스텐션의 이름이 페이지에 표시되고 popup.js 자바스크립트 코드를 호출하게끔 되어있다. 이어서 popup.js 파일을 생성하고 아래와 같이 내용을 작성하자.
console.log("This is a popup!");<hello_extension/popup.js>
popup.js 스크립트의 내용을 보면 웹 브라우저의 디버그 화면에 This is a popup! 문자열을 출력하게끔 되어있다.
아래와 같은 파일들로 익스텐션이 구성되었을 것이다.
이제 익스텐션을 웹 프라우저에 설치하고 동작시켜보자.
웹 브라우저 메뉴 버튼을 클릭하고 '메뉴 > 확장 프로그램 > 확장 프로그램 관리'를 선택한다.
확장 프로그램 관리로 들어가면 설치되어 있는 확장 프로그램(=브라우저 익스텐션)들이 보일 것이다. 관리 화면 우측 위의 '개발자 모드' 토글 버튼을 활성화 시킨다.
개발자 모드를 활성화시키면 아래와 같이 압축해제된 확장 프로그램 로드가 가능해진다.
압축해제된 확장 프로그램 로드 버튼을 클릭하면 폴더를 선택하라는 탐색기 창이 나타나는데 여기서 위에서 작성한 hello extension의 디렉토리를 선택하면 작성한 익스텐션이 브라우저에 설치된다.
이제 새 탭을 띄우고 웹 브라우저의 확장 프로그램 아이콘을 클릭하면 설치한 확장 프로그램(익스텐션)을 선택하고 익스텐션의 UI를 띄울 수 있다. 웹 브라우저의 디버그 모드(크롬 브라우저 기준 F12키)를 열면 popup.js 파일에 작성했던 This is a popup! 문자열도 출력되어 있을 것이다.
Hello, extension 예제는 사실 별다른 기능은 없다. 익스텐션이 어떻게 만들어지고 어떻게 브라우저에 설치되고 로드되는지 살펴보는것이 핵심이다. 아래와 같이 정리해보자.
1. 익스텐션의 구성(hello extension 예제 기준)
· 익스텐션 UI(popup UI) 스크립트: hello.html, popup.js. 익스텐션의 자체 UI 페이지다.
· manifest 파일: manifest.json. 익스텐션의 구성 요소들을 기술한다.
· 익스텐션 아이콘: Hi.png
2. 익스텐션 설치
브라우저 메뉴의 확장 프로그램 관리 기능 사용
3. 익스텐션 실행
익스텐션은 브라우저와 함께 실행되고 있는 상태다. 이어지는 포스팅들에서 살펴보겠지만 특정 페이지(URL)에서만 지정한 익스텐션을 활성화시키도록 manifest 파일에서 설정할 수 있다. 익스텐션의 아이콘을 클릭하면 익스텐션 UI를 띄울 수 있다.
이어지는 포스팅들에서는 좀 더 복잡한 익스텐션을 만들어보면서 익스텐션을 구성하는 구성요소들과 기능에 대해 계속 살펴보도록 하겠다.
■