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

초짜 IT보이 서바이벌 스토리 2011.09.27 11:35


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

출처: 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 페이지에서 시작하여 멋진 확장 프로그램을 하나 만들어 봐야 겠네요 ㅎㅎ




 
저작자표시

'초짜 IT보이 서바이벌 스토리' 카테고리의 다른 글

MacBook Pro 에 home brew 를 사용하여 apache, php, 그리고 mysql 설치하기  (1) 2017.04.17
여러 플랫폼으로 개발된 POS system  (1) 2014.06.28
#ubuntu #11.10 에서 #classic #desktop 보기  (0) 2011.10.18
구글 크롬 확장 프로그램 만들기  (0) 2011.09.27
각 SNS 공유 버튼 URL  (0) 2011.07.28
MS SQL - With (NOLOCK)  (2) 2008.01.24
Posted by Sungyoup Han matrim
TAG , , , , , , , , , ,
트랙백 0개, 댓글 0개가 달렸습니다

댓글을 달아 주세요

티스토리툴바