시작하기: Extension개발

크롬 확장 프로그램은 네이티브 코드없이 크롬 브라우저에 기능을 추가하는 것이 가능합니다. 여러분에게 이미 익숙한 웹 기술인 HTML, CSS, JavaScript를 이용해 개발할 수 있습니다. 만약 웹 페이지를 만들어 본 적이 있다면 확장 프로그램 개발이 편하게 느껴질 것입니다. 간단한 확장 프로그램을 가지고 워킹스루 기법을 통해 구조를 테스트 해보겠습니다. 현재 페이지의 URL을 검색어로 사용해서 구글 이미지 검색을 하는 프로그램입니다.

브라우저 액션이라고 부르는 UI 엘리먼트를 구현할 수 있습니다. 이것은 크롬 브라우저의 옴니박스(Omnibox) 오른쪽에 클릭 가능한 아이콘을 말하는데 사용자의 빠른 접근을 위해 크롬 브라우저에서 제공해 주는 기능입니다. 아이콘을 클릭하면 윈도 팝업이 열리고 다음과 같이 현재 페이지에서 파생된 이미지가 보입니다.

현재 페이지의 URL을 이용해 구글 이미지 검색을 하는 크롬 확장 프로그램 스크린샷

만약 집에서 함께 따라하길 원한다면(반드시 해보아야 합니다.), 새 디렉토리를 만들고 텍스트 에디터를 실행하세요. 그럼 시작합니다!

선언하기

크롬 확장 프로그램을 만들기 위해 가장 먼저 할 일은 manifest.json 이라는 파일을 만드는 것입니다. 이 매니페스트는 JSON 형식의 메타데이타 파일입니다. 확장 프로그램의 이름, 설명, 버전 등의 속성을 담고 있습니다. 이 프로그램이 어떤일을 하는지, 그 일을 하기 위해 어떤 퍼미션을 필요로 하는지 크롬에게 선언하기 위해 사용합니다. 매니페스트에 대한 더 자세한 내용은 Manifest File Format documentation을 참조하세요.

예제에 있는 매니페스트에서는, browser action, 현재 탭의 URL을 보기위한 activeTab permission, 외부 구글 이미지 검색 API에 접근하는 host permission을 정의합니다.

여러분이 만든 디렉토리에 manifest.json 으로 저장합니다. 또는 구글의 샘플 레파지토리에서 manifest.json 을 다운로드 받습니다.

리소스

browser action 을 정의할 때 manifest.json 이 두 파일, icon.pngpopup.html 을 가리킨다는 것을 알 수 있습니다. 이 리소스들은 반드시 확장 프로그램의 패키지 안에 들어있어야 합니다. 그럼 필요한 파일들을 만들어 보겠습니다.

여러분의 디렉토리에는 4개의 파일이 있어야 합니다: icon.png, manifest.json, popup.html, popup.js. 다음 단계에서는 이 파일들을 크롬을 통해 불러오겠습니다.

확장 프로그램 불러오기

크롬 웹스토어에서 다운로드 받은 확장 프로그램은 .crx 파일로 패키징 되어 있습니다. 이것은 배포에는 좋지만 개발시에는 그렇지 않습니다. 개발중인 프로그램의 테스트를 위해 크롬에서는 작업 디렉토리를 빠르게 로드할 수 있는 방법을 제공합니다. 다음을 따라해 보세요.

  • 브라우저를 열고 chrome://extensions 를 입력합니다. (또는 옴니박스 옆에 있는 막대 3개가 표시된 메뉴 아이콘. 아이콘을 누른 [도구 더보기 > 확장 프로그램]을 클릭합니다.
  • 우측 상단에 있는 개발자 모드가 체크되어 있는지 확인합니다.
  • 압축해제된 확장프로그램 로드… 를 클릭해 팝업을 띄웁니다.
  • 확장 프로그램이 있는 디렉토리를 선택합니다.

다른 방법으로는 chrome://extensions 화면에 확장 프로그램 디렉토리를 드래그앤 드롭할 수 있습니다.

만약 확장프로그램이 정상적으로 로드된다면 바로 실행이 되고, 그렇지 않다면 상단에 에러 메시지를 표시합니다. 에러가 난다면 수정 후 재시도를 해보세요.

코드 다루기

현재 여러분의 첫번째 크롬 확장 프로그램이 동작하고 있습니다. 몇 가지 코드 수정을 통해 개발 과정에 대한 아이디어를 얻어 봅시다. 예를 들어 브라우저 액션 버튼에 툴팁을 달아 보겠습니다.

browserAction 문서를 보면 툴팁은 default_title 키를 매니페스트 파일에 명시하여 설정합니다. manifest.json 파일을 열어 browser_actiondefault_title 키를 추가합니다. 따옴표와 콤마 등을 필요한 곳에 추가해서 JSON 이 유효할 수 있도록 주의하세요.

(코드)

매니페스트 파일은 확장 프로그램이 로드될 때 파싱됩니다. 수정 결과를 확인하려면 확장 프로그램을 다시 로드해야 합니다. chrome://extensions 페이지에서 해당 프로그램의 [새로고침]을 클릭하세요. F5키 또는 Ctrl+R 단축키를 써서 페이지에 있는 모든 확장 프로그램을 새로고침 할 수도 있습니다.

브라우저 액션 배지에 마우스를 올려 새로운 툴팁을 확인해 보세요!

"Getting started example" 툴팁."Click here!" 툴팁, manifest.json 을 수정하고 새로고침을 한 후 확장프로그램의 모습.

그 다음은?

이제 매니페스트 파일의 핵심적인 역할에 대해 알게 되었고, 브라우저 액션을 선언하는 기본적인 방법을 터득하였습니다. 이 정도면 개발을 시작하는데 있어 충분하며 더 많은 것들에 대해 관심을 가지게 되길 바랍니다. 다음은 계속해서 더 보면 좋은 내용들입니다.

  • 크롬 확장 프로그램 개요는 약간의 도움을 줍니다. 확장 프로그램의 일반적인 구조와 앞으로 알고 있어야 할 몇몇의 특정 컨셉에 대해 상세한 많은 내용들이 있습니다. 확장 프로그램의 전문가가 되려면 개요를 꼭 읽어보세요.
  • 누구도 한번만에 완벽한 코드를 작성할 수는 없습니다. 이 말은 여러분이 만든 프로그램을 디버깅 하기 위해 많은 옵션들을 배워야 한다는 뜻입니다. debugging tutorial이 이러한 것들에 대한 도움을 줄 것이고 주의깊게 읽을만한 가치가 있을 것입니다.
  • 크롬 확장 프로그램은 오픈 웹에서 이용할 수 있는 것 이상의 강력한 API에 접근할 수 있습니다. 브라우저 액션은 단지 빙산의 일각에 불과합니다. chrome.* APIs documentation에서 각각의 API들을 차례대로 확인해 보세요.
  • 마지막으로 developer’s guide는 여러분이 흥미있을만한 여러 문서들이 링크되어 있습니다.