Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(184)

Side by Side Diff: chrome/common/extensions/docs/templates/articles/first_app.html

Issue 219213007: Remove .html extension from links (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 6 years, 7 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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
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>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698