Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

6,919 views

Published on

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

Published in: Technology
  • Be the first to comment

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

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

×