About me


Who am I?

  • Tech writer for Chrome Apps and Extensions
  • Chrome Developer Relations Team
  • Meggin Kearney

Why am I here?

  • Talk about Chrome Apps
  • Get you to build your own Chrome Apps
  • Support women in developer community

5 things you'll learn

How Chrome Apps look and behave

What technologies are used to build them

What really cool stuff you can build

How to build your own app

What we're still figuring out

Native appearance and behavior


No browser chrome

Lives outside the browser

Main focus on app tasks

Works offline by default

User controls app lifecycle

Launch locally


The App Launcher:

  • Works on ChromeOS and Windows
  • Mac OSX and Linux coming soon

Let's launch some apps now...

Web development with key changes

Web platform support

  • Write apps in HTML, JavaScript, and CSS3
  • Install once and works across platforms
  • Automatic updates
  • Web security

Key differences

  • Disabled 'browser' features
  • Serious Content Security Policy
  • Use <webview> tag instead of <iframe>
  • Access to capabilities normally forbidden to web apps

Build cool apps with Chrome APIs

Network Sockets API: Fly a Parrot AR.Drone.

File System APIs: Import music from desktop to music player AND sync across clients using Google Drive.

Alarms and Notifications APIs: Set an alarm and send notifications to user's system tray.

Media Gallery API: Access media stored on a user's device (with user's permission, of course).

Serial API: Use Arduino to create an LED toggle.

Ready to build our own app


Step 1: Create basic app

  • The manifest.json describes meta-informaton about the app.
  • The background script, main.js, sets up how your app responds to system events.
  • The view, index.html, is what your user sees.
  "manifest_version": 2,
  "name": "My first app",
  "version": "1",
  "app": {
    "background": {
      "scripts": ["main.js"]
chrome.app.runtime.onLaunched.addListener(function() {
      {width: 500, height: 309});
      <meta charset="utf-8">
      <title>Hello DevFestW
      <h1>Hello, DevFestW!</h1>

Step 2: Create model-view-controller

function TodoCtrl($scope) {
  $scope.todos = [
    {text:'learn angular', done:true},
    {text:'build an angular app', done:false}];
  $scope.addTodo = function() {
    $scope.todos.push({text:$scope.todoText, done:false});
    $scope.todoText = '';
  $scope.remaining = function() {
    var count = 0;
    angular.forEach($scope.todos, function(todo) {
      count += todo.done ? 0 : 1;
    return count;
  $scope.archive = function() {
    var oldTodos = $scope.todos;
    $scope.todos = [];
    angular.forEach(oldTodos, function(todo) {
      if (!todo.done) $scope.todos.push(todo);

Step 3: Save and fetch data

// Notice that chrome.storage.sync.get is asynchronous
chrome.storage.sync.get('todolist', function(value) {
  // The $apply is only necessary to execute the function inside Angular scope
  $scope.$apply(function() {

// If there is saved data in storage, use it. Otherwise, bootstrap with sample todos
$scope.load = function(value) {
  if (value && value.todolist) {
    $scope.todos = value.todolist;
  } else {
    $scope.todos = [
      {text:'learn angular', done:true},
      {text:'build an angular app', done:false}];

$scope.save = function() {
  chrome.storage.sync.set({'todolist': $scope.todos});
  • Update index.html to call save() whenever data changes.

Step 4: Manage app lifecycle

Let's change our app to save Todo items in storage only if the onRestarted event is fired.

  • Change main.js to listen for onRestarted event:
chrome.app.runtime.onLaunched.addListener(function() {
  // normal launch initiated by the user, let's start clean.

chrome.app.runtime.onRestarted.addListener(function() {
  // if restarted, try to get the transient saved state

function runApp(readInitialState) {
    {id: 'mainwindow', width: 500, height: 309},
    // the create callback gets a reference to the AppWindow obj 
    function(win) {
      // when the callback is executed, the DOM is loaded but no script was
      // loaded yet. So, let's attach to the load event.
      win.contentWindow.addEventListener('load', function() {
        if (readInitialState) {
        } else {
  • Update controller.js to only store a new Todo item when onRestarted event fired.

Step 5: Access resources from the web

Now we will change our app to render the content of URLs in a WebView when a user clicks on a link.

First, we need to follow these codelab instructions to add drag-and-dropped support.

<!-- in TODO item: -->
<a ng-show="todo.uri" href="" ng-click="showUri(todo.uri)">(view url)
<!-- at the bottom, below the end of body: -->
  • Set an appropriate width and height to the webview tag in todo.css:
webview {
  width: 100%;
  height: 200px;
$scope.showUri = function(uri) {
  var webview=document.querySelector("webview");

Step 6: Create multiple views

Create second view:

<html ng-app ng-csp>
    <script src="angular.min.js">
    <script src="droparea.js">
    <link rel="stylesheet" href="todo.css">
    <title>File Drop
  <body ng-controller="DropCtrl" ng-class="dropClass">
    <h2>Drop Area

Update JavaScript:

  {id: 'dropArea', width: 200, height: 200 },
  function(dropWin) {
    dropWin.contentWindow.$parentScope = $scope; 

Load, launch, and publishDescription

Load app:

  • Open the apps and extensions management page.
  • Load your app:
  • Launch app for the first time from the management page.
  • Now try launching the app from the app launcher.

Publish in Chrome Web Store:

  • Open the Chrome Web Store developer dashboard.
  • Compress your app:
  • Upload your app:
  • Add the required assets and meta information.
  • Publish your app:

Yay, we're done

From then on, when anything went wrong with a computer, we said it had bugs in it.
--Grace Hopper

What developers want

  • Ability to authenticate apps
  • Read the contents of a directory
  • Effective monetization and distribution
  • Cross-platform support
  • Clarity on what is a Chrome app (and what isn't it)
  • Better testing story
  • Cohestive understanding of storage options

What about mobile?

Cordova + Chrome

Doc improvements:

  • Integrate codelab in docs and cover both AngularJS and JavaScript.
  • Identify common use cases for windows and write 'how-tos'.
  • Improve documentation around app events and app lifecycle.

More feedback please: chromium-apps group

Tools and resources

<Thank You!>

Source: https://github.com/Meggin/devfestw

Public: http://chrome-apps-devfestw.appspot.com/#1