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 |