Tutorial: Create a Chrome app

This article is for Chrome administrators and developers with experience developing Chrome web apps. Chromebook for Education apps

Many schools and businesses want to be able to create bookmark apps such as an app pointing to their school calendar or HR website, and pre-install these apps on their students' computers.

Currently, in the Chrome settings page, you can specify the Home Page URL and Pages to Load on Startup. However, if you want to preinstall bookmark apps so that they appear for your users when they open a new tab in Chrome, follow the steps below.

You will need to own the site you're linking to and have it verified in your Google Webmaster Tools in order to link to it in a Chrome web app.

Step 1. Build your app

  1. Create your app as a manifest.json file. You can do this in a text editor like Notepad on Windows or TextMate on Mac creating a .txt file, and saving it as manifest.json. Save the file in a folder on your desktop. Title the folder the name of your app.
Sample manifest.json file for a bookmark app:
{
"manifest_version": 2,
"name": "Google Apps Certification app",
"description": "Link to Google Apps Certification website",
"version": "1.1",
"icons": {
"128": "128.png"
},
"app": {
"urls": [
"http://certification.googleapps.com/app-info/"
],
"launch": {
"web_url": "http://certification.googleapps.com/"
}
},
"permissions": [
"unlimitedStorage",
"notifications"
]
}
  1. Create a 128px by 128px logo for your app. Name the file 128.png and put it in the same folder as the manifest.json file.
  2. Host your the JSON file and logo on App Engine or your own web server.
    • For example, you can host your file on a site Google Site, corporate web server, or App Engine. Note that App Engine hosting is free for Google Apps for Business, Government, and Education users as long as you stay below their usage quotas.

Step 2. Test your app

  1. Open Chrome and go to Chrome menu > Tools > Extensions.
  2. Click Developer mode > Load unpacked extensions...
  3. Browse to and Select the folder where your manifest.json file is and logo.
    • If your file doesn't immediately load, check to make sure the JSON code is formatted correctly with the JSON Validator.
  4. Open a new tab in Chrome to see if your app loads and functions correctly. If not, tweak it and test it until it's working correctly in your browser.

Step 3. Pack your app

  1. When your app is ready, go to Tools > Extensions in Chrome and click Pack extension...
  2. Select the folder on your desktop that contains the manifest.json file. Entering a private key is optional.
  3. Click Pack Extension. You will receive a confirmation window, telling you to keep the .pem file safe and not to delete it.
  4. Put the .crx file that's saved on your desktop in the same folder where you have the manifest.json file. (crx is a type of .zip file)
  5. Uninstall the unpacked version of the Chrome app so it won't conflict with the packed app.
  6. Drag and drop the new .crx file into Chrome browser to install the packed app.

Step 4. Find app ID

  1. Download the Chrome ID Finder extension to get your app's ID. Currently, the only way to get your app's ID is by clicking this link to install the Chrome ID Finder extension on your Chrome browser.
  2. Click the puzzle piece extension icon in the top-right of your browser to launch the extension. This opens a new page that lists the Chrome apps you have installed and their app ID. Copy and paste the ID for your app.
  3. Create an auto-update.xml file like the one below and upload it to your hosting location. This ensures that your URL app will be updated if you create a new version.
  4. Insert the app ID and location of where you want to store the packed app, such as in App Engine, Google Sites, or your server.
Sample xml auto-update file:
<?xml version='1.0' encoding='UTF-8'?>
<gupdate xmlns='http://www.google.com/update2/response' protocol='2.0'>
 <app appid='odomlgbibdfgoclgndddglpfhjkmapkj'>
   <updatecheck codebase='https://sites.google.com/a/googleapps.com/deployment-specialist/Home/app-info/google-apps-certification.crx' version='1.2' />
 </app>
</gupdate>

Save this file as auto-update.xml. You can use a program like TextMate or Adobe Dreamweaver to make the .xml file.

  1. Put the .crx file and .xml file in your app folder. Upload this folder to your hosting location.

Step 5. Publish your app

You have 2 options: you can publish your app publicly or privately. Either way, once you publish it, you can then pre-install and recommend the app to your users. Learn more about publishing Chrome web apps.

Publish your app publicly:

When your app is ready, upload it to the Chrome Developer Dashboard. Before your app is published, you will need to add additional product images, as explained in the Developer Dashboard.

Publish your app privately:

Follow these steps to publish your app in a private collection. You will first need to create a private collection for your organization.