1단계: Chrome 앱 만들기 및 실행

이 단계에서 학습할 내용은 다음과 같습니다.

  • 매니페스트 파일 및 백그라운드 스크립트를 비롯한 Chrome 앱의 기본 구성요소입니다.
  • Chrome 앱을 설치, 실행, 디버그하는 방법

예상 소요 시간: 10분
이 단계에서 완료할 작업을 미리 보려면 이 페이지 하단으로 이동 ↓합니다.

Chrome 앱 익히기

Chrome 앱에는 다음과 같은 구성요소가 포함됩니다.

  • 매니페스트는 앱의 메타 정보를 지정합니다. 매니페스트는 Chrome에 앱에 관한 정보, 실행 방법, 필요한 추가 권한을 알려줍니다.
  • 백그라운드 스크립트라고도 하는 이벤트 페이지는 앱 수명 주기를 관리합니다. 백그라운드 스크립트는 앱 창 실행 및 닫기와 같은 특정 앱 이벤트를 위한 리스너를 등록하는 곳입니다.
  • 모든 코드 파일은 Chrome 앱에 패키징해야 합니다. 여기에는 HTML, CSS, JS, 네이티브 클라이언트 모듈이 포함됩니다.
  • 앱 아이콘을 포함한 애셋도 Chrome 앱에 패키징되어야 합니다.

매니페스트 만들기

즐겨 사용하는 코드/텍스트 편집기를 열고 manifest.json이라는 이름의 파일을 만듭니다.

{
  "manifest_version": 2,
  "name": "Codelab",
  "version": "1",
  "icons": {
    "128": "icon_128.png"
  },
  "permissions": [],
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  },
  "minimum_chrome_version": "28"
}

이 매니페스트가 background.js라는 백그라운드 스크립트를 설명하는 방식을 확인합니다. 다음에 이 파일을 만들게 됩니다.

"background": {
  "scripts": ["background.js"]
}

이 단계의 후반부에서는 앱 아이콘이 제공됩니다.

"icons": {
  "128": "icon_128.png"
},

백그라운드 스크립트 만들기

다음 파일을 만들어 background.js로 저장합니다.

/**
 * Listens for the app launching then creates the window
 *
 * @see /apps/app.window.html
 */
chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('index.html', {
    id: 'main',
    bounds: { width: 620, height: 500 }
  });
});

이 백그라운드 스크립트는 애플리케이션의 chrome.app.runtime.onLaunched 실행 이벤트를 기다리고 콜백 함수를 실행합니다.

chrome.app.runtime.onLaunched.addListener(function() {
  //...
});

Chrome 앱이 실행되면 chrome.app.window.create()에서 기본 HTML 페이지 (index.html)를 소스로 사용하여 새 창을 만듭니다. 다음 단계에서 HTML 보기를 만들어 보겠습니다.

chrome.app.window.create('index.html', {
  id: 'main',
  bounds: { width: 620, height: 500 }
});

백그라운드 스크립트에는 추가 리스너, 창, 게시물 메시지, 실행 데이터가 포함될 수 있으며, 이러한 모든 정보는 이벤트 페이지에서 앱을 관리하는 데 사용됩니다.

HTML 보기 만들기

화면에 'Hello World' 메시지를 표시하는 간단한 웹페이지를 만들고 index.html로 저장합니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <h1>Hello, let's code!</h1>
</body>
</html>

다른 웹페이지와 마찬가지로 이 HTML 파일 내에 패키징된 자바스크립트, CSS 또는 애셋을 추가로 포함할 수 있습니다.

앱 아이콘 추가

이 128x128 이미지를 마우스 오른쪽 버튼으로 클릭하여 프로젝트 폴더에 _icon128.png로 저장합니다.

이 Codelab의 Chrome 앱 아이콘

이 PNG를 시작 메뉴에서 사용자에게 표시되는 애플리케이션 아이콘으로 사용합니다.

모든 파일을 만들었는지 확인

이제 프로젝트 폴더에 다음 4개의 파일이 있습니다.

파일 폴더 스크린샷

개발자 모드로 Chrome 앱 설치

앱을 배포 패키지로 마무리하지 않고도 개발자 모드를 사용하면 앱을 빠르게 로드하고 실행할 수 있습니다.

  1. Chrome 검색주소창에서 chrome://extensions에 액세스합니다.
  2. 개발자 모드 체크박스를 선택합니다.

개발자 모드 사용 설정

  1. 압축해제된 확장 프로그램 로드를 클릭합니다.
  2. 파일 선택 도구 대화상자를 사용하여 앱의 프로젝트 폴더로 이동하고 폴더를 선택하여 앱을 로드합니다.

압축해제된 확장 프로그램 로드

완성된 Hello World 앱을 실행합니다.

프로젝트를 압축해제된 확장 프로그램으로 로드한 후 설치된 앱 옆의 Launch를 클릭합니다. 새 독립형 창이 열립니다.

1단계 후 완성된 Hello World 앱

축하합니다. 새로운 Chrome 앱을 만들었습니다.

Chrome DevTools로 Chrome 앱 디버그

Chrome 개발자 도구를 사용하면 일반 웹페이지에서와 마찬가지로 앱을 검사, 디버그, 감사, 테스트할 수 있습니다.

코드를 변경하고 앱을 새로고침한 후 (마우스 오른쪽 버튼으로 클릭 > 앱 새로고침) DevTools 콘솔에서 오류가 있는지 확인합니다 (마우스 오른쪽 버튼으로 클릭 > 요소 검사).

Inspect Element 대화상자

알람과 함께 3단계의 백그라운드 페이지 검사 옵션을 다룹니다.

DevTools 자바스크립트 콘솔에서도 앱에서 사용 가능한 동일한 API에 액세스할 수 있습니다. API 호출을 코드에 추가하기 전에 손쉽게 테스트할 수 있습니다.

DevTools 콘솔 로그

추가 정보

이 단계에서 도입된 일부 API에 관한 자세한 내용은 다음을 참고하세요.

다음 단계로 진행할 준비가 되셨나요? 2단계 - 기존 웹 앱 가져오기 »로 이동합니다.