| OLD | NEW |
|---|
| (Empty) |
| 1 <h1 id="lab_2_work_with_code">Create Basic App</h1> | |
| 2 | |
| 3 <p>There are three core pieces to any Chrome App:</p> | |
| 4 | |
| 5 <ul> | |
| 6 <li>The manifest that describes meta-information about your application: | |
| 7 name, description, version number and how to launch your application</li> | |
| 8 <li>The background script, | |
| 9 which sets up how your application responds to system events | |
| 10 such as the user installing and launching the app and the system suspending it</
li> | |
| 11 <li>The view | |
| 12 (which is optional, but you normally need to show the user something)</li> | |
| 13 </ul> | |
| 14 | |
| 15 <p>Let's look at each of these components at their simplest level.</p> | |
| 16 | |
| 17 <p class="note"><b>Tip:</b> | |
| 18 If you use the Sublime Text editor with | |
| 19 <a href="http://www.youtube.com/watch?v=x_FTILqlbsg&hd=1">our plugin</a>, | |
| 20 you can create these three files with a click (Chrome -> New App -> Hello
World). | |
| 21 </p> | |
| 22 | |
| 23 <h2 id="manifest">Create manifest</h2> | |
| 24 | |
| 25 <p>In an empty directory (let's call it <code><myappdir></code>), | |
| 26 create the manifest file: <a href="https://github.com/GoogleChrome/chrome-app-co
delab/blob/master/lab2_basic/manifest.json">manifest.json</a> | |
| 27 </p> | |
| 28 | |
| 29 <pre data-filename="manifest.json"> | |
| 30 { | |
| 31 "manifest_version": 2, | |
| 32 "name": "My first app", | |
| 33 "version": "1", | |
| 34 "app": { | |
| 35 "background": { | |
| 36 "scripts": ["main.js"] | |
| 37 } | |
| 38 } | |
| 39 } | |
| 40 </pre> | |
| 41 | |
| 42 <h2 id="background">Create background script</h2> | |
| 43 | |
| 44 <p>In the same directory, | |
| 45 create the background script: <a href="https://github.com/GoogleChrome/chrome-ap
p-codelab/blob/master/lab2_basic/main.js">main.js</a> | |
| 46 | |
| 47 <pre data-filename="main.js"> | |
| 48 chrome.app.runtime.onLaunched.addListener(function() { | |
| 49 chrome.app.window.create('index.html', { | |
| 50 bounds: { | |
| 51 width: 500, | |
| 52 height: 309 | |
| 53 } | |
| 54 }); | |
| 55 }); | |
| 56 </pre> | |
| 57 | |
| 58 <h2 id="view">Create view</h2> | |
| 59 | |
| 60 <p>Create the user interface: <a href="https://github.com/GoogleChrome/chrome-ap
p-codelab/blob/master/lab2_basic/index.html">index.html</a> | |
| 61 | |
| 62 <pre data-filename="index.html"> | |
| 63 <html> | |
| 64 <head> | |
| 65 <meta charset="utf-8"> | |
| 66 <title>Hello World</title> | |
| 67 </head> | |
| 68 <body> | |
| 69 <h1>Hello, World!</h1> | |
| 70 </body> | |
| 71 </html> | |
| 72 </pre> | |
| 73 | |
| 74 <h2 id="install">Install and execute sample app</h2> | |
| 75 | |
| 76 <ul> | |
| 77 <li>Go to <code>chrome://extensions</code>.</li> | |
| 78 <li>Load unpacked extension...</li> | |
| 79 <li>Select the <code><myappdir></code> directory.</li> | |
| 80 <li>Open a new Chrome tab.</li> | |
| 81 <li>Click on the "My First App" icon.</li> | |
| 82 </ul> | |
| 83 | |
| 84 <h2 id="debug_fix_and_reload_app">Debug, fix, and reload</h2> | |
| 85 | |
| 86 <p class="note"><b>Tip:</b> | |
| 87 If you have enabled Developer mode in <code>chrome://extensions</code>, | |
| 88 your apps can be inspected and debugged using the Chrome Developer Tools. | |
| 89 Just like any standard web page, right-click on page and select Inspect Element. | |
| 90 For the background page which doesn't have UI, | |
| 91 you can either right-click on any app window and | |
| 92 select <code>Inspect Background Page</code> or | |
| 93 go to <code>chrome://extensions</code> and click on Inspect Views...</p> | |
| 94 | |
| 95 <ol> | |
| 96 <li><p>Change the text "Hello world" | |
| 97 to "My first app" in index.html.</p></li> | |
| 98 <li><p>Change the | |
| 99 <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab2_bas
ic/main.js">main.js</a> background script to create two windows instead of one. | |
| 100 Don't bother to create another html. | |
| 101 For now, you can open index.html on both.</p></li> | |
| 102 <li><p>After changing code, | |
| 103 right-click on your app and select Reload App to reload the changed files. | |
| 104 All Developer Tools windows will be reopened when you reload your app.</p></li> | |
| 105 <li><p>Launch the app in a new tab page. | |
| 106 Move the top window and you will see the second window behind it.</p></li> | |
| 107 </ol> | |
| 108 | |
| 109 <h2 id="takeaways">Takeaways</h2> | |
| 110 | |
| 111 <ul> | |
| 112 <li>Chrome Apps have three basic pieces. | |
| 113 The first and foremost is the manifest, which describes your app, | |
| 114 requests special permissions, defines important meta information and much more. | |
| 115 The second part is the background script, | |
| 116 which contains all logic not tied to a specific user interface. | |
| 117 The last part is the user interface: HTML, CSS, JavaScripts related to the inter
face, images, etc.</li> | |
| 118 <li>Chrome Apps can be debugged just like standard web pages | |
| 119 using the Chrome Developer Tools. | |
| 120 But since an app doesn't have the Reload control of a browser, | |
| 121 a Reload App option has been added when you run in Developer mode.</li> | |
| 122 </ul> | |
| 123 | |
| 124 <h2 id="you_should_also_read">You should also read</h2> | |
| 125 | |
| 126 <ul> | |
| 127 <li><a href="first_app">Create Your First App</a> tutorial</li> | |
| 128 <li><a href="app.runtime">chrome.app.runtime</a> reference</li> | |
| 129 <li><a href="app.window">chrome.app.window</a> reference</li> | |
| 130 </ul> | |
| 131 | |
| 132 <h2 id="what_39_s_next_">What's next?</h2> | |
| 133 | |
| 134 <p>In <a href="app_codelab3_mvc">3 - Create MVC</a>, | |
| 135 you will use either pure JavaScript or | |
| 136 <a href="http://angularjs.org/">AngluarJS</a> | |
| 137 to build your app's model, view, and controller.</p> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 609433003:
Updated Chrome Apps codelab from I/O 2013
Base URL: https://chromium.googlesource.com/chromium/src.git@master