| <meta name="doc-family" content="apps"> |
| <h1>Create Your First App</h1> |
| |
| |
| <p> |
| 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 <a href="publish_app">publish</a> your app. |
| </p> |
| |
| <p> |
| A Chrome App contains these components: |
| </p> |
| |
| <ul> |
| <li>The <strong>manifest</strong> tells Chrome about your app, what it is, |
| how to launch it and the extra permissions that it requires.</li> |
| <li>The <strong>background script</strong> is used to create the event page |
| responsible for managing the app life cycle.</li> |
| <li>All code must be included in the Chrome App package. This includes HTML, JS, CSS |
| and Native Client modules.</li> |
| <li>All <strong>icons</strong> and other assets must be included |
| in the package as well.</li> |
| </ul> |
| |
| <p class="note"> |
| <b>API Samples: </b> |
| Want to play with the code? |
| Check out the |
| <a href="https://github.com/GoogleChrome/chrome-app-samples/tree/master/hello-world">hello-world</a> |
| sample. |
| </p> |
| |
| <h2 id="one">Step 1: Create the manifest</h2> |
| |
| <p> |
| First create your <code>manifest.json</code> file |
| (<a href="manifest">Formats: Manifest Files</a> |
| describes this manifest in detail): |
| </p> |
| |
| <pre data-filename="manifest.json"> |
| { |
| "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" } |
| } |
| </pre> |
| |
| <p class="note"> |
| <b>Important:</b> |
| Chrome Apps <b>must</b> use |
| <a href="manifestVersion">manifest version 2</a>. |
| </p> |
| |
| <h2 id="two">Step 2: Create the background script</h2> |
| |
| <p> |
| Next create a new file called <code>background.js</code> |
| with the following content: |
| </p> |
| |
| <pre data-filename="background.js"> |
| chrome.app.runtime.onLaunched.addListener(function() { |
| chrome.app.window.create('window.html', { |
| 'bounds': { |
| 'width': 400, |
| 'height': 500 |
| } |
| }); |
| }); |
| </pre> |
| |
| <p> |
| In the above sample code, |
| the <a href="app_lifecycle#lifecycle">onLaunched event</a> |
| 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. |
| </p> |
| |
| <h2 id="three">Step 3: Create a window page</h2> |
| |
| <p> |
| Create your <code>window.html</code> file: |
| </p> |
| |
| <pre data-filename="window.html"> |
| <!DOCTYPE html> |
| <html> |
| <head> |
| </head> |
| <body> |
| <div>Hello, world!</div> |
| </body> |
| </html> |
| </pre> |
| |
| <h2 id="four">Step 4: Create the icons</h2> |
| |
| <p> |
| Copy these icons to your app folder: |
| </p> |
| |
| <ul> |
| <li><a href="{{static}}/images/calculator-16.png">calculator-16.png</a></li> |
| <li><a href="{{static}}/images/calculator-128.png">calculator-128.png</a></li> |
| </ul> |
| |
| <h2 id="five">Step 5: Launch your app</h2> |
| |
| <h3 id="enable">Enable flags</h3> |
| |
| <p> |
| Many of the Chrome Apps APIs are still experimental, |
| so you should enable experimental APIs |
| so that you can try them out: |
| </p> |
| |
| <ul> |
| <li>Go to <b>chrome://flags</b>.</li> |
| <li>Find "Experimental Extension APIs", |
| and click its "Enable" link.</li> |
| <li>Restart Chrome.</li> |
| </ul> |
| |
| <h3 id="load">Load your app</h3> |
| |
| <p> |
| To load your app, |
| bring up the apps and extensions management page |
| by clicking the settings icon |
| <img src="{{static}}/images/hotdogmenu.png" width="29" height="29" alt="" |
| style="margin-top:0" /> |
| and choosing <b>Tools > Extensions</b>. |
| </p> |
| |
| <p> |
| Make sure the <b>Developer mode</b> |
| checkbox has been selected. |
| </p> |
| |
| <p> |
| Click the <b>Load unpacked extension</b> button, |
| navigate to your app's folder |
| and click <b>OK</b>. |
| </p> |
| |
| <h3 id="open">Open new tab and launch</h3> |
| |
| <p> |
| Once you've loaded your app, |
| open a New Tab page |
| and click on your new app icon. |
| </p> |
| |
| <h3 id="open">Or, load and launch from command line</h3> |
| |
| <p> |
| These command line options to Chrome may help you iterate: |
| <ul> |
| <li> |
| <code>--load-and-launch-app=/path/to/app/</code> |
| installs the unpacked application from the given path, and |
| launches it. If the application is already running it is reloaded |
| with the updated content. |
| </li> |
| <li> |
| <code>--app-id=ajjhbohkjpincjgiieeomimlgnll</code> launches an app |
| already loaded into Chrome. It does not restart any previously running |
| app, but it does launch the new app with any updated content. |
| </li> |
| </ul> |
| </p> |
| |
| <p class="backtotop"><a href="#top">Back to top</a></p> |