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 앱을 실행합니다.

프로젝트를 압축해제된 확장 프로그램으로 로드한 후 설치된 앱 옆에 있는 실행을 클릭합니다. 가 새 독립형 창이 열립니다.

1단계 후 완성된 Hello World 앱

축하합니다. 새로운 Chrome 앱이 만들어졌습니다.

Chrome DevTools로 Chrome 앱 디버그

Chrome 개발자 도구를 사용하여 다음에서처럼 앱을 검사, 디버그, 감사, 테스트할 수 있습니다. 할 수 있습니다.

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

요소 검사 대화상자

3단계의 백그라운드 페이지 검사 옵션에 대해서는 알람과 함께 설명합니다.

DevTools JavaScript 콘솔은 여러분의 앱에서 사용할 수 있는 것과 동일한 API에 액세스할 수 있습니다. 손쉽게 코드에 추가하기 전에 API 호출을 테스트합니다.

DevTools 콘솔 로그

추가 정보

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

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