| OLD | NEW |
| 1 <meta name="doc-family" content="apps"> | 1 <meta name="doc-family" content="apps"> |
| 2 <h1>Create Your First App</h1> | 2 <h1>Create Your First App</h1> |
| 3 | 3 |
| 4 | 4 |
| 5 <p> | 5 <p> |
| 6 This tutorial walks you through creating your first Chrome App. | 6 This tutorial walks you through creating your first Chrome App. |
| 7 Chrome Apps are structured similarly to extensions | 7 Chrome Apps are structured similarly to extensions |
| 8 so current developers will recognize the manifest and packaging methods. | 8 so current developers will recognize the manifest and packaging methods. |
| 9 When you're done, | 9 When you're done, |
| 10 you'll just need to produce a zip file of your code and assets | 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. | 11 in order to <a href="publish_app">publish</a> your app. |
| 12 </p> | 12 </p> |
| 13 | 13 |
| 14 <p> | 14 <p> |
| 15 A Chrome App contains these components: | 15 A Chrome App contains these components: |
| 16 </p> | 16 </p> |
| 17 | 17 |
| 18 <ul> | 18 <ul> |
| 19 <li>The <strong>manifest</strong> tells Chrome about your app, what it is, | 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> | 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 | 21 <li>The <strong>background script</strong> is used to create the event page |
| 22 responsible for managing the app life cycle.</li> | 22 responsible for managing the app life cycle.</li> |
| 23 <li>All code must be included in the Chrome App package. This includes HTML, J
S, CSS | 23 <li>All code must be included in the Chrome App package. This includes HTML, J
S, CSS |
| 24 and Native Client modules.</li> | 24 and Native Client modules.</li> |
| 25 <li>All <strong>icons</strong> and other assets must be included | 25 <li>All <strong>icons</strong> and other assets must be included |
| 26 in the package as well.</li> | 26 in the package as well.</li> |
| 27 </ul> | 27 </ul> |
| 28 | 28 |
| 29 <p class="note"> | 29 <p class="note"> |
| 30 <b>API Samples: </b> | 30 <b>API Samples: </b> |
| 31 Want to play with the code? | 31 Want to play with the code? |
| 32 Check out the | 32 Check out the |
| 33 <a href="https://github.com/GoogleChrome/chrome-app-samples/tree/master/hello-wo
rld">hello-world</a> | 33 <a href="https://github.com/GoogleChrome/chrome-app-samples/tree/master/hello-wo
rld">hello-world</a> |
| 34 sample. | 34 sample. |
| 35 </p> | 35 </p> |
| 36 | 36 |
| 37 <h2 id="one">Step 1: Create the manifest</h2> | 37 <h2 id="one">Step 1: Create the manifest</h2> |
| 38 | 38 |
| 39 <p> | 39 <p> |
| 40 First create your <code>manifest.json</code> file | 40 First create your <code>manifest.json</code> file |
| 41 (<a href="manifest.html">Formats: Manifest Files</a> | 41 (<a href="manifest">Formats: Manifest Files</a> |
| 42 describes this manifest in detail): | 42 describes this manifest in detail): |
| 43 </p> | 43 </p> |
| 44 | 44 |
| 45 <pre data-filename="manifest.json"> | 45 <pre data-filename="manifest.json"> |
| 46 { | 46 { |
| 47 "name": "Hello World!", | 47 "name": "Hello World!", |
| 48 "description": "My first Chrome App.", | 48 "description": "My first Chrome App.", |
| 49 "version": "0.1", | 49 "version": "0.1", |
| 50 "manifest_version": 2, | 50 "manifest_version": 2, |
| 51 "app": { | 51 "app": { |
| 52 "background": { | 52 "background": { |
| 53 "scripts": ["background.js"] | 53 "scripts": ["background.js"] |
| 54 } | 54 } |
| 55 }, | 55 }, |
| 56 "icons": { "16": "calculator-16.png", "128": "calculator-128.png" } | 56 "icons": { "16": "calculator-16.png", "128": "calculator-128.png" } |
| 57 } | 57 } |
| 58 </pre> | 58 </pre> |
| 59 | 59 |
| 60 <p class="note"> | 60 <p class="note"> |
| 61 <b>Important:</b> | 61 <b>Important:</b> |
| 62 Chrome Apps <b>must</b> use | 62 Chrome Apps <b>must</b> use |
| 63 <a href="manifestVersion.html">manifest version 2</a>. | 63 <a href="manifestVersion">manifest version 2</a>. |
| 64 </p> | 64 </p> |
| 65 | 65 |
| 66 <h2 id="two">Step 2: Create the background script</h2> | 66 <h2 id="two">Step 2: Create the background script</h2> |
| 67 | 67 |
| 68 <p> | 68 <p> |
| 69 Next create a new file called <code>background.js</code> | 69 Next create a new file called <code>background.js</code> |
| 70 with the following content: | 70 with the following content: |
| 71 </p> | 71 </p> |
| 72 | 72 |
| 73 <pre data-filename="background.js"> | 73 <pre data-filename="background.js"> |
| 74 chrome.app.runtime.onLaunched.addListener(function() { | 74 chrome.app.runtime.onLaunched.addListener(function() { |
| 75 chrome.app.window.create('window.html', { | 75 chrome.app.window.create('window.html', { |
| 76 'bounds': { | 76 'bounds': { |
| 77 'width': 400, | 77 'width': 400, |
| 78 'height': 500 | 78 'height': 500 |
| 79 } | 79 } |
| 80 }); | 80 }); |
| 81 }); | 81 }); |
| 82 </pre> | 82 </pre> |
| 83 | 83 |
| 84 <p> | 84 <p> |
| 85 In the above sample code, | 85 In the above sample code, |
| 86 the <a href="app_lifecycle.html#lifecycle">onLaunched event</a> | 86 the <a href="app_lifecycle#lifecycle">onLaunched event</a> |
| 87 will be fired when the user starts the app. | 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
. | 88 It then immediately opens a window for the app of the specified width and height
. |
| 89 Your background script may contain additional listeners, | 89 Your background script may contain additional listeners, |
| 90 windows, post messages, and launch data, | 90 windows, post messages, and launch data, |
| 91 all of which are used by the event page to manage the app. | 91 all of which are used by the event page to manage the app. |
| 92 </p> | 92 </p> |
| 93 | 93 |
| 94 <h2 id="three">Step 3: Create a window page</h2> | 94 <h2 id="three">Step 3: Create a window page</h2> |
| 95 | 95 |
| 96 <p> | 96 <p> |
| (...skipping 82 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 179 </li> | 179 </li> |
| 180 <li> | 180 <li> |
| 181 <code>--app-id=ajjhbohkjpincjgiieeomimlgnll</code> launches an app | 181 <code>--app-id=ajjhbohkjpincjgiieeomimlgnll</code> launches an app |
| 182 already loaded into Chrome. It does not restart any previously running | 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. | 183 app, but it does launch the new app with any updated content. |
| 184 </li> | 184 </li> |
| 185 </ul> | 185 </ul> |
| 186 </p> | 186 </p> |
| 187 | 187 |
| 188 <p class="backtotop"><a href="#top">Back to top</a></p> | 188 <p class="backtotop"><a href="#top">Back to top</a></p> |
| OLD | NEW |