이 튜토리얼에서는 첫 번째 Chrome 앱을 만드는 과정을 안내합니다. Chrome 앱은 확장 프로그램과 유사하게 구조화되므로 현재 개발자는 매니페스트와 패키징 방법을 쉽게 알 수 있습니다. 완료했으면 앱을 publish하기 위한 코드와 애셋을 ZIP 파일로 만들기만 하면 됩니다.
Chrome 앱에는 다음과 같은 구성요소가 포함됩니다.
- 매니페스트는 Chrome에 앱에 관한 정보, 앱, 앱 실행 방법 및 필요한 추가 권한을 알려줍니다.
- 백그라운드 스크립트는 앱 수명 주기를 관리하는 이벤트 페이지를 만드는 데 사용됩니다.
- 모든 코드는 Chrome 앱 패키지에 포함되어야 합니다. 여기에는 HTML, JS, CSS, Native Client 모듈이 포함됩니다.
- 모든 아이콘과 기타 애셋도 패키지에 포함되어야 합니다.
1단계: 매니페스트 만들기
먼저 manifest.json 파일을 만듭니다 (형식: 매니페스트 파일에 이 매니페스트가 자세히 설명되어 있습니다).
{
"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" }
}
2단계: 백그라운드 스크립트 만들기
다음으로, 다음 내용으로 background.js라는 새 파일을 만듭니다.
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('window.html', {
'outerBounds': {
'width': 400,
'height': 500
}
});
});
위 샘플 코드에서는 사용자가 앱을 시작하면 onLaunched 이벤트가 실행됩니다. 그러면 즉시 지정된 너비와 높이의 앱 창이 열립니다. 백그라운드 스크립트에는 추가 리스너, 창, 게시물 메시지, 실행 데이터가 포함될 수 있으며, 모두 이벤트 페이지에서 앱을 관리하는 데 사용됩니다.
3단계: 창 페이지 만들기
window.html 파일 생성:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>Hello, world!</div>
</body>
</html>
4단계: 아이콘 만들기
다음 아이콘을 앱 폴더에 복사합니다.
5단계: 앱 실행
플래그 사용 설정
대부분의 Chrome Apps API는 아직 실험 단계이므로 시험해 볼 수 있도록 실험용 API를 사용 설정해야 합니다.
- chrome://flags로 이동합니다.
- '실험 확장 프로그램 API'를 찾은 후 '사용 설정' 링크를 클릭합니다.
- Chrome을 다시 시작합니다.
앱 로드
앱을 로드하려면 Chrome 설정 아이콘을 클릭하고 Tools > Extensions를 선택하여 앱 및 확장 프로그램 관리 페이지를 엽니다.
개발자 모드 체크박스가 선택되어 있는지 확인합니다.
압축해제된 확장 프로그램 로드 버튼을 클릭하고 앱의 폴더로 이동한 후 확인을 클릭합니다.
새 탭 열기 및 실행
앱을 로드한 후 새 탭 페이지를 열고 새 앱 아이콘을 클릭합니다.
또는 명령줄에서 로드 및 실행
다음과 같은 Chrome의 명령줄 옵션을 사용하면 작업을 반복하는 데 도움이 될 수 있습니다.
--load-and-launch-app=/path/to/app/는 지정된 경로에서 압축해제된 애플리케이션을 설치하고 시작합니다. 애플리케이션이 이미 실행 중인 경우 업데이트된 콘텐츠로 다시 로드됩니다.--app-id=ajjhbohkjpincjgiieeomimlgnll이(가) Chrome에 이미 로드된 앱을 실행합니다. 이전에 실행 중인 앱을 다시 시작하지는 않지만 업데이트된 콘텐츠로 새 앱을 실행합니다.