Home » Uncategorized » Quick Tip: Make a Chrome App Shortcut For Any Web App

Quick Tip: Make a Chrome App Shortcut For Any Web App

more

Create Your First App

This tutorial walks you through creating your first Chrome App. Chrome Apps are structured similarly to extensions so current developers will recognize the manifest and packaging methods. When you’re done, you’ll just need to produce a zip file of your code and assets in order to publish your app.

A Chrome App contains these components:

  • The manifest tells Chrome about your app, what it is, how to launch it and the extra permissions that it requires.
  • The background script is used to create the event page responsible for managing the app life cycle.
  • All code must be included in the Chrome App package. This includes HTML, JS, CSS and Native Client modules.
  • All icons and other assets must be included in the package as well.

API Samples: Want to play with the code? Check out the hello-world sample.

First create your manifest.json file (Formats: Manifest Files describes this manifest in detail):

{
  "name": "Hello World!",
  "description": "My first Chrome App.",
  "version": "0.1",
  "manifest_version": 2,
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  },
  "icons": { "16": "calculator-16.png", "128": "calculator-128.png" }
}

Important: Chrome Apps must use manifest version 2.

Next create a new file called background.js with the following content:

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('window.html', {
    'outerBounds': {
      'width': 400,
      'height': 500
    }
  });
});

In the above sample code, the onLaunched event will be fired when the user starts the app. It then immediately opens a window for the app of the specified width and height. Your background script may contain additional listeners, windows, post messages, and launch data, all of which are used by the event page to manage the app.

Create your window.html file:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <bodyhttps://developer.chrome.com/apps/first_app
Uncategorized