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

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
+
popup
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

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. 됨

111. 준비

112. 작업
•작업

113. 디렉토리

114. 만들기
•http://goo.gl/I4OsU

115. 다운로드
•개발자

116. 모드

117. 활성화
•도구

119. 확장

120. 프로그램

122. 페이지

123. 우측

124. 상
단

126. 프로그램

127. 구성
• manifest.json
•프로그램에

128. 대한

129. 다양한

130. 정보
• qrcode.html
•버튼

131. 클릭시

132. 팝업으로

133. 보이는

134. 페이지
• qrcode.js
•QRCode를

135. 실행시키는

136. JavaScript

137. 파일
• icon.png
•버튼

138. 이미지

139. 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 권한
]
}

140. {
name: QRCode Generator,
version: 0.9.1,
manifest_version: 2,
description: Convert the current
page URL to QRCode,
browser_action:{
default_icon: icon.png,
default_title”: QRCode Ge...,
default_popup: qrcode.html
},
permissions:[
tabs
]
}

141. qrcode.html
•HTML/CSS/JavaScript로

142. 구성

143. !doctype html
html
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

144. Google

145. QRCode

146. API
•외부에

147. 공개하려고

148. 하니

149. 사내

150. 라이브러리
를

151. 공개할

152. 수

153. 없었음
•Google

154. Chart

155. Tools:

156. Infographics
•https://google-
developers.appspot.com/chart/
infographics/docs/qr_codes
•Officially

157. deprecated

158. (ㅠ_ㅠ)

159. Google

160. QRCode

161. API
https://chart.googleapis.com/chart?
chs=256x256 [이미지 크기, pixel]
cht=qr [QR code일 경우 qr]
chl=blahblah [표현할 데이터,
urlencoded]

162. qrcode.js
1. 창이

163. 로드되는

164. 시점에
2. 현재

165. 열려

166. 있는

167. tab의

168. url을

169. 얻어
3. encodeURIComponent로

170. 인코딩하여
4. Google

171. Chart

172. Tools를

173. 호출한

174. 후
5. 문서에

175. 추가한다

176. 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();

177. 최종 qrcode.html
•qrcode.js

178. 추가

179. !doctype html
html
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

182. DEMO

183. 추가

184. 작업
•확장

185. 프로그램

186. 압축
•크롬

187. 웹스토어

188. 등록

189. Questions?

190. 감사합니다
nundefined@nundefined.com

191. 참고

192. 자료
• http://en.wikipedia.org/wiki/QR_code
• http://developer.chrome.com/extensions/
• https://google-developers.appspot.com/chart/infographics/