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