chrome/common/extensions/docs/templates/articles/first_app.html

   1 <meta name="doc-family" content="apps">
   2 <h1>Create Your First App</h1>
   3
   4
   5 <p>
   6 This tutorial walks you through creating your first Chrome App.
   7 Chrome Apps are structured similarly to extensions
   8 so current developers will recognize the manifest and packaging methods.
   9 When you're done,
  10 you'll just need to produce a zip file of your code and assets
  11 in order to <a href="publish_app.html">publish</a> your app.
  12 </p>
  13
  14 <p>
  15 A Chrome App contains these components:
  16 </p>
  17
  18 <ul>
  19   <li>The <strong>manifest</strong> tells Chrome about your app, what it is,
  20     how to launch it and the extra permissions that it requires.</li>
  21   <li>The <strong>background script</strong> is used to create the event page
  22     responsible for managing the app life cycle.</li>
  23   <li>All code must be included in the Chrome App package. This includes HTML, JS, CSS
  24     and Native Client modules.</li>
  25   <li>All <strong>icons</strong> and other assets must be included
  26     in the package as well.</li>
  27 </ul>
  28
  29 <p class="note">
  30 <b>API Samples: </b>
  31 Want to play with the code?
  32 Check out the
  33 <a href="https://github.com/GoogleChrome/chrome-app-samples/tree/master/hello-world">hello-world</a>
  34 sample.
  35 </p>
  36
  37 <h2 id="one">Step 1: Create the manifest</h2>
  38
  39 <p>
  40 First create your <code>manifest.json</code> file
  41 (<a href="manifest.html">Formats: Manifest Files</a>
  42 describes this manifest in detail):
  43 </p>
  44
  45 <pre data-filename="manifest.json">
  46 {
  47   "name": "Hello World!",
  48   "description": "My first Chrome App.",
  49   "version": "0.1",
  50   "app": {
  51     "background": {
  52       "scripts": ["background.js"]
  53     }
  54   },
  55   "icons": { "16": "calculator-16.png", "128": "calculator-128.png" }
  56 }
  57 </pre>
  58
  59 <p class="note">
  60 <b>Important:</b>
  61 Chrome Apps <b>must</b> use
  62 <a href="manifestVersion.html">manifest version 2</a>.
  63 </p>
  64
  65 <h2 id="two">Step 2: Create the background script</h2>
  66
  67 <p>
  68 Next create a new file called <code>background.js</code>
  69 with the following content:
  70 </p>
  71
  72 <pre data-filename="background.js">
  73 chrome.app.runtime.onLaunched.addListener(function() {
  74   chrome.app.window.create('window.html', {
  75     'bounds': {
  76       'width': 400,
  77       'height': 500
  78     }
  79   });
  80 });
  81 </pre>
  82
  83 <p>
  84 In the above sample code,
  85 the <a href="app_lifecycle.html#lifecycle">onLaunched event</a>
  86 will be fired when the user starts the app.
  87 It then immediately opens a window for the app of the specified width and height.
  88 Your background script may contain additional listeners,
  89 windows, post messages, and launch data,
  90 all of which are used by the event page to manage the app.
  91 </p>
  92
  93 <h2 id="three">Step 3: Create a window page</h2>
  94
  95 <p>
  96 Create your <code>window.html</code> file:
  97 </p>
  98
  99 <pre data-filename="window.html">
 100 &lt;!DOCTYPE html>
 101 &lt;html>
 102   &lt;head>
 103   &lt;/head>
 104   &lt;body>
 105     &lt;div>Hello, world!&lt;/div>
 106   &lt;/body>
 107 &lt;/html>
 108 </pre>
 109
 110 <h2 id="four">Step 4: Create the icons</h2>
 111
 112 <p>
 113 Copy these icons to your app folder:
 114 </p>
 115
 116 <ul>
 117   <li><a href="{{static}}/images/calculator-16.png">calculator-16.png</a></li>
 118   <li><a href="{{static}}/images/calculator-128.png">calculator-128.png</a></li>
 119 </ul>
 120
 121 <h2 id="five">Step 5: Launch your app</h2>
 122
 123 <h3 id="enable">Enable flags</h3>
 124
 125 <p>
 126 Many of the Chrome Apps APIs are still experimental,
 127 so you should enable experimental APIs
 128 so that you can try them out:
 129 </p>
 130
 131 <ul>
 132   <li>Go to <b>chrome://flags</b>.</li>
 133   <li>Find "Experimental Extension APIs",
 134     and click its "Enable" link.</li>
 135   <li>Restart Chrome.</li>
 136 </ul>
 137
 138 <h3 id="load">Load your app</h3>
 139
 140 <p>
 141 To load your app,
 142 bring up the apps and extensions management page
 143 by clicking the settings icon
 144 <img src="{{static}}/images/hotdogmenu.png" width="29" height="29" alt=""
 145         style="margin-top:0" />
 146 and choosing <b>Tools > Extensions</b>.
 147 </p>
 148
 149 <p>
 150 Make sure the <b>Developer mode</b>
 151 checkbox has been selected.
 152 </p>
 153
 154 <p>
 155 Click the <b>Load unpacked extension</b> button,
 156 navigate to your app's folder
 157 and click <b>OK</b>.
 158 </p>
 159
 160 <h3 id="open">Open new tab and launch</h3>
 161
 162 <p>
 163 Once you've loaded your app,
 164 open a New Tab page
 165 and click on your new app icon.
 166 </p>
 167
 168 <h3 id="open">Or, load and launch from command line</h3>
 169
 170 <p>
 171 These command line options to Chrome may help you iterate:
 172 <ul>
 173   <li>
 174     <code>--load-and-launch-app=/path/to/app/</code>
 175     installs the unpacked application from the given path, and
 176     launches it. If the application is already running it is reloaded
 177     with the updated content.
 178   </li>
 179   <li>
 180     <code>--app-id=ajjhbohkjpincjgiieeomimlgnll</code> launches an app
 181     already loaded into Chrome. It does not restart any previously running
 182     app, but it does launch the new app with any updated content.
 183   </li>
 184 </ul>
 185 </p>
 186
 187 <p class="backtotop"><a href="#top">Back to top</a></p>