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">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/samples/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">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   "manifest_version": 2,
  51   "app": {
  52     "background": {
  53       "scripts": ["background.js"]
  54     }
  55   },
  56   "icons": { "16": "calculator-16.png", "128": "calculator-128.png" }
  57 }
  58 </pre>
  59
  60 <p class="note">
  61 <b>Important:</b>
  62 Chrome Apps <b>must</b> use
  63 <a href="manifestVersion">manifest version 2</a>.
  64 </p>
  65
  66 <h2 id="two">Step 2: Create the background script</h2>
  67
  68 <p>
  69 Next create a new file called <code>background.js</code>
  70 with the following content:
  71 </p>
  72
  73 <pre data-filename="background.js">
  74 chrome.app.runtime.onLaunched.addListener(function() {
  75   chrome.app.window.create('window.html', {
  76     'outerBounds': {
  77       'width': 400,
  78       'height': 500
  79     }
  80   });
  81 });
  82 </pre>
  83
  84 <p>
  85 In the above sample code,
  86 the <a href="app_lifecycle#lifecycle">onLaunched event</a>
  87 will be fired when the user starts the app.
  88 It then immediately opens a window for the app of the specified width and height.
  89 Your background script may contain additional listeners,
  90 windows, post messages, and launch data,
  91 all of which are used by the event page to manage the app.
  92 </p>
  93
  94 <h2 id="three">Step 3: Create a window page</h2>
  95
  96 <p>
  97 Create your <code>window.html</code> file:
  98 </p>
  99
 100 <pre data-filename="window.html">
 101 &lt;!DOCTYPE html>
 102 &lt;html>
 103   &lt;head>
 104   &lt;/head>
 105   &lt;body>
 106     &lt;div>Hello, world!&lt;/div>
 107   &lt;/body>
 108 &lt;/html>
 109 </pre>
 110
 111 <h2 id="four">Step 4: Create the icons</h2>
 112
 113 <p>
 114 Copy these icons to your app folder:
 115 </p>
 116
 117 <ul>
 118   <li><a href="{{static}}/images/calculator-16.png">calculator-16.png</a></li>
 119   <li><a href="{{static}}/images/calculator-128.png">calculator-128.png</a></li>
 120 </ul>
 121
 122 <h2 id="five">Step 5: Launch your app</h2>
 123
 124 <h3 id="enable">Enable flags</h3>
 125
 126 <p>
 127 Many of the Chrome Apps APIs are still experimental,
 128 so you should enable experimental APIs
 129 so that you can try them out:
 130 </p>
 131
 132 <ul>
 133   <li>Go to <b>chrome://flags</b>.</li>
 134   <li>Find "Experimental Extension APIs",
 135     and click its "Enable" link.</li>
 136   <li>Restart Chrome.</li>
 137 </ul>
 138
 139 <h3 id="load">Load your app</h3>
 140
 141 <p>
 142 To load your app,
 143 bring up the apps and extensions management page
 144 by clicking the settings icon
 145 <img src="{{static}}/images/hotdogmenu.png" width="29" height="29" alt=""
 146         style="margin-top:0" />
 147 and choosing <b>Tools > Extensions</b>.
 148 </p>
 149
 150 <p>
 151 Make sure the <b>Developer mode</b>
 152 checkbox has been selected.
 153 </p>
 154
 155 <p>
 156 Click the <b>Load unpacked extension</b> button,
 157 navigate to your app's folder
 158 and click <b>OK</b>.
 159 </p>
 160
 161 <h3 id="open">Open new tab and launch</h3>
 162
 163 <p>
 164 Once you've loaded your app,
 165 open a New Tab page
 166 and click on your new app icon.
 167 </p>
 168
 169 <h3 id="open">Or, load and launch from command line</h3>
 170
 171 <p>
 172 These command line options to Chrome may help you iterate:
 173 <ul>
 174   <li>
 175     <code>--load-and-launch-app=/path/to/app/</code>
 176     installs the unpacked application from the given path, and
 177     launches it. If the application is already running it is reloaded
 178     with the updated content.
 179   </li>
 180   <li>
 181     <code>--app-id=ajjhbohkjpincjgiieeomimlgnll</code> launches an app
 182     already loaded into Chrome. It does not restart any previously running
 183     app, but it does launch the new app with any updated content.
 184   </li>
 185 </ul>
 186 </p>
 187
 188 <p class="backtotop"><a href="#top">Back to top</a></p>