1 of 47

ClipDic 개발 사례로 보는

크롬 확장 프로그램 개발

김진욱 - zelonion

@gmail.com

2012. 5. 12 DevFestXKorea

2 of 47

소개

프로그래밍 시작하기

프로그램 배포하기

결론

​

3 of 47

발표자 소개

김진욱 / JINWOOK KIM

zelonion / wimy.com / @zelon

​

지오프론트 - 프루티

라온 엔터테인먼트 - 테일즈 런너

삼성전자 - 피처폰 & 스마트 폰

엔씨소프트 - 입사 예정

​

ZViewer

WimyBox

4 of 47

ClipDic

클립보드에 있는 단어를 바로 검색해서 보여주는 아이디어를 간단히 구현!!

​

​

​

​

​

​

​

크롬 웹 스토어에서 clipdic 검색 후 설치

5 of 47

왜 클립보드인가

프로그램 간의 인터페이스 중 가장 쉽게 접근할 수 있는 인터페이스

​

  • 사용자는 단어 선택 후 ctrl + C
  • 프로그래머는 대부분의 OS 에서 clipboard API 사용
  • 대부분의 텍스트 관련 프로그램은 ctrl + C 지원
    • pdf viewer, notepad, vi 의 단어 ctrl + C 도 지원!!
  • C#, Python, Java 버젼

6 of 47

왜 크롬인가

기존의 프로그래밍 환경에서 얻을 수 없었던 장점들을 가진 플랫폼

​

  • Web Page 를 쉽게 보여줌
  • 대부분의 OS 에서 동일한 환경 제공
  • 새로운 프로그래밍 도전(언어, 환경)
  • 배포 및 업데이트하기 쉬움
  • 개발자가 사용하기 쉬운 환경

7 of 47

어떻게 개발하나

홈페이지를 만드는 것과 비슷한 방법으로 개발

​

  • HTML
  • Javascript
    • JSON
  • CSS

​

JSON 으로 프로그램의 정보(프로그램 제목, 내용, 아이콘 등)를 알려주고, Javascript 로 특정 함수를 호출하여 Chrome 과 연동

8 of 47

개발 환경

html/javascript/css 파일을 편집할 수 있는 어떤 프로그램도 가능. 크롬 + 메모장으로 개발 가능

​

  • 발표자의 환경
    • Eclipse ( + Web Developer Tools )
    • Vim
    • 아이콘 작업 : Inkscape + Gimp

9 of 47

안녕하세요 크롬 프로그래밍~

Hello Chrome Programming~!

10 of 47

Hello World

manifest.json

​

​

background.html

​

​

​

​

icon.png

{

"name" : "Hello World",

"version" : "1.0",

"background_page" : "background.html",

"browser_action" : { "default_icon" : "icon.png" }

}

<html>

<body>

<script>

function start() {

alert("hello world");

}

chrome.browserAction.onClicked.addListener(start);

</script>

</body>

</html>

11 of 47

manifest.json

여러 값들을 적어준 것!!

  • 전체를 { } 로 감싸고 각 값을 , 로 구분
  • 하나의 값은 "key" : "value"
  • 하나의 "value" 가 또 다른 { } 가 될 수 있음

​

  • 프로그램 이름과 버젼 지정
  • background_page 를 background.html 로 지정함
  • 아이콘 설정

{

"name" : "Hello World",

"version" : "1.0",

"background_page" : "background.html",

"browser_action" : { "default_icon" : "icon.png" }

}

12 of 47

background.html

프로그램이 설치된 크롬이 시작될 때 같이 시작(manifest.json 에서 지정해줬기 때문). 버튼을 눌렀을 때 특정 함수를 호출하도록 알려줌

  • chrome.browserAction.onClicked.addListener(start);

==> 버튼을 클릭을 때, start 함수를 실행하라!

<html>

<body>

<script>

function start() {

alert("hello world"); /* hello world 보여주기 */

}

chrome.browserAction.onClicked.addListener(start);

</script>

</body>

</html>

13 of 47

Hello World 실행하기

Chrome 설정 및 관리 -> 도구 -> 확장 프로그램

14 of 47

압축해제된 확장 프로그램 로드

개발자 모드 -> 압축해제된 확장 프로그램 로드 클릭

​

​

앞 장의 3개의 파일이 있는 위치를 지정

15 of 47

Hello World - 결과

16 of 47

디버깅

아이콘 앞의 세모를 클릭하여 세부 정보 확장 후, background.htm 을 클릭

17 of 47

1. Scripts 탭으로 이동

2. 디버깅 할 파일 선택

3. 브레이크 포인트 설정할 곳에 클릭

4. 버튼 클릭하여 프로그램 디버깅 시작

5. 디버깅 도구들을 이용하여 디버깅

18 of 47

새로고침

코드를 수정 후, '새로고침' 클릭해야 함!!!!

19 of 47

확장 프로그램 개발

일반적인 Javascript 를 사용하며, 크롬에 관련 기능들은 chrome.* API 들을 사용

​

  • chrome.* API 목록
    • tabs
    • windows
    • browserAction
    • omnibox
    • ...

http://code.google.com/chrome/extensions/api_index.html

20 of 47

탭과 윈도우

​

​

​

​

  • newUrl 페이지를 새 탭에 불러오고, onTabOpenedFunc 을 호출한다
  • onTabOpenedFunc 에서 새로 열린 탭에 대한 정보를 기억할 수 있다
  • chrome.windows.create() : 새로운 윈도우
  • manifest.json 에 "permissions" : [ "tabs" ] 필요

chrome.tabs.create(

{ "url" : newUrl },

onTabOpenedFunc);

21 of 47

권한

  • 프로그램이 특정 API 를 호출하려면 해당 권한이 있어야 함
  • manifest.json 의 "permissions" 에 나열함

​

​

​

{ /* manifest.json */

...

"permissions": [

"clipboardRead",

"tabs"

]

...

}

22 of 47

클립보드

Javascript 의 execCommand('Paste') 를 통해 텍스트를 input text 에 넣은 후 가져옴

  • 'clipboardRead' 권한을 manifest.json 에 추가

function getClipboard()

{

var t = document.getElementById("inputbox");

t.value = "";

t.focus();

document.execCommand('Paste');

return t.value;

}

<input type="text" id="inputbox" />

23 of 47

타이머

Javascript 의 타이머를 그대로 사용

timerID = window.setInterval(onTimer, 100);

window.clearInterval(timerID);

24 of 47

ClipDic 흐름도

클립보드 텍스트 확인

타이머 기다림

새로운 텍스트?

사전 보여줌

예

아니오

타이머 생성

25 of 47

옵션

{ /* manifest.json */

...

"options_page" : "options.html",

...

}

​

​

​

options_page 를 지정해주면, 아이콘에 우클릭 시에 '옵션' 메뉴가 자동으로 활성화

​

26 of 47

옵션 저장/불러오기

html5 의 LocalStorage 를 사용

​

​

​

​

​

​

Set

localStorage["baseurl"] = newUrl;

Get

var baseUrl = localStorage[baseUrlName];

​

if ( baseUrl == null )

{

baseUrl = "http://dic.daum.net/search.do?q="; /* default value */

}

27 of 47

크롬 프로그램 배포하기

Publish Chrome Program

28 of 47

Chrome Web Store

크롬에서 '새 탭' 후 Chrome Web Store 접속

​

​

​

​

​

29 of 47

개발자 대시보드

30 of 47

31 of 47

필요한 파일을 일반 zip 파일로 압축 후 '업로드'

32 of 47

33 of 47

테스터 계정 추가

대시보드에서, '개발자 표시 이름 수정' 과 '테스터 계정 수정' 을 설정한 후 프로그램을 다시 '수정'

1

2

3

화면 제일 아래에 있음

34 of 47

테스트 계정에 게시

내용을 채운 후, '테스트 계정에 게시' 를 클릭

개발자들은 소심하니까 '테스트 계정' 에게만 게시합니다;;

35 of 47

도움말

입력 내용이 제대로 입력되지 않으면 아래와 같은 메시지를 통해서 알려줌

.

.

​

36 of 47

첫번째 관문

제일 먼저 넘어야 할 관문 등장

​

​

​

​

Give me the money!!

37 of 47

첫번째 관문

Google Checkout 을 통한 결제 과정은 생략합니다(저도 두 번 돈 내기는 싫어요 >_<)

38 of 47

39 of 47

개발자 대시보드

상태를 주목! '테스터에게 게시됨' 과 '게시됨' 으로 구분됨

​

​

​

​

​

​

​

40 of 47

게시 취소

'테스터에게 게시됨' 을 '게시 취소' 를 해야 모든 사람에게 '게시' 할 수 있음

41 of 47

42 of 47

버젼 업데이트

manifest.json 파일의 version 수정하고, 전체 프로그램을 다시 압축하여 다시 업로드 후 게시하면 자동으로 모든 사용자에게 업데이트

​

사용하는 권한이 바뀌면 사용자가 업데이트할 때 permission 관련 팝업이 나타남

43 of 47

결론

Conclusion

44 of 47

개발 후기

  • 정말 프로그래밍하기 쉽다
  • (확장 프로그램이지만)디버깅 하기 좋다
  • 웹 기술을 벗어나면 적용이 힘들다
  • 온라인 개발 도구가 아쉽다(Add-on Builder)
  • html/javascript/css 배워두니 참 좋다

​

​

​

​

결론 : 충분히 개발할 가치가 있다!! 재미도 있다!

45 of 47

One More Thing

가장 간단한 크롬 프로그램

{

"name": "WimyBox",

"description": "WimyBox is the jukebox that you want",

"version": "1.0",

"icons": {

"128": "wimybox128x128.png"

},

"app": {

"launch": {

"web_url": "http://box.wimy.com/"

}

}

}

이 코드가 진짜 핵심~!!

46 of 47

끝

여러분의 블로그나 프로젝트 홈페이지로 연결하는 프로그램을 만들어 보세요~~!

​

감사합니다 :)

47 of 47

Links

​