크롬 확장프로그램 tutorial 1

크롬 확장프로그램 개발은 js, html, 그리고 Manifest File로 구성되어 개발이 된다.

 

크롬 확장 프로그램에 필요한 js, html 그리고 Manifest file을 하나의 폴더에 두고,

 

크롬을 실행하여 주소입력창에 chrome://extensions 을 입력하면, 확장프로그램 페이지로 이동한다.

 

개발자 모드(Developer mode)를 켜주면, 숨겨진 바가 나온다. 

거기서 "압축해제된 확장 프로그램을 로드합니다.(Load unpacked)" 를 클릭하면,

 

폴더를 선택할 수 있는 창이 나온다. 

여기서 크롬 확장프로그램에 필요한 파일들이 들어있는 폴더를 선택하면 된다.

 

그러면 크롬에 확장 프로그램이 추가된다.

 

크롬 확장 프로그램에서 manifest.json 파일 설정에 따라 필요한 js,html을 알 수 있으므로, 

간단하게 작성해 보면 아래와 같다.

 

{ "name": "Tutorial", "version": "1.0", "description": "run to Simple", "permissions":      ["storage","notifications"], "background": { "scripts": ["background.js"], "persistent": false }, "browser_action": { "default_popup":"popup.html" }, "manifest_version": 2 }

 

manifest.json에서 필수로 선언되어야 하는 내용은 name, version, manifest_version 3가지 이고,

manifest_version은 2로 설정해야된다.

 

상세 내용은 공식 홈페이지 참조 (https://developer.chrome.com/extensions/manifest)

 

위와 같이 설정을 하게 되면 필요한 파일은

 

- Background.js

- popup.html

- popup.js ( popup.html 내에서 사용될 자바스크립 )

 

추가적으로 ajax나 selector를 사용하기 위하여 옵션적으로 jQuery.js 파일을 추가해서 사용해도 된다.