구글 크롬 확장 프로그램 만들기

구글 크롬 확장 프로그램 만드는 방법이 궁금해서..
인터넷을 찾아보니.. 

출처: http://code.google.com/chrome/extensions/getstarted.html

에서 친절하게 사용방법이 나와있네요 ㅎㅎ.. Step 들을 따라 해보니 바로 하나가 만들어지네요 :)

간단한 설명 함꼐 올려드립니다.

1. 폴더를 하나 만든 뒤 폴더 안에 manifest.json 이란 파일을 만든 뒤 아래의 코드를 넣어 줍니다.

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

2. 아이콘을 다운 받아 같은 폴더 안에 넣어 줍니다.
 (http://code.google.com/chrome/extensions/examples/tutorials/getstarted/icon.png)

3. 크롬의 확장프로그램 메뉴로 들어갑니다. (chrome://extensions/#)

4. 개발자 모드 옆의 아이콘이 + 로 되어 있다면 클릭하여 - 로 만든 뒤, 압축 해제된 확장 프로그램 로드 를 눌러 파일 다이얼로그를 엽니다. 다이얼로그에서 위에 만든 파일들이 들어가 있는 폴더를 클릭 후 선택을 눌러줍니다. 
(정상적으로 작동한다면, 아이콘이 확장 프로그램 옆에 생성이 되고 아래와 같이 확장 프로그램이 등록됩니다.)

 
5. 이 시점에서는 아이콘을 눌러도 아무런 작동을 안합니다.

6. manifest.json 파일을 열어 아래 라인을 추가해 줍니다.

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

 
7. 이제 자바 스크립트와 css 가 포함된 popup.html 파일을 폴더 내에 만들어줍니다. 
    여기에 있는 내용을 그대로 html 파일에 넣어줍니다. 

8. 이제 확장 프로그램 관리 페이지에서 새로고침을 눌러준 뒤 아이콘을 눌러보세요.. :) 아래의 그림과 같이 확장 프로그램이 flickr 에서 그램들을 불러 옵니다. :)

:) 모두 성공적 완료!!! 

구글에서 크롬 관련 확장 프로그램에 대한 튜토리얼이 아주 자세하게 잘 나와 있습니다.
여기 -> Overview 페이지에서 시작하여 멋진 확장 프로그램을 하나 만들어 봐야 겠네요 ㅎㅎ