Search results for 'Chrome'

크롬 확장 프로그램 - QRCode Generator 만들기

2012.05.31 00:55

QRCode Generator 소개

QRCode Generator는 현재 탭에 열려있는 페이지의 주소를 QR Code로 만들어주는 크롬 확장 프로그램이다. 동작하는 모습은 다음과 같다.

 

QRCode Generator를 실행시킨 모습


개발 준비

개발을 위해 별도로 준비할 도구는 없다. 우선 확장 프로그램에서 사용할 여러 파일들을 저장할 폴더를 하나 생성한다. 그리고 설정 > 도구 > 확장 프로그램 메뉴를 선택하여 우측 상단의 개발자 모드를 체크하여 개발자 모드를 활성화한다.



우측 상단에 개발자 모드를 체크할 수 있는 메뉴가 있다.

 

개발자 모드를 활성화할 경우 압축되지 않은 확장 프로그램을 로드할 수 있으며 확장 프로그램을 디버그할 수 있는 팝업 검사를 사용할 수 있다. 팝업 검사를 선택하면 일반 웹페이지를 디버깅할 때 사용하는 개발자 도구가 확장 프로그램과 함께 실행된다.

 


왼쪽은 개발자 모드를 비활성화한 모습, 오른쪽은 개발자 모드를 활성화한 모습이다.


프로그램 구성

이 프로그램에서 사용한 파일은 모두 4가지이다.

1. manifest.json: 프로그램에 대한 다양한 정보를 담고 있는 파일

2. qrcode.html: 아이콘을 클릭했을 때 팝업으로 보이는 페이지를 표시하는 파일

3. qrcode.js: QRCode Generator를 동작시키기 위한 자바스크립트 파일

4.icon.png: QRCode Generator를 실행시키기 위한 버튼에 적용할 아이콘 이미지 파일. 가로 19px, 세로 19px의 png 형식의 파일이다.


manifest.json

모든 확장 프로그램에는 JSON 포맷의 manifest.json 파일이 존재한다. 이 파일에는 확장 프로그램의 여러 중요한 정보를 기록한다.

{

  "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_popup": "qrcode.html"

  },

  "permissions":[

    "tabs"

  ]

}


name은 확장 프로그램의 이름이다. 최대 45자까지 가능하며 확장 프로그램을 구별하는 역할을 한다. 이 이름은 설치 다이얼로그, 확장 프로그램 관리 UI와 스토어에서 노출된다. 


version은 확장 프로그램의 버전을 구별하는 숫자이다. 1개에서 4개까지의 숫자를 사용할 수 있으며 각 숫자는 점(.)으로 구별한다. 버전의 숫자는 0 ~ 65535의 숫자를 사용할 수 있다. 단, 0을 제외하고 숫자가 0으로 시작하면 안된다. 자동 업데이트 프로그램에서는 이 버전을 비교하여 업데이트를 결정한다. 


manifest_version은 manifest 파일 포맷의 버전이다. 크롬 18에서는 항상 2를 사용한다.


description은 확장 프로그램의 설명으로 최대 132자까지 쓸 수 있다. 확장 프로그램 관리 UI와 스토어에 어울리는 설명이어야 한다.


browser_action은 확장 프로그램이 동작하는 방식이다. browser_action을 선택할 경우 주소창의 오른편에 아이콘이 추가된다. 


default_icon은 주소창의 오른편에 추가되는 아이콘이며 가로, 세로 최대 19픽셀의 정사각형 이미지를 사용할 수 있다. 정적인 이미지와 캔버스를 사용하는 두 가지 방법이 있으며 캔버스를 사용할 경우에는 동적인 UI를 만들 수 있다.


default_popup이 지정될 경우 사용자가 아이콘을 클릭할 때 팝업이 나타난다. 팝업에는 HTML로 구성한 내용이 출력되며 창의 크기는 내용의 크기에 맞게 자동적으로 조정된다.


permissions는 확장 프로그램이 갖게 되는 권한을 나열한 배열이다. 각 권한은 사전에 정의된 목록에서 선택하거나 하나 이상의 호스트 이름과 일치하는 패턴으로 구성된다. 권한에 따라 설치할 때 사용자에게 안내가 이루어지기도 한다. 이 프로그램에서 사용하는 권한은 tabs로 chrome.tabs나 chrome.window 모듈을 사용하기 위해 지정했다.


여기에서 설명한 내용 외에도 많은 내용이 있다. 자세한 내용은 http://code.google.com/chrome/extensions/manifest.html를 참고하기 바란다.


qrcode.html

<!doctype html>

<html>

  <head>

    <title>QRCode Generator</title>

    <script src="qrcode.js"></script>

    <style type="text/css">

    #top{

      width: 256px;

      font-size:12px;

      font-weight: bold;

      margin-bottom: 5px;

    }

    </style>

  </head>

  

  <body>

    <div id="top">QRCode Generator</div>

    <div id="qrcode" style="width:256px; height:256px;"></div>

  </body>

</html>


사용자가 아이콘을 클릭할 때 나타나는 팝업에 표시되는 내용이다. 상단에서 실제 동작을 구현하는 qrcode.js 파일을 포함시키고 있으며 간단한 스타일을 지정했다. 그리고 제목과 QR code를 표시할 영역을 지정했다. 일반적인 HTML 파일과 다르지 않다.


qrcode.js

var url = "https://chart.googleapis.com/chart?chs=256x256&cht=qr";

var currentURL = null;


function init(){

  window.addEventListener("load", windowLoaded, false);

}


function windowLoaded(){

  chrome.tabs.getSelected(null, function(tab){

    currentURL = tab.url;

    var qrImg = document.createElement("img");

    qrImg.src = url + "&chl=" + encodeURIComponent(currentURL);

    qrImg.alt = currentURL;

    document.getElementById("qrcode").appendChild(qrImg);

  });

}


init();


실제로 QR code를 표시하는 역할을 하는 자바스크립트 파일이다. 여기서는 QR code를 표시하기 위해 구글 차트 API를 사용한다. 현재 구글의 이미지 차트 API는 2012년 4월 20일 공식적으로 지원이 중단됐다. 특별한 이슈가 없다면 2015년 4월 20일까지는 사용 가능할 것으로 예상된다. 자세한 내용은 https://developers.google.com/chart/infographics/ 페이지를 방문하기 바란다.


구글의 이미지 차트 API를 사용하여 QR code를 그리기 위해서는 다음의 세 가지 파라미터를 지정해야 한다.

1. chs: 차트의 크기. 가로x세로 의 형태로 지정한다.

2. cht: 차트의 종류. 여기서는 QR code를 사용할 것이므로 qr을 지정한다.

3. chl: QR code로 변경할 문자열. 반드시 URL 인코딩을 해야 한다.


우선 자바스크립트가 로드되면 init() 함수를 호출하여 윈도의 로드가 완료됐을 때 windowLoaded 이벤트 리스너가 호출되도록 설정한다. 문서의 로드가 완료되면 windowLoaded 함수가 실행된다. 


windowsLoaded함수에서는 chrome.tabs.getSelected 함수를 이용하여 크롬의 탭이 선택될 경우 콜백이 실행되도록 지정한다. 여기서 콜백은 익명 함수이다.


콜백 내에서는 tab.url을 사용하여 현재 탭의 URL을 얻는다. 그리고 동적으로 img 엘리먼트를 생성하고 구글 차트 API를 호출하여 이미지를 불러온다. 이 때 encodeURIComponent 함수를 사용하여 URL을 인코딩한다. 그리고 이미지 엘리먼트를 qrcode.html 파일의 div 엘리먼트에 추가한다. 그러면 현재 페이지의 URL 정보가 담긴 QR code 가 화면에 출력된다.


테스트와 디버깅

개발자 모드를 활성화하고 확장 프로그램 관리 메뉴에서 압축해제된 확장 프로그램 로드… 메뉴를 사용하여 확장 프로그램이 저장되어 있는 폴더를 선택하면 주소창의 오른편에 확장 프로그램이 추가된다. 그리고 확장 프로그램의 아이콘을 마우스의 왼쪽 버튼을 눌러 실행하거나 오른쪽 버튼을 눌러 팝업 검사를 선택하면 확장 프로그램이 실행되며 개발자 도구가 같이 실행된다. 


확장 프로그램을 수정한 뒤에는 다시 프로그램을 로드하지 않고 아이콘을 눌러 다시 실행하면 수정된 내용이 자동으로 반영된다.


디버깅을 할 때는 웹페이지에서 디버깅을 할 때 개발자 도구를 사용한 방법과 동일하게 개발자 도구를 사용하면 된다.



nundefined HTML5_JS_CSS Chrome, extension, QRCode, 익스텐션, 크롬, 확장 프로그램

일주일간 모은 링크 #4

2011.01.02 23:00
UX MYTHS
사용자 경험에 대한 오해를 수집하고 틀린 이유에 대해 설명해주는 사이트입니다. 이런 글은 대체로 영어로만 되어 있는 경우가 많으나 이 페이지의 경우 한글로 번역되어 있습니다. 이제까지 알고 있는 정보들이 정말 올바른 정보인지 이 페이지를 보면서 한 번 검토해보면 어떨까요?

제목 그대로 JavaScript에서 메모리 정보를 얻는 방법입니다. 일본어 페이지이지만 구글에서 제공하는 번역 기능을 이용하면 이해하는데 큰 문제는 없을 것입니다. (저는 구글 크롬의 번역 기능을 사용) 좀 아쉬운 점이 있다면 Webkit 계열의 브라우저와 Firefox에서 사용 가능한 방법만을 알려주고 있습니다. 국내에서는 IE의 비율이 높은데 이에 대한 방법이 없는 것은 아쉽다고만 표현하기에는 좀 부족한 것 같네요.

일본어로 된 페이지입니다. 일본의 JavaScript개발자들이 봤을 때 의미 있는 책을 정리해 둔 것으로 보입니다. 이 블로그에서도 JavaScript책에 대해 쓴 글이 있는데요 이 글보다는 좀 더 넓은 범위에 대한 책을 언급하고 있습니다. 어떤 책을 봐야할지 고민하고 있는 경우라면 옆나라의 사람들은 어떤 책을 보고 있는지 참고해도 좋을 것으로 생각합니다. 물론, 제가 봤을 때도 고개가 끄덕여지는 그런 책들을 모아놨습니다. 

JavaScript로 개발할 때 사용할 수 있는 도구에 대해 간단하게 소개하고 있는 발표 자료입니다. 텍스트 에디터부터 통합 개발 환경, 디버그 도구 및 배포시에 사용할 수 있는 프로그램까지 개발부터 배포까지의 모든 단계에서 필요한 도구에 대해 간단히 소개하고 있습니다. 어떠한 도구를 사용해야 할지 고민했던 분이라면 이 자료 하나만으로도 기본적인 도구를 갖출 수 있을 것입니다.

Nicolas C. Zakas가 YUIConf에서 발표한 JavaScript의 성능을 높이는 방법입니다. 앞의 내용 중 일부는 이전에도 어디선가 얼핏 본듯한 내용입니다. 아마 이전의 발표에서 사용했던 자료를 다시 사용한 것으로 보입니다. 뒷편에는 Web Workers에 대한 내용이 추가되었습니다. 성능을 개선할 수 있는 좋은 방법인만큼 꼭 살펴봐야 할 내용이라고 봅니다. JavaScript의 실행 속도가 문제가 된 적이 있다면 이 발표 자료를 보면서 개선할 수 있는 부분이 없을지 꼭 찾아보기 바랍니다.

nundefined HTML5_JS_CSS Chrome, firefox, memory, Safari, User Experience, UX, webkit, yuiconf