| OLD | NEW |
|---|
| (Empty) | |
| 1 <meta name="doc-family" content="apps"> |
| 2 <h1 class="page_title">Create Your First App</h1> |
| 3 <p> |
| 4 This tutorial walks you through creating your first packaged app. |
| 5 Packaged apps are structured similarly to extensions |
| 6 so current developers will recognize the manifest and packaging methods. |
| 7 When you're done, |
| 8 you'll just need to produce a zip file of your code and assets |
| 9 in order to <a href="publish_app.html">publish</a> your app. |
| 10 </p> |
| 11 <p> |
| 12 A packaged app contains these components: |
| 13 </p> |
| 14 <ul> |
| 15 <li>The <strong>manifest</strong> tells Chrome about your app, what it is, |
| 16 how to launch it and the extra permissions that it requires.</li> |
| 17 <li>The <strong>background script</strong> is used to create the event page |
| 18 responsible for managing the app life cycle.</li> |
| 19 <li>All code must be included in the package. This includes HTML, JS, CSS |
| 20 and Native Client modules.</li> |
| 21 <li>All <strong>icons</strong> and other assets must be included |
| 22 in the package as well.</li> |
| 23 </ul> |
| 24 <p class="note"> |
| 25 <b>API Samples: </b> |
| 26 Want to play with the code? |
| 27 Check out the |
| 28 <a href="https://github.com/GoogleChrome/chrome-app-samples/tree/master/hello-wo
rld">hello-world</a> |
| 29 sample. |
| 30 </p> |
| 31 <h2 id="one">Step 1: Create the manifest</h2> |
| 32 <p> |
| 33 First create your <code>manifest.json</code> file |
| 34 (<a href="manifest.html">Formats: Manifest Files</a> |
| 35 describes this manifest in detail): |
| 36 </p> |
| 37 <pre> |
| 38 { |
| 39 "name": "Hello World!", |
| 40 "description": "My first packaged app.", |
| 41 "manifest_version": 2, |
| 42 "version": "0.1", |
| 43 "app": { |
| 44 "background": { |
| 45 "scripts": ["background.js"] |
| 46 } |
| 47 }, |
| 48 "permissions": ["experimental", "app.window"], |
| 49 "icons": { "16": "calculator-16.png", "128": "calculator-128.png" } |
| 50 } |
| 51 </pre> |
| 52 <p class="note"> |
| 53 <b>Important:</b> |
| 54 Packaged apps <b>must</b> use |
| 55 <a href="manifestVersion.html">manifest version 2</a>. |
| 56 </p> |
| 57 <h2 id="two">Step 2: Create the background script</h2> |
| 58 <p> |
| 59 Next create a new file called <code>background.js</code> |
| 60 with the following content: |
| 61 </p> |
| 62 <pre> |
| 63 chrome.experimental.app.onLaunched.addListener(function() { |
| 64 chrome.app.window.create('window.html', { |
| 65 'width': 400, |
| 66 'height': 500 |
| 67 }); |
| 68 }); |
| 69 </pre> |
| 70 <p> |
| 71 In the above sample code, |
| 72 the <a href="app_lifecycle.html#lifecycle">onLaunched event</a> |
| 73 will be fired when the user starts the app. |
| 74 It then immediately opens a window for the app of the specified width and height
. |
| 75 Your background script may contain additional listeners, |
| 76 windows, post messages, and launch data, |
| 77 all of which are used by the event page to manage the app. |
| 78 </p> |
| 79 <h2 id="three">Step 3: Create a window page</h2> |
| 80 <p> |
| 81 Create your <code>window.html</code> file: |
| 82 </p> |
| 83 <pre> |
| 84 <!DOCTYPE html> |
| 85 <html> |
| 86 <head> |
| 87 </head> |
| 88 <body> |
| 89 <div>Hello, world!</div> |
| 90 </body> |
| 91 </html> |
| 92 </pre> |
| 93 <h2 id="four">Step 4: Create the icons</h2> |
| 94 <p> |
| 95 Copy these icons to your app folder: |
| 96 </p> |
| 97 <ul> |
| 98 <li><a href="{{static}}/images/calculator-16.png">calculator-16.png</a></li> |
| 99 <li><a href="{{static}}/images/calculator-128.png">calculator-128.png</a></li> |
| 100 </ul> |
| 101 <h2 id="five">Step 5: Launch your app</h2> |
| 102 <h3>Enable flags</h3> |
| 103 <p> |
| 104 Many of the packaged apps APIs are still experimental, |
| 105 so you should enable experimental APIs |
| 106 so that you can try them out: |
| 107 </p> |
| 108 <ul> |
| 109 <li>Go to <b>chrome://flags</b>.</li> |
| 110 <li>Find "Experimental Extension APIs", |
| 111 and click its "Enable" link.</li> |
| 112 <li>Restart Chrome.</li> |
| 113 </ul> |
| 114 <h3>Load your app</h3> |
| 115 <p> |
| 116 To load your app, |
| 117 bring up the apps and extensions management page |
| 118 by clicking the wrench icon |
| 119 <img src="{{static}}/images/toolsmenu.gif" width="29" height="29" alt="" |
| 120 style="margin-top:0" /> |
| 121 and choosing <b>Tools > Extensions</b>. |
| 122 </p> |
| 123 <p> |
| 124 Make sure the <b>Developer mode</b> |
| 125 checkbox has been selected. |
| 126 </p> |
| 127 <p> |
| 128 Click the <b>Load unpacked extension</b> button, |
| 129 navigate to your app's folder |
| 130 and click <b>OK</b>. |
| 131 </p> |
| 132 <h3>Open new tab and launch</h3> |
| 133 <p> |
| 134 Once you've loaded your app, |
| 135 open a New Tab page |
| 136 and click on your new app icon. |
| 137 </p> |
| 138 <p class="backtotop"><a href="#top">Back to top</a></p> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 10832042:
Extensions Docs Server: Doc conversion script (Closed)
Base URL: svn://svn.chromium.org/chrome/trunk/src