-
[크롬 앱]크롬 웹스토어에 내 앱 올리기Front-end 2014. 3. 10. 23:10728x90
<이글은 크롬 웹스토어 공식 튜토리얼을 제구성한 것입니다.>
(원본 링크: https://developer.chrome.com/apps/first_app)이튜토리얼은 처음으로 크롬앱을 만드는 과정을 안내합니다. 크롬앱은 manifest와 패키징방법등 크롬 확장 프로그램과 비슷하게 구성되어 있습니다. 이 튜토리얼을 마친후 아래 만들어진 파일을 zip파일로 묶으면 바로 웹스토어에 게시할 수 있는 상태가 돱니다.크롬앱은 아래의 구성요소를 포함하고 있습니다.- manifest 파일: 크롬에게 앱에 대해서 알려줌. 프로그램 시작방법, 필요한 권한정보등
- background script 파일: 앱의 라이프 사이클을 관리하는 이벤트 페이지를 만드는데 사용
- icon과 같은 리소스들: 아이콘과 기타 자산들이 앱 패키지안에 포함되어 있어하 함
- 패키징된 크롬 앱 코드들: HTML, JS, CSS, 그외 클라이언트 모듈
1단계: manifest 만들기아래와 같은 내용으로 manifest.json 파일을 생성합니다. (Manifest 파일 포맷)manifest.json{
"name": "Hello World!","description": "My first Chrome App.","version": "0.1","app": {"background": {"scripts": ["background.js"]}},"icons": { "16": "calculator-16.png", "128": "calculator-128.png" }}중요: 크롬앱은 반드시 manifest version2 를 사용해야 합니다.2단계: background script 만들기아래와 같은 내용으로 background.js 파일을 생성합니다.background.jschrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('window.html', {'bounds': {'width': 400,'height': 500}});});3단계: window 페이지 생성window.html 파일을 생성합니다.window.html<!DOCTYPE html>
<html><head></head><body><div>Hello, world!</div></body></html>4단계: 아이콘 생성아래 아이콘을 생성합니다.(아래 링크를 누르면 샘플파일을 다운받을 수 있습니다.)5단계: 앱 실행여기가 중요한 단계로 로컬 PC의 크롬 브라우저에 실제로 앱을 설치해고 실행하보는 단계입니다.flags 설정아직 많은 크롬앱 API가 실험적인 단계입니다. 그래서 실험적 API를 사용가능하도록 아래와 같이 설정 해야합니다.- 크롬 브라우저에서 chrome://flags 주소로 이동
- 실험실 확장프로그램 API 를 찾아서 사용 버튼 클릭
- 크롬 제시작
앱 로드앱을 로드하기 위해 확장 프로그램 관리 페이지로 이동합니다. 크롬 브라우저의 오른쪽 상단 설정 버튼을 누르고도구 -> 확장 프로그램을 선택합니다.여기서 오른쪽 상단의 개발자모드에 체크를 합니다.압축해제된 확장 프로그램 로드… 버튼을 클릭하고 위 단계에서 작성한 앱 파일이 있는 폴더를 선택하고 OK 합니다.새로운 탭열고 앱 실행한번 로드한 앱은 크롬 앱스토어에서 설치한 앱과 같이 크롬 앱 화면에서 실행할 수 있습니다. 새탭을 열고 왼쪽 상단 애플리케이션 버튼을 누르면 나오면 앱 목록에 추가되어 있어서 실행해 볼 수있습니다. 앱은 마치 단독네이티브 어플리케이션과 같이 새창에 열리게 됩니다.'Front-end' 카테고리의 다른 글
javascript ajax 크로스 도메인 요청 하기 (CORS) (12) 2015.03.22 자바스크립트 라이브러리 버전 관리 webjars 로 쉽게 하기 (0) 2015.02.02 무료 웹 폰트 아이콘 소개 (0) 2014.05.20 [팁]자바스크립트 json 객체 인트로스펙션 (0) 2014.03.17 - manifest 파일: 크롬에게 앱에 대해서 알려줌. 프로그램 시작방법, 필요한 권한정보등
