• Like
  • Save
크롬 확장 프로그램 만들기 - Qr code generator
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

크롬 확장 프로그램 만들기 - Qr code generator

  • 3,881 views
Published

JSLounge 두 번째 세미나에서 사용한 발표 자료입니다. 구글 크롬에서 QR code를 만드는 확장 프로그램을 만드는 방법에 대한 내용입니다.

JSLounge 두 번째 세미나에서 사용한 발표 자료입니다. 구글 크롬에서 QR code를 만드는 확장 프로그램을 만드는 방법에 대한 내용입니다.

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,881
On SlideShare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
0
Comments
0
Likes
8

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Transcript

  • 1. 크롬
  • 2.   확장
  • 3.   프로그램
  • 4.   만들기
  • 5. about
  • 6.   me•장정환•nundefined@nundefined.com•http://nundefined.com•@nundefined
  • 7. 크롬
  • 8.   확장
  • 9.   프로그램
  • 10. 확장
  • 11.   프로그램?•http://youtu.be/MC9Cppt-6J0?hd=1
  • 12. 확장
  • 13.   프로그램?•쉽게
  • 14.   추가할
  • 15.   수
  • 16.   있는
  • 17.   추가
  • 18.   기능•사용자가
  • 19.   원하는
  • 20.   기능으로
  • 21.   맞춤설정
  • 22.   가능•사용하지
  • 23.   않는
  • 24.   기능은
  • 25.   제거
  • 26.   가능
  • 27. 확장
  • 28.   프로그램의
  • 29.   장점•페이지에
  • 30.   대한
  • 31.   추가
  • 32.   정보
  • 33.   보기 •ex)
  • 34.   주소에
  • 35.   지도
  • 36.   링크
  • 37.   걸기•시기적절하게
  • 38.   알림
  • 39.   받기 •ex)
  • 40.   메일
  • 41.   확인
  • 42.   등•적은
  • 43.   클릭
  • 44.   수로
  • 45.   작업하기
  • 46.   (바로가기) •ex)
  • 47.   RSS
  • 48.   구독
  • 49.   확장
  • 50.   프로그램
  • 51. 확장
  • 52.   프로그램의
  • 53.   UI browser action browser action page action + popupPortions of this page are reproduced from work created and shared by Google and used according to terms described in the Creative Commons 3.0 Attribution License. source: http://developer.chrome.com/extensions/overview.html
  • 54. 구성
  • 55.   파일 •manifest
  • 56.   file •HTML
  • 57.   files •JavaScript
  • 58.   files
  • 59.   (선택) •다른
  • 60.   필요한
  • 61.   파일
  • 62.   (선택)Portions of this page are reproduced from work created and shared by Google and used according to terms described in the Creative Commons 3.0 Attribution License. source: http://developer.chrome.com/extensions/overview.html
  • 63. QRCode
  • 64.   Generator
  • 65. QR
  • 66.   code?•흑백
  • 67.   격자
  • 68.   무늬
  • 69.   패턴으로
  • 70.   정보를
  • 71.   나타내 는
  • 72.   매트릭스
  • 73.   형식의
  • 74.   이차원
  • 75.   바코드•숫자
  • 76.   7,089자,
  • 77.   영숫자
  • 78.   4,296자,
  • 79.   8비트
  • 80.    2,953바이트,
  • 81.   한자
  • 82.   1,917자
  • 83.   정보
  • 84.   표시
  • 85.   가 능•일부
  • 86.   코드가
  • 87.   회손되어도
  • 88.   오류
  • 89.   정정
  • 90.   가능
  • 91. Why
  • 92.   QRCode
  • 93.   Gen.?•업무에
  • 94.   필요•만들기
  • 95.   쉬울
  • 96.   것으로
  • 97.   예상 •QRCode를
  • 98.   만드는
  • 99.   사내
  • 100.   라이브러리가
  • 101.    있었음 •프로그램의
  • 102.   구조가
  • 103.   간단할
  • 104.   것으로
  • 105.   예상 •URL을
  • 106.   QRCode로
  • 107.   변경하기만
  • 108.   하면
  • 109.   됨
  • 110. 준비
  • 111.   작업•작업
  • 112.   디렉토리
  • 113.   만들기•http://goo.gl/I4OsU
  • 114.   다운로드•개발자
  • 115.   모드
  • 116.   활성화 •도구
  • 117.   >
  • 118.   확장
  • 119.   프로그램
  • 120.   >
  • 121.   페이지
  • 122.   우측
  • 123.   상 단
  • 124. 프로그램
  • 125.   구성• manifest.json •프로그램에
  • 126.   대한
  • 127.   다양한
  • 128.   정보• qrcode.html •버튼
  • 129.   클릭시
  • 130.   팝업으로
  • 131.   보이는
  • 132.   페이지• qrcode.js •QRCode를
  • 133.   실행시키는
  • 134.   JavaScript
  • 135.   파일• icon.png •버튼
  • 136.   이미지
  • 137. manifest.json{ "name": 확장 프로그램 이름 [필수, 45자 이하], "version": 버전 [필수, n.n.n.n 형식], "manifest_version": manifest file 포맷 [2], "description": 설명 [132자 이하], "browser_action":{ 브라우저 액션 - Icon,Popup "default_icon": 툴바 아이콘 19x19, "default_title": 툴팁 메시지 "default_popup": 팝업 페이지 }, "permissions":[ 확장 프로그램에서 사용할 권한 "tabs" chrome.tabs, chrome.windows 권한 ]}
  • 138. { "name": "QRCode Generator", "version": "0.9.1", "manifest_version": 2, "description": "Convert the currentpage URL to QRCode", "browser_action":{ "default_icon": "icon.png", "default_title”: "QRCode Ge...", "default_popup": "qrcode.html" }, "permissions":[ "tabs" ]}
  • 139. qrcode.html•HTML/CSS/JavaScript로
  • 140.   구성
  • 141. <!doctype html><html> <head> <title>QRCode Generator</title> <style type="text/css"> #top{ width: 256px; margin-bottom: 5px; font-size: 12px; font-weight: bold; } #qrcode{ width: 256px; height: 256px; } </style> </head> <body> <div id="top">QRCode Generator</div> <div id="qrcode"></div> </body></html>
  • 142. Google
  • 143.   QRCode
  • 144.   API •외부에
  • 145.   공개하려고
  • 146.   하니
  • 147.   사내
  • 148.   라이브러리 를
  • 149.   공개할
  • 150.   수
  • 151.   없었음 •Google
  • 152.   Chart
  • 153.   Tools:
  • 154.   Infographics •https://google- developers.appspot.com/chart/ infographics/docs/qr_codes •Officially
  • 155.   deprecated
  • 156.   (ㅠ_ㅠ)
  • 157. Google
  • 158.   QRCode
  • 159.   APIhttps://chart.googleapis.com/chart?chs=256x256& [이미지 크기, pixel]cht=qr& [QR code일 경우 qr]chl=blahblah [표현할 데이터,urlencoded]
  • 160. qrcode.js1. 창이
  • 161.   로드되는
  • 162.   시점에2. 현재
  • 163.   열려
  • 164.   있는
  • 165.   tab의
  • 166.   url을
  • 167.   얻어3. encodeURIComponent로
  • 168.   인코딩하여4. Google
  • 169.   Chart
  • 170.   Tools를
  • 171.   호출한
  • 172.   후5. 문서에
  • 173.   추가한다
  • 174. var url = "https://chart.googleapis.com/chart?chs=256x256&cht=qr";var currentURL = null;function init(){ // #1 window.addEventListener("load", windowLoaded, false);}function windowLoaded(){ chrome.tabs.getSelected(null, function(tab){ currentURL = tab.url; // #2 var qrImg = document.createElement("img"); qrImg.src = url + "&chl=" + encodeURIComponent(currentURL); //#3,#4 qrImg.alt = currentURL; document.getElementById("qrcode") .appendChild(qrImg); // #5 });}init();
  • 175. 최종 qrcode.html•qrcode.js
  • 176.   추가
  • 177. <!doctype html><html> <head> <title>QRCode Generator</title> <script src="qrcode.js"></script> <style type="text/css"> #top{ width: 256px; margin-bottom: 5px; font-size: 12px; font-weight: bold; } #qrcode{ width: 256px; height: 256px; } </style> </head> <body> <div id="top">QRCode Generator</div> <div id="qrcode"></div> </body></html>
  • 178. DEMO
  • 179. 추가
  • 180.   작업•확장
  • 181.   프로그램
  • 182.   압축•크롬
  • 183.   웹스토어
  • 184.   등록
  • 185. Questions?
  • 186. 감사합니다nundefined@nundefined.com
  • 187. 참고
  • 188.   자료• http://en.wikipedia.org/wiki/QR_code• http://developer.chrome.com/extensions/• https://google-developers.appspot.com/chart/infographics/