크롬 확장 프로그램은 구글 크롬 브라우저에 설치해서 사용하는 부가 기능을 말합니다. 크롬 웹 스토어에서 내려받을 수 있고 개발한 확장 프로그램을 올릴 수도 있습니다.
웹킷 엔진에서 실행됩니다.
- HTML5, CSS3 지원이 뛰어납니다.
- 같은 엔진을 사용하는 iOS, 안드로이드에 응용할 수 있습니다.
HTML, 자바스크립트, 스타일시트 파일로 이루어져 있습니다.
- 웹 개발에 필요한 지식을 그대로 사용할 수 있습니다.
- XUL을 써야 하는 파이어폭스에 비해 개발하기 편합니다.
확장 프로그램 형태
크롬 확장 프로그램은 여러 가지 형태로 개발할 수 있습니다. 외관상으로 구별되는 점도 있고 사용하는 API가 다르기도 합니다. 어떤 형태로 개발할 수 있는지 하나씩 살펴보겠습니다.
브라우저 액션, 페이지 액션 (Browser Actions, Page Actions)
가장 일반적인 형태의 확장 프로그램입니다. 브라우저 액션은 주소창 오른쪽에 페이지 액션은 주소창 안에 아이콘이 나타납니다. 둘 다 팝업 페이지를 가질 수 있습니다.
보조 메뉴 (Context Menus)
마우스 오른쪽 클릭을 하면 생기는 보조 메뉴에 나타납니다. 특정한 종류의 요소를 클릭했을 때만 동작하게 할 수 있습니다.
옴니박스 (Omnibox)
특정 검색어를 주소창에 입력하면 나타납니다. 주로 검색과 관련된 확장 프로그램에 적합합니다.
오버라이드 페이지 (Override Pages)
크롬에서 기본적으로 제공해 주는 즐겨찾기, 방문 기록, 새 탭 페이지를 바꿉니다.
앱 (Apps)
크롬 브라우저의 기능을 확장하려는 것이 아니라 독립적인 탭에서 동작하는 웹 앱입니다.
테마 (Themes)
크롬 브라우저의 외관을 바꿉니다. 연재에서 다루지 않습니다.
확장 프로그램 페이지
확장 프로그램을 어떤 형태로 개발할지 결정했다면 이번에는 어떤 페이지를 작성해야 하는지 알아봅니다. 반드시 작성해야 하는 페이지는 없습니다. 만들려는 확장 프로그램 형태에 따라서 필요한 페이지를 추가하면 됩니다.
백그라운드 페이지 (Background Pages)
확장 프로그램 개발의 기본이 되는 HTML 파일입니다. 확장 프로그램 실행에 필요한 주 알고리즘을 이 페이지에 넣는 것이 일반적입니다. 사용자에게 보이지 않습니다.
컨텐트 스크립트 (Content Scripts)
웹 페이지에 끼워 넣을 수 있는 자바스크립트와 스타일시트 파일을 일컫습니다. 웹 페이지의 DOM(Document Object Model)을 살펴보거나 수정하기 위해 사용합니다.
팝업 페이지 (Popup Pages)
브라우저 액션, 페이지 액션에서 사용할 수 있는 HTML 파일입니다. 아이콘을 클릭하면 팝업 페이지를 보여줍니다.
설정 페이지 (Options Pages)
확장 프로그램에서 사용하는 값들을 사용자가 선택할 수 있게 하고 싶을 때 제공하는 HTML 파일입니다. 보통 localStorage를 이용해서 값들을 저장합니다.
확장 프로그램 등록
편집기를 열고 아래 내용을 입력한 후
manifest.json이름으로 저장합니다. 키와 문자열은 반드시 겹따옴표로 둘러 싸야 합니다.{ "name": "첫 번째 확장 프로그램", "version": "0.1.0" }주소창에
chrome://extensions을 입력하거나 도구 > 확장 프로그램 메뉴를 선택합니다.- 개발자 모드를 열고 압축해제된 확장 프로그램 로드… 버튼을 클릭합니다.
manifest.json파일을 저장한 폴더를 선택합니다.- 파일을 추가하거나 수정하면 새로고침 버튼을 누르면 됩니다.
정리
크롬 브라우저에서만 실행할 수 있다는 분명한 단점이 있지만 다른 브라우저를 전혀 신경 쓰지 않고 마음껏 HTML5, CSS3를 실험할 수 있습니다. 웹 개발자에게는 학습 난도가 낮아서 크롬 브라우저를 주로 사용한다면 장난삼아(?) 한 번 손댈만한 것 같습니다.
다음 글부터 브라우저 액션과 페이지 액션을 시작으로 여러 예제를 만들어 보면서 확장 프로그램의 형태와 페이지에 대해 자세하게 살펴보겠습니다.
