크롬 앱(Chrome App) 만들기 #1

^{Design by @imrahelk}

안녕하세요. 안피곤입니다.

이번에는 크롬 브라우저에서 동작하는 앱을 만드는 과정을 설명합니다. 다음과 같은 Chrome 앱을 만들 수 있습니다. 크롬 브라우저와 함께 동작하는 Chrome Extensions, 그리고 네이티브 앱처럼 독립적으로 실행할 수 있는 Chrome App이 있습니다.

^{출처: https://developer.chrome.com/home}

Chrome App은 HTML, CSS, JS 만 알면 누구나 쉽게 개발할 수 있습니다. 그리고 크롬 브라우저가 설치되는 대부분의 OS에서 실행됩니다. 간단한 앱은 Chrome App으로 쉽게 만들 수 있습니다.

Chrome App 만드는 방법은 매우 간단합니다. 다음 과정이면 누구나 쉽게 만들 수 있습니다. 지금 바로 스팀잇 앱을 만들어보세요. ㅋ

Chrome App에는 다음 구성 요소가 포함됩니다.

manifest는 Chrome에서 실행하기 위한 앱에 대해 정보입니다. 앱 기본 정보와 실행하는 방법, 그리고 필요한 추가 권한을 설정합니다.
background script는 프로그램 수명주기 관리하는 이벤트 페이지를 만드는 데 사용됩니다.
모든 코드(HTML, JS, CSS)는 Chrome 앱 패키지에 포함되어야 합니다.
모든 이미지와 기타 Assets도 패키지에 포함되어야합니다.

manifest 만들기

manifest.json 파일을 생성합니다. manifest에 대한 자세한 설명은 Formats: Manifest Files를 참고하세요.

｛
  "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" ｝
｝

중요 : Chrome App은 반드시 manifest version 2를 사용해야합니다.

background script 만들기

그다음 background.js 파일을 만듭니다.

chrome.app.runtime.onLaunched.addListener(function() ｛
  chrome.app.window.create('window.html', ｛
    'outerBounds': ｛
      'width': 400,
      'height': 500
    ｝
  ｝);
｝);

사용자가 앱을 실행하면 onLaunched 이벤트가 호출됩니다. 그리고 지정된 width와 height의 크기의 window을 열어 앱을 실행합니다. background script에는 listeners, windows, post messages, 그리고 launch data가 포함될 수 있습니다. 이 데이터는 이벤트 페이지에서 앱을 관리하는 데 사용됩니다.

Step 3: window 페이지 만들기

window.html 파일을 만듭니다. 앱이 실행되면 보이는 화면입니다.

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div>Hello, world!</div>
  </body>
</html>

Step 4: 아이콘 만들기

아래 아이콘을 다운로드 받아 앱 폴더에 넣어주세요.

앱 실행하기

앱로드 하기

크롬 브라우저에서 설정 아이콘을 클릭하고 도구 더보기(L) > 확장 프로그램(E)을 선택합니다. 또는, 주소창에 chrome://extensions/를 입력하여 이동합니다. 그리고 상단죄측의 개발자 모드를 선택합니다. 그다음 압축해제된 확장 프로그램을 로드합니다 버튼을 클릭하고 앱의 폴더로 이동 한 다음 확인을 클릭 합니다.

그러고 나면 Chrome Apps 에 Hello World 아이콘이 생성된 것을 확인할 수 있습니다. 클릭하면 앱이 실행됩니다.

참고: https://developer.chrome.com/apps/first_app

해피 코딩하세요~!

![](https://steemitimages.com/400x0/https://cdn.steemitimages.com/DQmQmWhMN6zNrLmKJRKhvSScEgWZmpb8zCeE2Gray1krbv6/BC054B6E-6F73-46D0-88E4-C88EB8167037.jpeg)