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

6,331 views
6,325 views

Published on

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

Published in: Technology
0 Comments
14 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,331
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
0
Comments
0
Likes
14
Embeds 0
No embeds

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
  • 크롬 확장 프로그램 만들기 - 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/

    ×