[Create Your First App]
: https://developer.chrome.com/apps/first_app
1. manifest 생성
. chrome app에서는 background로 실행되는 script를 정할 수 있음.
2. background script 생성
. background로 주기적으로 실행되며 event에 따라 app을 관리함.
3. window page 생성
. 화면에 app을 보여주기 위해.
4. App icon 정하기
5. Chrome상에서 App launching
. Chrome setting icon > Tools > Extension
: Developer mode check 되어 있는지 확인
: Load unpacked extension 버튼 클릭 후 app folder 선택
* 간단하네...
[Chrome App 관련 개념들]
: https://developer.chrome.com/apps/app_architecture
. Chrome App은 browser tab이 아닌 그냥 비어 있는 사각형에 표시되므로 특성에 따라 UI를 구성해야 함.
. Chrome App에서는 오프라인에서의 동작, 보안의 이유로 local상에서 main page를 위치하도록 하고 있음.
[App Life Cycle]
Life 설치 부터 삭제 까지의 주요 상황은 다음과 같음
- Instaillation : app 설치 시 permission을 사용자로부터 획득
- Startup : event page가 load되고 launch() event가 발생되면 app을 실행함.'
- Termination : app이 종료되면 종료 시 상태를 저장한다.
- Update : Chrome App은 언제나 업데이트 될 수 있지만 startup/termination 단계에서는 변경안됨.
- Uninstallation : 사용자가 app을 삭제하면 executing code와 private data는 모두 삭제 됨.
좀 더 자세히 풀어보면
: https://developer.chrome.com/apps/app_lifecycle
아래와 같이 event Script에서 onLaunched 시 window를 표시함을 볼 수 있음.
chrome.app.runtime.onLaunched.addListener(function() { chrome.app.window.create('main.html', { id: 'MyWindowID', bounds: { width: 800, height: 600, left: 100, top: 100 }, minWidth: 800, minHeight: 600 }); });또한 설치, 중지, 재시작 되었을 때 chrome.runtime의 event listener로 처리할 수 있음.
=> https://developer.chrome.com/extensions/runtime#events
[Security Model]
Chrome App들은 CSP(Content Security Policy)를 따라야 한다고 하고 있음.
- Chrome App들은 사용하는 API들에 따른 permission을 명시적으로 알려야 함.
- Chrome App들은 분리된 storage, external content기반으로 분리된 process를 재사용함. 즉 다른 Chrome App들의 data, Chrome Browser의 Web page의 data를 접근할 수 없음. (cookie도 포함)
[Content Security Policy]
: https://developer.chrome.com/apps/contentSecurityPolicy
- 제약 사항들
. inline scripting 사용 불허
. video, audio를 제외한 external resources를 접근 불허
. iframe 내 resource들을 embed 못함.
. string-to-JavaScritp methods 사용 불가(eval(), new Function())
위 제약사항들에 대해서 대안으로 templating libraries, XMLHttpRequest를 사용한 external resoruce 접근, webview tag 사용을 말하고 있음.
[Chrome App Sample]
: https://github.com/GoogleChrome/chrome-app-samples
[Hello World]
: https://github.com/GoogleChrome/chrome-app-samples/tree/master/samples/hello-world
예제의 진리.. hello world
간단하다 화면에 Chrome icon과 hello world가 찍힌다.
manifest는 아래과 같고 background script는 main.js임.
| { | |
| "manifest_version": 2, | |
| "name": "Hello World", | |
| "version": "2.1", | |
| "minimum_chrome_version": "23", | |
| "icons": { | |
| "16": "icon_16.png", | |
| "128": "icon_128.png" | |
| }, | |
| "app": { | |
| "background": { | |
| "scripts": ["main.js"] | |
| } | |
| } | |
| } |
background script에서는
chrome app onLaunch event에서 화면에 index.html을 띄워주고 있음.
chrome.app.runtime.onLaunched.addListener(function() { // Center window on screen. var screenWidth = screen.availWidth; var screenHeight = screen.availHeight; var width = 500; var height = 300; chrome.app.window.create('index.html', { id: "helloWorldID", outerBounds: { width: width, height: height, left: Math.round((screenWidth-width)/2), top: Math.round((screenHeight-height)/2) } }); });
스크린샷은 직접 해서 보시라. :)
