본 포스트는 크롬 개발자 페이지(https://developer.chrome.com/apps/first_app)를 기반으로 작성되었습니다.
-----------------------------------------------
꼭 필요한데 반복작업이 일어나는 부분은 코딩을 통해 간소화할 수 있다. 간소화 작업을 위해 크롬 앱 개발을 연구해보려고 한다.
크롬 앱은 다음과 같은 컴포넌트로 구성되어 있다.
- manifest 는 크롬 앱이 어떻게 실행되고 추가로 필요한 퍼미션이 무엇인지에 대한 정보를 담고 있다.
- background script는 앱의 라이프 사이클을 관리를 담당하는 이벤트 페이지를 작성하는데 사용된다.
- 모든 코드는 크롬 앱 패키지에 포함되어 있다. (HTML, JS, CSS, Native Client 모듈)
- 모든 icons와 assets은 반드시 패키지 안에 포함되어 있어야 한다.
Step 1: menifest 만들기
### js;
{
"name": "Hello World!",
"description": "My first Chrome App.",
"version": "0.1",
"manifest_version": 2,
"app": {
"background": {
"scripts": ["background.js"]
}
},
"icons": { "16": "calculator-16.png", "128": "calculator-128.png" }
}
※ 크롬 앱은 manifest version 2 를 반드시 사용해야 한다.
Step 2: background script 만들기
그 다음에는 background.js 파일을 다음과 같이 만든다.
### js;
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('window.html', {
'bounds': {
'width': 400,
'height': 500
}
});
});
onLaunched 이벤트는 사용자가 앱을 처음으로 실행할 때 불리어진다.
Step 3: background script 만들기
위의 background script 에서 정의된 window.html 파일을 생성한다.
### html;
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>Hello, world!</div>
</body>
</html>
Step 4: 아이콘을 생성한다.
manifest 에서 정의한대로 아이콘을 준비한다.
Step 5: 앱을 실행한다.
크롬에서 실험실 확장 프로그램 API를 사용하도록 플래그를 설정한다.
- 주소창에 chrome://flags 를 입력한다.
- "실험실 확장 프로그램 API"를 찾아 "사용" 링크를 클릭한다.
- 크롬을 재시작한다.
"Chrome 맞춤설정 및 제어" 아이콘을 클릭하여 "도구 더보기 > 확장 프로그램"을 선택한다.
"개발자 모드"에 체크를 하면, 개발자 모드 툴바가 노출되는데, "압축해제된 확장 프로그램 로드..."를 선택하여 위에서 만든 파일이 있는 경로를 설정한다.
별다른 오류가 없다면 아래와 같은 확장 프로그램이 추가된다.
"실행" 링크를 클릭하면 아래와 같은 윈도우(window.html)이 설정된 크기에 맞게 오픈된다.
원래 샘플은 쉬운법... 차근차근 사용법을 익혀야겠다.