크롬(Chrome)은 현재 전 세계에서 가장 많이 사용되는 웹 브라우저입니다. Statcounter의 데스크톱 브라우저 점유율 조사에 따르면 2017년 말 기준 크롬이 데스크톱 브라우저 시장의 무려 65%를 차지했습니다.
이처럼 강력한 시장 지배력을 바탕으로 크롬에 최적화된 설계가 필수가 되었고, 확장 프로그램 분야도 예외가 아닙니다. 크롬 웹 스토어에는 수만 개의 확장 프로그램, 테마, 앱이 등록되어 있으며, 그 어느 브라우저보다 방대한 사용자층을 보유하고 있습니다.
이러한 흐름 속에서 직접 기본적인 크롬 확장 프로그램을 만들어 보고 싶다면, HTML·CSS·자바스크립트 같은 기본적인 웹 개발 지식과 이 모든 것을 하나로 묶어 줄 약간의 JSON만 있으면 충분합니다.
이 글에서는 기본적인 크롬 확장 프로그램을 만들기 위해 꼭 필요한 최소한의 구조를 살펴봅니다. 더 심화된 내용이 궁금하다면 크롬 공식 개발자 확장 프로그램 가이드를 함께 참고하시길 권합니다.
매니페스트(manifest.json) 작성하기
이번 튜토리얼에서는 아이콘을 클릭했을 때 간단한 팝업 메시지를 띄우는 기본 크롬 확장 프로그램을 만들어 보겠습니다. 먼저 다음 세 가지 파일을 준비해야 합니다.
- 아이콘 파일(icon.png)
- 팝업으로 표시할 HTML 파일(popup.html)
- 확장 프로그램의 핵심인 매니페스트 파일(manifest.json)
이 파일들은 모두 확장 프로그램 이름과 동일한 폴더 안에 들어 있어야 합니다. 여기서는 폴더 이름을 'Hello World'로 정하겠습니다.
크롬 확장 프로그램은 매니페스트로 정의됩니다. 이 JSON 코드 조각은 크롬에게 확장 프로그램을 해석하는 방법, 불러올 파일, 그리고 사용자와 상호작용하는 방식을 알려주는 역할을 합니다. 우리가 만들 확장 프로그램의 매니페스트 파일은 다음과 같습니다.
{
"manifest_version": 2,
"name": "Hello World!",
"description": "My first Chrome extension.",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab"
]
}
이 매니페스트는 사용자 도구 모음에 아이콘을 추가하고, 해당 아이콘을 클릭하면 popup.html의 내용을 불러오도록 설정합니다. 각 항목의 의미를 하나씩 살펴보겠습니다.
manifest_version: 사용 중인 매니페스트 문법의 버전을 크롬에 알려줍니다. 당시에는2로 설정하는 것이 일반적이었지만, 현재는 매니페스트 V3가 표준이므로 새 프로젝트를 시작한다면 반드시 공식 문서에서 최신 버전 요구 사항을 확인하세요.name: 크롬 웹 스토어와 'chrome://extensions' 페이지에 표시될 확장 프로그램의 이름입니다.description: 'chrome://extensions' 페이지에 노출되는 설명 문구입니다.browser_action: 도구 모음에 아이콘을 배치합니다. 또한 툴팁, 팝업, 배지 등을 통해 사용자 입력에 반응할 수 있게 해 줍니다. browser_action이 지원하는 전체 기능 목록은 공식 문서에서 확인할 수 있습니다.default_icon: 확장 프로그램 폴더를 기준으로 한 아이콘 파일의 경로입니다.default_popup: 아이콘을 클릭했을 때 불러올 파일의 경로입니다.permissions: 확장 프로그램이 접근할 수 있는 기능의 범위를 제한합니다. 그중activeTab이 가장 널리 쓰이며, 현재 열려 있는 탭에 대한 접근을 허용합니다. 확장 프로그램이 요청할 수 있는 모든 권한 목록은 구글이 제공하는 문서에서 확인할 수 있습니다.
매니페스트가 선언할 수 있는 모든 항목을 깊이 있게 파악하고 싶다면 구글의 확장 프로그램 매니페스트 공식 문서를 참고하세요.
팝업 화면 만들기(popup.html)
매니페스트 작성을 마쳤다면, 이제 확장 프로그램이 실제로 화면에 무엇을 보여줄지 정할 차례입니다. 이 역할은 확장 프로그램이 실행될 때 표시되는 popup.html 파일이 담당합니다. 이번 프로젝트에서 사용할 코드는 다음과 같습니다.
<!doctype html>
<html>
<head>
<title>Hello World</title>
</head>
<style type="text/css">
body {
margin: 5px;
}
h1 {
font-size: 15px;
text-align: center;
}
</style>
<body>
<h1>Hello World!</h1>
</body>
</html>
코드를 보면 알 수 있듯이 CSS로 스타일링된 간단한 텍스트가 화면에 출력됩니다. 확장 프로그램에 자바스크립트나 외부 CSS를 추가하고 싶다면, 매니페스트의 content_scripts 키에 해당 스크립트를 선언해야 합니다. 매니페스트에 경로를 등록한 후에는 일반적인 방식 그대로 스크립트를 불러올 수 있습니다.
크롬에 확장 프로그램 불러오기
확장 프로그램의 기본 코드 작성과 아이콘 준비가 끝났다면, 이제 크롬에 직접 불러올 수 있습니다.
1. 주소창에 'chrome://extensions'를 입력해 이동한 뒤, 오른쪽 위 체크박스를 눌러 '개발자 모드(Developer Mode)'를 활성화합니다.
2. '압축해제된 확장 프로그램을 로드합니다(Load unpacked extension...)' 버튼을 클릭하고 확장 프로그램 폴더를 선택합니다.
3. 확장 프로그램이 정상적으로 로드되면 메뉴 막대에 아이콘이 나타납니다.
4. 아이콘을 클릭해 (아주 심플하지만) 우리가 만든 결과물을 직접 확인해 보세요.
마무리: 확장 프로그램 발전시키기
확장 프로그램을 완성하고 배포할 준비가 되었다면 크롬 개발자 계정을 만들어야 합니다. 절차가 다소 복잡하게 느껴질 수 있지만, 구글이 크롬 확장 프로그램 게시 방법에 대한 상세한 안내를 제공하고 있으니 이를 따라 하면 어렵지 않게 진행할 수 있습니다.
물론 크롬 확장 프로그램으로 할 수 있는 일은 이보다 훨씬 많습니다. 다만 그 내용은 이 글의 범위를 다소 벗어나므로, 확장 프로그램의 모든 가능성을 알고 싶다면 구글의 크롬 개발자 확장 프로그램 가이드를 확인해 보세요.