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 "app": { | 50 "app": { |
51 "background": { | 51 "background": { |
52 "scripts": ["background.js"] | 52 "scripts": ["background.js"] |
53 } | 53 } |
54 }, | 54 }, |
55 "icons": { "16": "calculator-16.png", "128": "calculator-128.png" } | 55 "icons": { "16": "calculator-16.png", "128": "calculator-128.png" } |
56 } | 56 } |
57 </pre> | 57 </pre> |
58 | 58 |
59 <p class="note"> | 59 <p class="note"> |
60 <b>Important:</b> | 60 <b>Important:</b> |
61 Chrome Apps <b>must</b> use | 61 Chrome Apps <b>must</b> use |
62 <a href="manifestVersion.html">manifest version 2</a>. | 62 <a href="manifestVersion">manifest version 2</a>. |
63 </p> | 63 </p> |
64 | 64 |
65 <h2 id="two">Step 2: Create the background script</h2> | 65 <h2 id="two">Step 2: Create the background script</h2> |
66 | 66 |
67 <p> | 67 <p> |
68 Next create a new file called <code>background.js</code> | 68 Next create a new file called <code>background.js</code> |
69 with the following content: | 69 with the following content: |
70 </p> | 70 </p> |
71 | 71 |
72 <pre data-filename="background.js"> | 72 <pre data-filename="background.js"> |
73 chrome.app.runtime.onLaunched.addListener(function() { | 73 chrome.app.runtime.onLaunched.addListener(function() { |
74 chrome.app.window.create('window.html', { | 74 chrome.app.window.create('window.html', { |
75 'bounds': { | 75 'bounds': { |
76 'width': 400, | 76 'width': 400, |
77 'height': 500 | 77 'height': 500 |
78 } | 78 } |
79 }); | 79 }); |
80 }); | 80 }); |
81 </pre> | 81 </pre> |
82 | 82 |
83 <p> | 83 <p> |
84 In the above sample code, | 84 In the above sample code, |
85 the <a href="app_lifecycle.html#lifecycle">onLaunched event</a> | 85 the <a href="app_lifecycle#lifecycle">onLaunched event</a> |
86 will be fired when the user starts the app. | 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
. | 87 It then immediately opens a window for the app of the specified width and height
. |
88 Your background script may contain additional listeners, | 88 Your background script may contain additional listeners, |
89 windows, post messages, and launch data, | 89 windows, post messages, and launch data, |
90 all of which are used by the event page to manage the app. | 90 all of which are used by the event page to manage the app. |
91 </p> | 91 </p> |
92 | 92 |
93 <h2 id="three">Step 3: Create a window page</h2> | 93 <h2 id="three">Step 3: Create a window page</h2> |
94 | 94 |
95 <p> | 95 <p> |
(...skipping 82 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
178 </li> | 178 </li> |
179 <li> | 179 <li> |
180 <code>--app-id=ajjhbohkjpincjgiieeomimlgnll</code> launches an app | 180 <code>--app-id=ajjhbohkjpincjgiieeomimlgnll</code> launches an app |
181 already loaded into Chrome. It does not restart any previously running | 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. | 182 app, but it does launch the new app with any updated content. |
183 </li> | 183 </li> |
184 </ul> | 184 </ul> |
185 </p> | 185 </p> |
186 | 186 |
187 <p class="backtotop"><a href="#top">Back to top</a></p> | 187 <p class="backtotop"><a href="#top">Back to top</a></p> |
OLD | NEW |