원문 : http://developer.chrome.com/extensions/getstarted.html
오늘 : 2013 12 30
시작 : 크롬 확장 프로그램 만들기
네이티브 코드 없이 크롬 확장 프로그램에 등록할 수 있다. 이미 우리들에게 친숙한 웹 개발도구인 HTML, CSS, JavaScript의 주요 기술들로 확장 프로그램을 만들어 낼 수 있다. 이전에 웹 페이지를 만들어 본 적이 있다면, 꽤 빠르게 괜찮은 홈페이지 처럼 만들어 낼 수 있다. 원클릭으로 새끼고양이 그림에 접근할 수 있는 간단한 확장 앱을 보면서 바로 테스트해 볼 수 있다.
크롬의 옴니박스( Omnibox )에 쉽게 접근하도록 클릭가능한 아이콘 'Browser Action'이라 불리는 UI 엘러먼트를 우리는 구현할 수 있다. 클릭된 아이콘은 아래 그림과 같이 고양이 상품들이 가득한 화면이 띄워준다.
( 아래 그림이 안나올 경우, 위 원문 사이트를 다녀오면 잘 보여진다. )
가이드를 잘 따라와 준다면, 반짝거리는 디렉토리 하나가 당신 컴퓨터에 만들어 진다. 그 다음 당신이 가장 즐겨 쓰는 편집기( 개발 도구 또는 에디터 )를 띄운다. 그럼, 시작하겠습니다 !
먼저 선언( Declare ) 을 해야합니다.
우리가 가장 먼저 해야할 것은 manifest라 불리는 manifest.json을 만들어야 한다. manifest는 JSON형식과 다를바 없는 컨텐츠 테이블이다. 크롬 확장 앱의 이름, 설명, 버젼 등과 같은 속성에 대해 포함하고 있다. 상위 레벨에서 우리가 크롬에서 사용할 부분과 필요한 퍼미션( permissions )에 대해 선언할 수 있다.
새끼고양이 화면에서, 'Browser Action'를 을 만들고 싶었던 것 처럼, 인터넷에서 리소스를 부분적으로 가져와서 자유롭게 보여주려면, 크롬에게 뭔가 말을 해줘야 한다. Manifest 파일이 뭔가 말해줘야 하는 그 명령어들을 다음과 같이 포함하고 있다.
* Manifest.json
manifest.json {
"manifest_version": 2,
"name": "One-click Kittens",
"description": "This extension demonstrates a browser action with kittens.",
"version": "1.0",
"permissions": [
"https://secure.flickr.com/"
],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
}
} |
만들어 놓은 디렉토리에 menifest.json 파일 이름으로 데이터들을 저장하고 계속 진행한다. 또는 샘플을 다운로드 받아서 manifest.json으로 복사해 두어도 된다.
무슨 말인가요?