A lap around Chrome apps & extensions

Google Chrome is built with extensibility in mind, allowing us to create fantastic apps and extensions for the platform in HTML5, JavaScript and CSS. Although modern web technologies are used, Chrome apps look and behave just like native apps with native capabilities. Fanie Reynders unveils how easy it is to create these apps and extensions for this powerful browser.

Watch the recording of the talk here: https://www.youtube.com/watch/-MUv4hYnEWI

Transcript

1. fixxup(2015); A lap around Chrome apps & extensions FANIE REYNDERS
3. Agenda  Packaged apps  Browser extensions  Deployment to Chrome Webstore  Port to mobile  ARC Welder
4. browser
5. platform
7. platform  Apps  Extensions  Native client  Store
8. App container model Your app in the cloud App code stored locally Main page opens in container User installs app User launches app
9. What are Chrome apps?  Runs on Chrome (outside the browser)  Built with HTML5, CSS & JavaScript  Experience similar to a native app  Offline by default  Access to rich set of native APIs
10. Why Chrome apps?  Instant multi-platform support  Expand your audience (Chromebook)  Integrate seamlessly into the desktop  Richer experience than traditional web apps  Easily find & start apps with Chrome App launcher  Integrated in OS  Search in Windows 8.x  Spotlight in OS X
11. Chrome app components  Manifest  Background script  App files – HTML, CSS, JavaScript  Icons
12. Manifest.json  JSON  Manifest version – must be 2  App name & version  Icons  Background script  Required API permissions { "manifest_version": 2, "name": "Hello Fixxup", "version": "0.1", "icons": { "16": "icon_16.png", "128": "icon_128.png" }, "app": { "background": { "scripts": ["main.js"] } }, "permissions": [ "storage", "videoCapture" ], }
13. Background script  Installation  Launch  Suspended chrome.runtime.onInstalled.addListener(function(){ // set up database }); chrome.app.runtime.onLaunched.addListener(function(){ chrome.app.window.create('views/index.html'); }); chrome.runtime.onSuspend.addListener(function(){ // clean up });
14. App lifecycle Installation Startup Termination Update Uninstallation
15. Packaged apps security model  Process & storage isolation App 1 App 2 App 3 File
16. Packaged apps security model  Process & storage isolation  Content Security Policy (CSP) { "manifest_version": 2, "name": "Hello Fixxup", "version": "0.1", "icons": { "16": "icon_16.png", "128": "icon_128.png" }, "app": { "background": { "scripts": ["main.js"] } }, } "sandbox": { "pages “: ["special.html"] }
17. Packaged apps security model  Process & storage isolation  Content Security Policy (CSP)  Permissions { "manifest_version": 2, "name": "Hello Fixxup", "version": "0.1", "icons": { "16": "icon_16.png", "128": "icon_128.png" }, "app": { "background": { "scripts": ["main.js"] } }, } "permissions": [ "storage", "videoCapture" ],
18. Packaged apps security model  Process & storage isolation  Content Security Policy (CSP)  Permissions  Webview Tag <webview id="foo" src="http://www.google.com/" style="width:640px; height:480px"></webview>
19. Demo
20. Chrome extensions  Adds additional features to the browser  Built with HTML5, CSS & JavaScript  Installs like conventional apps  Has access to APIs provided by the browser
21. Manifest.json  JSON  Manifest version – must be 2  Name, version & description  Icons  Background script  Required API permissions
22. NL Translate Extension Bing Translate API CTRL+Space “How are you?” “Hoe gaat het?” English  Dutch
23. Demo
24. Thank you! Fanie Reynders @faniereynders faniereynders.com https://developer.chrome.com Fixxup sponsored by: