크롬 익스텐션 Getting Started Tutorial 번역

https://developer.chrome.com/extensions/getstarted 번역

크롬 익스텐션은 크롬에 대해 깊이 파지 않고도 기능들을 추가할수 있게 해준다. 웹 개발에 쓰이는 언어인 HTML, CSS, Javascript로 크롬 익스텐션을 만들수 있다. 웹 페이지를 만들어본 경험이 있으면 크롬 익스텐션을 매우 빨리 만들수 있다는걸 알수 있을것이다. 연습으로 이미지를 가져오는 크롬 익스텐션을 한번 만들어보면서 한단계씩 배워보자.

brower action이라고 불리는 걸로 UI를 만들거다. 이것을 이용해서 주소창 오른쪽에 생기게 되는 버튼을 만들수 있다.(아래 사진입니다.) 

이 버튼을 누르게 되면 익스텐션을 실행할수 있다. 버튼을 누르면 현재 화면의 코드속에 있는 주소에서 가져온 이미지를 띄운다.(현재 js파일 내부의 주소를 더이상 지원하지 않아서 이미지 안뜨는게 정상입니다.)

작업용 디렉터리를 하나 만들고 아무 ide 혹은 메모장같은 편집기를 열고 예제를 시작하자. 

선언해야 될것.

첫번째로 manifest.json이라는 manifaest파일을 만들어야 한다. 이 파일 안에는 크롬 익스텐션의 이름, 설명, 버전 정보 등의 메타데이터들이 들어 있다. 조금 더 보자면 이 내부에 크롬 익스텐션이 뭘 더 할건지, 어떤 권한이 필요한지 등을 설정해야 한다. 

manifest에 관해 더 살펴보고 싶으면 Manifest File Format documentation 을 살펴보자.

예제로 위에서 말한 brower action과 url을 보기 위한 activeTab permission, 구글 이미지 서치 api에 접속하기 위한 host permission을 manifest파일 안에 선언할거다. (튜토리얼 예제의 구글 이미지 서치 api는 서비스가 중지되서 안뜹니다. 제가 되는 파일들로 아래에 교체했습니다.) 아래 manifest.json을 다운받아서 아까 작업용으로 만들어둔 파일에 넣자.

manifest.json

리소스.

manifest.json을 살펴봤다면 icon.png와 popup.html을 안에서 선언한다는 것을 봤을거다.

(      "default_icon": "icon.png",

      "default_popup": "popup.html"

라고 사용합니다.)

둘다 반드시 익스텐션 패키지 폴더 안에 있어야 하므로 만들어보자.

icon.png

위의 icon.png는 주소창 오른쪽에 표시된다. 

위 그림을 다운받아서 새로만든 폴더안에 넣자. 다운받는게 아니라 만들고 싶으면 19픽셀의 사각형 형태의 png파일을 만들자.

popup.html

은 위의 아이콘을 클릭했을때 팝업 윈도우 안에 나타나는 코드다. 일반적인 html파일이며, 팝업에 나타나는 것들을 제어한다. 위의 popup.html을 다운로드받아서 위에서 만든 디렉터리에 저장하자. 

랜더링되는 팝업의 실제 로직은 popup.js안에 구현되어있다. 로직에 관해 더 알고싶으면 파일 내부의 주석을 읽어보자. 

popup.js

을 다운받아서 위에서만든 디렉터리에 저장하자.

chrome extension.zip

이제 디렉터리에 icon.png, manifest.json, popup.html, popup.js 4개의 파일이 있다. 이제 이 파일들을 크롬에 로딩해보자.

익스텐션 로딩하기.

크롬 웹스토어에서 다운받은 패키지는 개발에는 별로지만 배포에는 좋은 .crx확장자로 패키징되어있다. 하지만 크롬은 테스트를 위해 빠른 방법으로 실행시키는 방법을 제공하는걸 잊지말자. 아래에 정리했다.

1. 크롬의 chrome://extensions 주소로 들어가자.

2. 오른쪽 위에 '개발자 모드' 가 체크표시되어있는지 확인하자.(안되있으면 체크하자.)

3. '압축해제된 확장 프로그램 로드...' 를 클릭하자.

4. 내가 작업한 폴더를 열면 끝.

이거대신 chrome://extensions내에 폴더를 드래그해도 된다. 저대로 하고 실행시키면 아래처럼 보인다.(사람마다 탭이 다를수있음.)

크롬 익스텐션 내부가 적절하면 제대로 작동할거다. 적절하지 않으면 페이지에 에러 메시지가 나온다. 에러를 고치고 다시해보자.

코드 조작해보기.

이제 예제를 돌려봤으니 내부 코드를 약간 고쳐서 개발 프로세스를 살펴보자. 브라우저의 tooltip버튼을 한번 수정해보자.

browerAction문서를 보면 manifest의 default_title을 수정해서 tooltips을 설정할수 있다. 

manifest.json을 열어서 browser_action의 default_title을 수정해보자. 

  "browser_action": {

      "default_title": "Hello World!",

      "default_icon": "icon.png",

      "default_popup": "popup.html"

  },

수정하고 저장한 후 적용된 화면을 보려면 확장 프로그램 화면의 아래에서 '새로고침'을 누른후 아이콘 위에 마우스를 올려보자.

새로고침을 누르고 아이콘 위에 마우스를 올리면

이처럼 Hello World!가 출력된다.

다음 과정?

Chrome Extension Overview가 아키텍쳐 파악, 일부 개념을 파악하는데 조금 도움이 될거다. 크롬 익스텐션을 마스터하기 위해 가장 좋은 다음 스텝이다.

한번에 완벽한 코드를 작성할수 없다. 디버깅이 필요한 이유이고, debugging tutorial이 디버깅을 하는데 완벽한 튜토리얼이다.

크롬 익스텐션은 열려있는 웹에서 돌아가는 강력한 api이다. 브라우저 액션에 관한 것들은 빙산의 일각에 불과하다. chrome.*APIs documentation이 이것들을 하나하나 배워나가는데 좋을것이다.

마지막으로 developer's guide에 흥미로운 것들이 많이 있다.