Chromium Code Reviews Chromium Code Reviews
Issue 12221067:
Move Chrome Apps Codelab docs to developer.chrome.com (Closed)
Base URL: svn://svn.chromium.org/chrome/trunk/src| OLD | NEW |
|---|---|
| (Empty) | |
| 1 <h1 id="lab_2_work_with_code">Lab 2 - Work with code</h1> | |
| 2 | |
| 3 <h2 id="create_your_first_chrome_app">Create your first Chrome app</h2> | |
| 4 | |
| 5 <p>There are three core pieces to any Chrome app:</p> | |
| 6 | |
| 7 <ul> | |
| 8 <li>The manifest that descibes meta-information about your applicaiton: name, de scription, version number and how to launch your app</li> | |
| 9 <li>The background script which sets up how your application responds to system events such as the user installing your app, the user launching your app and the system suspending your app</li> | |
| 10 <li>The view (which is optional, but you normally need to show the user somethin g)</li> | |
| 11 </ul> | |
| 12 | |
| 13 <p>Lets look at each of these components at their simplest level. </p> | |
|
mkearney1
2013/02/12 22:22:11
"Lets" should be "Let's". Missing '.
Renato Mangini (chromium)
2013/02/13 22:55:33
Done.
| |
| 14 | |
| 15 <ol> | |
| 16 <li><p>In an empty directory (let's call it <myappdir>), create three files:</p> | |
| 17 | |
| 18 <ul> | |
| 19 <li><p>Manifest: <a href="https://github.com/GoogleChrome/chrome-app-codelab/blo b/master/lab2_basic/manifest.json">manifest.json</a></p> | |
| 20 | |
| 21 <p><pre>json | |
| 22 { | |
| 23 "manifest_version": 2, | |
| 24 "name": "My first app", | |
| 25 "version": "1", | |
| 26 "app": { | |
| 27 "background": { | |
| 28 "scripts": ["main.js"] | |
| 29 } | |
| 30 } | |
| 31 } | |
| 32 </pre></p></li> | |
| 33 <li><p>Background script: <a href="https://github.com/GoogleChrome/chrome-app-co delab/blob/master/lab2_basic/main.js">main.js</a> | |
| 34 <pre> | |
| 35 chrome.app.runtime.onLaunched.addListener(function() { | |
| 36 chrome.app.window.create('index.html', | |
| 37 {width: 500, height: 309}); | |
| 38 }); | |
| 39 </pre></p></li> | |
| 40 <li><p>User interface: <a href="https://github.com/GoogleChrome/chrome-app-codel ab/blob/master/lab2_basic/index.html">index.html</a> | |
| 41 <pre> | |
| 42 <html> | |
| 43 <head> | |
| 44 <meta charset="utf-8"> | |
| 45 <title>Hello World</title> | |
| 46 </head> | |
| 47 <body> | |
| 48 <h1>Hello, World!</h1> | |
| 49 </body> | |
| 50 </html> | |
| 51 </pre></p></li> | |
| 52 </ul></li> | |
| 53 <li><p>Install and execute your sample app: </p> | |
| 54 | |
| 55 <ul> | |
| 56 <li>Go to chrome://extensions.</li> | |
| 57 <li>Load unpacked extension...</li> | |
| 58 <li>Select the <myappdir> directory.</li> | |
| 59 <li>Open a new Chrome tab.</li> | |
| 60 <li>Click on the "My First App" icon.</li> | |
| 61 </ul></li> | |
| 62 </ol> | |
| 63 | |
| 64 <h2 id="you_should_also_read">You should also read</h2> | |
| 65 | |
| 66 <ul> | |
| 67 <li><a href="http://developer.chrome.com/trunk/apps/first_app.html">Create Your First App</a></li> | |
| 68 <li><a href="http://developer.chrome.com/trunk/apps/app.runtime.html">chrome.app .runtime</a></li> | |
| 69 <li><a href="http://developer.chrome.com/trunk/apps/app.window.html">chrome.app. window</a></li> | |
| 70 </ul> | |
| 71 | |
| 72 <h2 id="debug_fix_and_reload_app_">Debug, fix, and reload app.</h2> | |
|
mkearney1
2013/02/12 22:22:11
Remove full-stop from header.
Renato Mangini (chromium)
2013/02/13 22:55:33
Done.
mkearney1
2013/02/13 23:17:57
Full-stop still appearing (Debug, fix, and reload
Renato Mangini (chromium)
2013/02/14 15:45:27
sorry, this got lost when I converted back from (.
| |
| 73 | |
| 74 <p class="note"><b>Tip:</b> If you have enabled Developer mode in chrome://exte nsions, your apps can be inspected and debugged using the Chrome Developer Tools just like any standard web page:</p> | |
| 75 | |
| 76 <ul> | |
| 77 <li><p>Right-click on page, select Inspect Element.</p></li> | |
| 78 <li><p>For the background page which doesn't have UI, you can go to chrome:/ /extensions and click on Inspect Views...</p></li> | |
| 79 </ul></p> | |
| 80 | |
| 81 <ol> | |
| 82 <li><p>Change the text "Hello world" to "My first app" in in dex.html.</p></li> | |
| 83 <li><p>Change the main.js background script to create two windows instead of one . Don't bother to create another html. For now, you can open index.html on b oth.</p></li> | |
|
mkearney1
2013/02/12 22:22:11
Link to main.js file here (a second time).
Renato Mangini (chromium)
2013/02/13 22:55:33
Done.
| |
| 84 <li><p>After changing code, right-click on your app and select Reload App to rel oad the changed files. All Developer Tools windows will be reopened when you rel oad your app.</p></li> | |
| 85 <li><p>Launch the app in a new tab page. Move the top window and you will see th e second window behind it. </p></li> | |
| 86 </ol> | |
| 87 | |
| 88 <h1 id="takeaways">Takeaways</h1> | |
| 89 | |
| 90 <ul> | |
| 91 <li>Chrome apps have three basic pieces. The first and foremost is the manifest. json, which describes your app, requests special permissions, defines important meta information and much more. The second part is the background script, which contains all logic not tied to a specific user interface. The last part is the u ser interface: HTML, CSS, JavaScripts related to the interface, images, etc.</li > | |
| 92 <li>Chrome apps can be debugged just like standard web pages using the Chrome De veloper Tools. But since an app doesn't have the Reload control of a browser , a Reload App option has been added when you run in Developer mode.</li> | |
| 93 </ul> | |
| 94 | |
| 95 <h1 id="what_39_s_next_">What's next?</h1> | |
| 96 | |
| 97 <p>In <a href="app_codelab3_mvc.html">lab3_mvc</a>, | |
| 98 you will use the <a href="http://angularjs.org/">AngluarJS framework</a> to buil d your app.</p> | |
| OLD | NEW |
