Extensions Docs Server: Doc conversion script

chrome/common/extensions/docs/server2/templates/articles/first_app.html

+<meta name="doc-family" content="apps">
+<h1>Create Your First App</h1>
+
+
+<p>
+This tutorial walks you through creating your first packaged app.
+Packaged apps are structured similarly to extensions
+so current developers will recognize the manifest and packaging methods.
+When you're done,
+you'll just need to produce a zip file of your code and assets
+in order to <a href="publish_app.html">publish</a> your app.
+</p>
+
+<p>
+A packaged app contains these components:
+</p>
+
+<ul>
+  <li>The <strong>manifest</strong> tells Chrome about your app, what it is,
+    how to launch it and the extra permissions that it requires.</li>
+  <li>The <strong>background script</strong> is used to create the event page
+    responsible for managing the app life cycle.</li>
+  <li>All code must be included in the package. This includes HTML, JS, CSS
+    and Native Client modules.</li>
+  <li>All <strong>icons</strong> and other assets must be included
+    in the package as well.</li>
+</ul>
+
+<p class="note">
+<b>API Samples: </b>
+Want to play with the code?
+Check out the
+<a href="https://github.com/GoogleChrome/chrome-app-samples/tree/master/hello-world">hello-world</a>
+sample.
+</p>
+
+<h2 id="one">Step 1: Create the manifest</h2>
+
+<p>
+First create your <code>manifest.json</code> file
+(<a href="manifest.html">Formats: Manifest Files</a>
+describes this manifest in detail):
+</p>
+
+<pre>
+{
+  "name": "Hello World!",
+  "description": "My first packaged app.",
+  "manifest_version": 2,
+  "version": "0.1",
+  "app": {
+    "background": {
+      "scripts": ["background.js"]
+    }
+  },
+  "permissions": ["experimental", "app.window"],
+  "icons": { "16": "calculator-16.png", "128": "calculator-128.png" }
+}
+</pre>
+
+<p class="note">
+<b>Important:</b>
+Packaged apps <b>must</b> use
+<a href="manifestVersion.html">manifest version 2</a>.
+</p>
+
+<h2 id="two">Step 2: Create the background script</h2>
+
+<p>
+Next create a new file called <code>background.js</code>
+with the following content:
+</p>
+
+<pre>
+chrome.experimental.app.onLaunched.addListener(function() {
+  chrome.app.window.create('window.html', {
+    'width': 400,
+    'height': 500
+  });
+});
+</pre>
+
+<p>
+In the above sample code,
+the <a href="app_lifecycle.html#lifecycle">onLaunched event</a>
+will be fired when the user starts the app.
+It then immediately opens a window for the app of the specified width and height.
+Your background script may contain additional listeners,
+windows, post messages, and launch data,
+all of which are used by the event page to manage the app.
+</p>
+
+<h2 id="three">Step 3: Create a window page</h2>
+
+<p>
+Create your <code>window.html</code> file:
+</p>
+
+<pre>
+&lt;!DOCTYPE html>
+&lt;html>
+  &lt;head>
+  &lt;/head>
+  &lt;body>
+    &lt;div>Hello, world!&lt;/div>
+  &lt;/body>
+&lt;/html>
+</pre>
+
+<h2 id="four">Step 4: Create the icons</h2>
+
+<p>
+Copy these icons to your app folder:
+</p>
+
+<ul>
+  <li><a href="{{static}}/images/calculator-16.png">calculator-16.png</a></li>
+  <li><a href="{{static}}/images/calculator-128.png">calculator-128.png</a></li>
+</ul>
+
+<h2 id="five">Step 5: Launch your app</h2>
+
+<h3>Enable flags</h3>
+
+<p>
+Many of the packaged apps APIs are still experimental,
+so you should enable experimental APIs
+so that you can try them out:
+</p>
+
+<ul>
+  <li>Go to <b>chrome://flags</b>.</li>
+  <li>Find "Experimental Extension APIs",
+    and click its "Enable" link.</li>
+  <li>Restart Chrome.</li>
+</ul>
+
+<h3>Load your app</h3>
+
+<p>
+To load your app,
+bring up the apps and extensions management page
+by clicking the wrench icon
+<img src="{{static}}/images/toolsmenu.gif" width="29" height="29" alt=""
+        style="margin-top:0" />
+and choosing <b>Tools > Extensions</b>.
+</p>
+
+<p>
+Make sure the <b>Developer mode</b>
+checkbox has been selected.
+</p>
+
+<p>
+Click the <b>Load unpacked extension</b> button,
+navigate to your app's folder
+and click <b>OK</b>.
+</p>
+
+<h3>Open new tab and launch</h3>
+
+<p>
+Once you've loaded your app,
+open a New Tab page
+and click on your new app icon.
+</p>
+
+<p class="backtotop"><a href="#top">Back to top</a></p>