크롬익스텐션 맛보기

23
크롬 익스텐션 맛보기 안오균

Upload: ohgyun-ahn

Post on 10-Dec-2014

1.968 views

Category:

Documents


1 download

DESCRIPTION

2012.06.05 랩 밋업데이 발표자료.

TRANSCRIPT

Page 1: 크롬익스텐션 맛보기

크롬����������� ������������������  익스텐션����������� ������������������  맛보기����������� ������������������  

안오균����������� ������������������  

Page 2: 크롬익스텐션 맛보기

오늘은?����������� ������������������  

익스텐션����������� ������������������  간단����������� ������������������  소개����������� ������������������  

가볍게����������� ������������������  콘솔����������� ������������������  찍어����������� ������������������  보기����������� ������������������  

디버깅하려면?����������� ������������������  

어떤����������� ������������������  게����������� ������������������  되고����������� ������������������  어떤����������� ������������������  게����������� ������������������  안����������� ������������������  되나?����������� ������������������  

웹스토어에����������� ������������������  등록하기����������� ������������������  

Page 3: 크롬익스텐션 맛보기

익스텐션에는-����������� ������������������  

패키지앱����������� ������������������  UI가����������� ������������������  있어요.����������� ������������������  

익스텐션����������� ������������������  UI와,����������� ������������������  

Page 4: 크롬익스텐션 맛보기

익스텐션����������� ������������������  UI에는-����������� ������������������  

브라우저����������� ������������������  액션,����������� ������������������  

페이지����������� ������������������  액션,����������� ������������������  

팝업이����������� ������������������  있는데,����������� ������������������  

Page 5: 크롬익스텐션 맛보기

HTML,����������� ������������������  CSS,����������� ������������������  JavaScript����������� ������������������  라는����������� ������������������  거-����������� ������������������  

여튼,����������� ������������������  모든����������� ������������������  것은-����������� ������������������  

Page 6: 크롬익스텐션 맛보기

익스텐션����������� ������������������  만들기����������� ������������������  

1. manifest.json����������� ������������������  파일과,����������� ������������������  2. HTML����������� ������������������  파일을����������� ������������������  만들고,����������� ������������������  3. 익스텐션으로����������� ������������������  로드.����������� ������������������  끝.����������� ������������������  

Page 7: 크롬익스텐션 맛보기

manifest.json����������� ������������������  

Page 8: 크롬익스텐션 맛보기

백그라운드����������� ������������������  페이지����������� ������������������  

팝업����������� ������������������  페이지����������� ������������������  

컨텐츠����������� ������������������  스크립트����������� ������������������  

익스텐션의����������� ������������������  대표적인����������� ������������������  구성����������� ������������������  요소로는,����������� ������������������  

Page 9: 크롬익스텐션 맛보기

백그라운드����������� ������������������  페이지는-����������� ������������������  

HTML����������� ������������������  또는����������� ������������������  JavaScript����������� ������������������  파일로����������� ������������������  되어����������� ������������������  있고,����������� ������������������  주로����������� ������������������  익스텐션의����������� ������������������  로직을����������� ������������������  담당합니다.����������� ������������������  이름처럼����������� ������������������  브라우저����������� ������������������  ‘뒷단’에서����������� ������������������  돌아요.����������� ������������������  

Page 10: 크롬익스텐션 맛보기

익스텐션은����������� ������������������  브라우저와����������� ������������������  별도의����������� ������������������  프로세스로����������� ������������������  동작하고����������� ������������������  

Page 11: 크롬익스텐션 맛보기

프로세스를����������� ������������������  죽일����������� ������������������  경우,����������� ������������������  익스텐션이����������� ������������������  깨졌다는����������� ������������������  얼럿이����������� ������������������  뜹니다.����������� ������������������  

Page 12: 크롬익스텐션 맛보기

팝업����������� ������������������  페이지는-����������� ������������������  익스텐션����������� ������������������  아이콘을����������� ������������������  클릭했을����������� ������������������  때����������� ������������������  나타나는����������� ������������������  페이지를����������� ������������������  가리키고요.����������� ������������������  

Page 13: 크롬익스텐션 맛보기

백그라운드����������� ������������������  페이지와����������� ������������������  팝업����������� ������������������  페이지는����������� ������������������  서로����������� ������������������  커뮤니케이션����������� ������������������  할����������� ������������������  수����������� ������������������  있습니다.����������� ������������������  

Page 14: 크롬익스텐션 맛보기

컨텐츠����������� ������������������  스크립트는-����������� ������������������  

페이지에����������� ������������������  삽입하는����������� ������������������  스크립트이고,����������� ������������������  마찬가지로����������� ������������������  백그라운드����������� ������������������  페이지와����������� ������������������  통신할����������� ������������������  수����������� ������������������  있습니다.����������� ������������������  

Page 15: 크롬익스텐션 맛보기

백그라운드����������� ������������������  페이지����������� ������������������  

팝업����������� ������������������  페이지����������� ������������������  

컨텐츠����������� ������������������  스크립트����������� ������������������  

익스텐션의����������� ������������������  대표적인����������� ������������������  구성����������� ������������������  요소!����������� ������������������  

Page 16: 크롬익스텐션 맛보기

실습…⋯����������� ������������������  

콘솔����������� ������������������  찍기와����������� ������������������  디버깅.����������� ������������������  

Page 17: 크롬익스텐션 맛보기

어떤����������� ������������������  걸����������� ������������������  할����������� ������������������  수����������� ������������������  있나?����������� ������������������  

•  원하는����������� ������������������  페이지에����������� ������������������  스크립트����������� ������������������  삽입����������� ������������������  •  컨텍스트����������� ������������������  메뉴����������� ������������������  컨트롤����������� ������������������  •  크로스����������� ������������������  도메인����������� ������������������  비동기����������� ������������������  요청����������� ������������������  •  윈도우,����������� ������������������  탭,����������� ������������������  북마크����������� ������������������  컨트롤����������� ������������������  •  옴니����������� ������������������  박스����������� ������������������  컨트롤����������� ������������������  ����������� ������������������  

Page 18: 크롬익스텐션 맛보기

조금����������� ������������������  더����������� ������������������  나아가서.����������� ������������������  

•  개발자����������� ������������������  도구����������� ������������������  컨트롤����������� ������������������  •  페이지����������� ������������������  캡처(mhtml����������� ������������������  형식)����������� ������������������  •  프록시,����������� ������������������  웹리퀘스트����������� ������������������  조작����������� ������������������  •  Text-To-Speech����������� ������������������  기능����������� ������������������  •  네이티브����������� ������������������  연동(NaCl,����������� ������������������  NPAPI)����������� ������������������  

Page 19: 크롬익스텐션 맛보기

할����������� ������������������  수����������� ������������������  없는����������� ������������������  것.����������� ������������������  

•  스크립트로����������� ������������������  로컬����������� ������������������  파일����������� ������������������  시스템����������� ������������������  조작.����������� ������������������  •  페이지����������� ������������������  내����������� ������������������  자바스크립트����������� ������������������  객체����������� ������������������  접근.����������� ������������������  •  단축키로����������� ������������������  익스텐션����������� ������������������  팝업����������� ������������������  열기.����������� ������������������  

Page 20: 크롬익스텐션 맛보기

웹스토어����������� ������������������  등록����������� ������������������  준비물����������� ������������������  

zip으로����������� ������������������  압축한����������� ������������������  익스텐션.����������� ������������������  

아이콘����������� ������������������  준비(48px,����������� ������������������  128px)����������� ������������������  

스크린샷����������� ������������������  준비(1280x800)����������� ������������������  

홍보����������� ������������������  이미지(440x280)����������� ������������������  

5달러…⋯����������� ������������������  

Page 21: 크롬익스텐션 맛보기

7,000����������� ������������������  다운로드!����������� ������������������  

Page 22: 크롬익스텐션 맛보기

나머지����������� ������������������  자세한����������� ������������������  사항은,����������� ������������������  

http://code.google.com/chrome/extensions/����������� ������������������  

Page 23: 크롬익스텐션 맛보기

끝!����������� ������������������