Blog | Tag | Local | Media | Guest | Login  RSS

2010 6 2

 

Tutorial에 있는 예제를 기준으로 해보도록 할 것이다.

 

 - 먼저 extension의 코드들을 저장할 폴더를 만든다. 아무 폴더에 만든 extension의 이름의 폴더를 만들면 된다. 여기서는 바탕화면에 “Hello”라는 폴더를 만드는 것으로 하겠다.

 

 - “Hello”라는 폴더 안에 “manifest.json”이라는 파일을 만든다. 이 파일은 extension의 설정 파일이다. Extension의 이름, 버전, 설명, 제한조건 등등을 설정할 수 있다.

 

 - “manifest.json”파일을 만든 후에 아래와 같이 입력한다.

{

  "name": "My First Extension",

  "version": "1.0",

  "description": "The first extension that I made.",

  "browser_action": {

    "default_icon": "icon.png",

    "popup": "popup.html"

  },

  "permissions": [

    "http://api.flickr.com/"

  ]

}

 

 - 그리고 아래의 아이콘을 “Hello” 폴더에 넣어 놓는다. Extension의 툴바에 들어갈 아이콘이다.

-----------아이콘

 

 - 그리고 아래의 “popup.html”파일을 “Hello” 폴더에 넣어 놓는다. Extension의 툴바를 눌렀을 경우에 pop up으로, “popup.html”이 나타나게 된다.

----------popup.html

 

 - 그러면 “Hello”폴더 안에 “manifest.json”, “icon.png”, “popup.html” 3개의 파일이 있을 것이다.

이제 Chrome 브라우저를 실행하고,

 버튼을 눌러 확장 프로그램관리 화면으로 간다. 그리고 압축해제된 확장 프로그램 로드를 클릭하여, “Hello”폴더를 로드한다.

 

 

위와 같은 화면이 나타날 것이고, 빨간 사각형처럼 “Hello”폴더에 넣었던 아이콘이 나타나게 될 것이다. 그리고, 아이콘을 클릭하게 되면, 아래의 화면 처럼 “popup.html”이 출력 될 것이다.

 

 


여기서 코드를 수정하거나, 삭제하거나 할 경우에는 “Hello”폴더의 파일들에서 파일을 수정하고 나서, 새로고침을 누르게 되면, 수정된 Extension을 브라우저에서 확인 할 수 있다.

 


이제 간단한 Exention을 만들어 보았다. 이제는 Extension의 여러 기능들에서 공부해보고 적용해 보도록 하자.




신고

티스토리 툴바