Chrome Extension 개발하기 - Getting Started (Hello, World!)

1. Create a folder somewhere on your computer to contain your extension's code.

컴퓨터 어딘가에 extension code개발할 폴더를 하나 만듭니다.

2. Inside your extension's folder, create a text file called manifest.json, and put this in it:

JSON 포맷의 manifest 파일을 하나 생성합니다. 파일인코딩은 반드시 UTF-8 로 해야 한글이 안깨집니다. ㅋ

* 개발자들은 많이 봤겠지만 manifest는 양키들도 일상에서는 잘 안쓰는 말인데, 사전적의미로는 "명백한, 분명한, 일목요연한" 으로 나오나 한국의 뉘앙스로는 "택배에 배송지/연락처 등등이 잘 정리되어 붙은 스티커" 같은 의미정도 되는것 같네요.

내용은 모두 직관적이라 생략합니다.

{
  "name": "Hello World Extension",
  "version": "1.0",
  "description": "The first extension that I made.",
  "browser_action": {
    "default_icon": "icon.png",
  },
  "permissions": [
    "http://api.flickr.com/"
  ]
}

3. Copy this icon to the same folder:

"default_icon": "icon.png" 부분에 선언된 바와 같이, extension 폴더 내에 icon.png 를 생성해서 넣어줍니다. 이 icon은 Chrome 에 출력될 버튼의 icon입니다.

4. Load the extension.

 > 확장 프로그램(E) > 압축 해제된 확장 프로그램 로드 ... 를 클릭해서 extension 폴더를 선택하면 Chrome 우측 상단에 extension이 설치된것을 볼 수 있습니다. 참 쉽죠잉~ :)

5. Add code to the extension.

아래와 같이 "popup": "popup.html" 을 추가하고, 폴더 내에 popup.html 파일을 생성하면 extension icon을 클릭했을 때, 팝업창으로 popup.html 이 뜹니다. iframe이나 javascript로 내용물을 구현하면 됩니다.

"browser_action": {
    "default_icon": "icon.png",
    "popup": "popup.html"
  },

아래의 스크린샷은 위에 소개된 간단한 수준의 개발 지식으로 만든 extension입니다. popup.html 안에 query문을 form 전송하는 검색창을 넣은것이죠. (그러나 벌써 27 users 나 사용중이네요, 이것이 Global에 위력)



Reference: http://code.google.com/chrome/extensions/getstarted.html