Difference between r1.26 and the current
@@ -72,7 +72,19 @@
}
}}}
일반적으로 Hosted App은 Chrome App전용으로 만들기 보다는 WebApp으로 만들어 여러 브라우져에서 모두 작동가능하도록 만든다. 따라서 Hosted App은 일반적으로 링크에 해당하는 기능 외에는 제공하지 않는 것이 보통이다. Chrome에서 Hosted App을 캐싱하여서 로컬에서도 동작할수 있게끔 하는 방법을 알고싶다면 [https://developers.google.com/chrome/apps/docs/background?hl=ko 링크]를 참조하자.
* [http://developer.chrome.com/extensions/getstarted.html]
* [http://developer.chrome.com/apps/about_apps.html]
}}}
일반적으로 Hosted App은 Chrome App전용으로 만들기 보다는 WebApp으로 만들어 여러 브라우져에서 모두 작동가능하도록 만든다. 따라서 Hosted App은 일반적으로 링크에 해당하는 기능 외에는 제공하지 않는 것이 보통이다. Chrome에서 Hosted App을 캐싱하여서 로컬에서도 동작할수 있게끔 하는 방법을 알고싶다면 [https://developers.google.com/chrome/apps/docs/background?hl=ko 링크]를 참조하자.
=== Pakaged App : main.js ===
=== Packaged App : main.js ===
Packaged App은 모든 동작이 js파일을 실행함으로써 일어난다. 즉 main.js를 Chrome에서 불러들여서 실행을 하면 그 코드대로 실행된다. 즉 크롬앱의 진입점이라 할수 있으며 파일 이름 자체는 manifest.json에서 수정이 가능하다. 아래 코드는 시작되었을때 새 창을 띄워주는 코드이다.
{{{
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('index.html', {
bounds: {
width: 500,
height: 309
}
});
});
}}}
당연한 이야기이지만 여러개의 창을 띄우는 것도 가능하다. window.create를 여러번 해주면 여러창이 뜬다. 일단 창을 띄우고 나면 [html]과 JavaScript를 이용해서 index.html을 작성하면 된다.
== 참고할만한 페이지 ==* [http://developer.chrome.com/extensions/getstarted.html]
* [http://developer.chrome.com/apps/about_apps.html]
2. 사전 지식 ¶
- HTML, HTML5
- JavaScript
- 웹페이지에 대한 전반적인 이해
3.2.1. Packaged App ¶
사용자의 Local에 모든 데이터를 저장하는 앱. 무조건 별도의 창으로 뜨기 때문에 마치 native app을 사용하는 듯한 느낌을 받을수 있다. 또한 모든 코드가 사용자의 컴퓨터에 저장되기 때문에 오프라인 상태에서도 사용할수 있다는 장점이 있으나 native앱처럼 느껴지면서 native앱처럼 동작할수 없다는 점이 가장 큰 문제가 된다.
3.3. 개발환경 설정 ¶
- 적당한 폴더를 만든다.
- 그 폴더안에 아래를 참고하여 manifest.json파일을 만든다.
- 크롬을 켠다.
- 크롬메뉴의 도구의 확장 프로그램[2]을 켠다.
- 개발자 모드를 체크하여 활성화 시킨다.
- 압축해제된 확장 프로그램 로드를 눌러 아까 폴더를 선택하여 확장 프로그램을 로드한다.
- 개발자 모드를 체크하여 활성화 시킨다.
- 크롬 개발자 도구(F12)를 켠다.
- 우측하단의 기어모양을 눌러서 개발자 도구 옵션을 켠다.
- workspace tab으로 간다.
- add버튼을 눌러 아까 폴더를 추가한다.(이떄 상단에 권한 확인 바에서 '예'를 눌러줄것
- 우측하단의 기어모양을 눌러서 개발자 도구 옵션을 켠다.
- 아까 로드해둔 확장프로그램을 켠후 크롬 개발자 도구를 켠다.
- source tab에서 우측에 파일 브라우져에서 오른쪽 클릭한후 mapping to localfile를 선택하여거 확인후 매핑한다.
- source tab에서 우측에 파일 브라우져에서 오른쪽 클릭한후 mapping to localfile를 선택하여거 확인후 매핑한다.
3.4.1. manifest.json ¶
Chorme App에는 반드시 manifest.json이 존재해야만 하며 이 파일을 기준으로 어떤 종류의 App인지 판단한다. manifest.json은 당연히 json파일이므로 json형식을 따라야한다.
3.4.1.1. Packaged App ¶
{
"manifest_version": 2, //menifest_version 거희 모든 경우 2로 고정
"name": "My first app", //App이름
"version": "1",
"app": {
"background": {
"scripts": ["main.js"] //시작 스크립트
}
}
}
3.4.1.2. Hosted Apps ¶
{
"name": "Google Mail", //App의 이름
"description": "Read your gmail", //App의 간략한 설명
"version": "1", //버전
"app": {
"urls": [ //해당하는 앱이 동작하는 url
"*://mail.google.com/mail/",
"*://www.google.com/mail/"
],
"launch": { //App의 Main Page
"web_url": "http://mail.google.com/mail/"
}
},
"icons": {
"128": "icon_128.png" //App이 표시되는 Icon
},
"permissions": [ //App에 요구되는 permission
"unlimitedStorage",
"notifications"
]
}
3.4.2. Packaged App : main.js ¶
Packaged App은 모든 동작이 js파일을 실행함으로써 일어난다. 즉 main.js를 Chrome에서 불러들여서 실행을 하면 그 코드대로 실행된다. 즉 크롬앱의 진입점이라 할수 있으며 파일 이름 자체는 manifest.json에서 수정이 가능하다. 아래 코드는 시작되었을때 새 창을 띄워주는 코드이다.
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('index.html', {
bounds: {
width: 500,
height: 309
}
});
});
당연한 이야기이지만 여러개의 창을 띄우는 것도 가능하다. window.create를 여러번 해주면 여러창이 뜬다. 일단 창을 띄우고 나면 html과 JavaScript를 이용해서 index.html을 작성하면 된다. ----
- [1] https://developers.google.com/chrome/web-store/articles/apps_vs_extensions?hl=ko
- [2] chrome://extensions/
