Extensions Docs Server: Doc conversion script

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

+<h1>Tutorial: Getting Started (Hello, World!)</h1>
+
+
+<p>
+  This tutorial walks you through creating a simple extension. You'll add an
+  icon to Google Chrome that, when clicked, displays an automatically generated
+  page. The icon and page will look something like this:
+</p>
+
+<img src="{{static}}/images/hello-world-small.png"
+     width="300"
+     height="221"
+     alt="a window with a grid of images related to 'Hello World'">
+
+<p>
+  You can develop extensions using any release of Google Chrome, on Windows,
+  Mac, or Linux. Extensions you develop on one platform should run without
+  change on every platform Chrome supports.
+</p>
+
+<h2 id="load">Create and load an extension</h2>
+
+<p>
+  The extension we'll walk through creating here is a
+  <a href="browserAction.html">Browser Action</a>, which adds a button to
+  Chrome's toolbar whose behavior you can control.
+</p>
+
+<ol>
+  <li>
+    Create a folder somewhere on your computer to contain your extension's code.
+  </li>
+  <li>
+    <p>
+      Inside your extension's folder, create a text file called
+      <strong><code>manifest.json</code></strong>, and fill it with the
+      following code:
+    </p>
+    <pre>{
+  "name": "My First Extension",
+  "version": "1.0",
+  "manifest_version": 2,
+  "description": "The first extension that I made.",
+  "browser_action": {
+    "default_icon": "icon.png"
+  },
+  "permissions": [
+    "http://api.flickr.com/"
+  ]
+}</pre>
+  </li>
+  <li>
+    <p>Copy this icon to the same folder:</p>
+    <div style="width: 150px; text-align: center;">
+      <a href='../examples/tutorials/getstarted/icon.png'
+         download='icon'>
+        <img src='../examples/tutorials/getstarted/icon.png'
+             width='19'
+             height='19'
+             alt=''
+             style='display: block; margin: 0.25em auto;'>
+        Download icon.png
+      </a>
+    </div>
+  </li>
+  <li id="load-ext">
+    <p>Load the extension.</p>
+    <ol type="a">
+      <li style="margin-top:0" />
+      Bring up the 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>.
+      </li>
+
+      <li>
+      If <b>Developer mode</b> has a + by it,
+      click the + to add developer information to the page.
+      The + changes to a -,
+      and more buttons and information appear.
+      </li>
+
+      <li>
+      Click the <b>Load unpacked extension</b> button.
+      A file dialog appears.
+      </li>
+
+      <li>
+      In the file dialog,
+      navigate to your extension's folder
+      and click <b>OK</b>.
+      </li>
+    </ol> </li>
+  </ol>
+
+<p>
+If your extension is valid,
+its icon appears next to the address bar,
+and information about the extension
+appears in the extensions page,
+as the following screenshot shows.
+</p>
+
+<p>
+<a href="{{static}}/images/load_after.png"><img
+  src="{{static}}/images/load_after_small.png"
+  width="300" height="132" /></a>
+</p>
+
+<h2 id="code">Add code to the extension</h2>
+<p>
+  In this step, you'll make your extension <em>do</em> something besides just
+  look good.
+</p>
+
+<ol>
+  <li>
+    <p>Edit <code>manifest.json</code> to add the following line:</p>
+    <pre>...
+  "browser_action": {
+    "default_icon": "icon.png"<b>,
+    "default_popup": "popup.html"</b>
+  },
+  ...</pre>
+
+    <p>
+      Inside your extension's folder, create two text files called
+      <strong><code>popup.html</code></strong> and
+      <strong><code>popup.js</code></strong>. Add the following code to
+      these files:
+    </p>
+    <blockquote>
+      <a href="../examples/tutorials/getstarted/popup.html"
+    target="_blank">HTML code (popup.html)</a> and
+    <a href="../examples/tutorials/getstarted/popup.js"
+    target="_blank">JavaScript code (popup.js)</a> for hello_world</a> </blockquote>
+  </li>
+  <li>
+    Return to the extensions management page,
+    and click the <b>Reload</b> button
+    to load the new version of the extension.</li>
+  <li>Click the extension's icon.
+  A popup should appear that displays the contents of
+  <code>popup.html</code>. </li>
+</ol>
+<p> It should look something like this:</p>
+
+<img src="{{static}}/images/hello-world.png"
+  width="500" height="369"
+  alt="a popup with a grid of images related to HELLO WORLD" />
+
+<p> If you don't see the popup,
+try the instructions again,
+following them exactly.
+Don't try loading an HTML file that isn't in the extension's folder &mdash;
+it won't work! </p>
+
+<h2 id="summary">Now what?</h2>
+
+
+
+<p>
+Here are some suggestions for what to read next:
+</p>
+
+<ul>
+  <li>
+    The <a href="overview.html">Overview</a>,
+    which has important conceptual and practical information
+  </li>
+  <li>
+    The
+    <a href="tut_debugging.html">debugging tutorial</a>,
+    which starts where this tutorial leaves off
+  </li>
+  <li>
+    The <a href="hosting.html">hosting</a> page,
+    which tells you about options for distributing your extension
+  </li>
+</ul>
+
+<p>
+If you don't feel like reading, try these:
+</p>
+<ul>
+  <li>
+    Keep up to date with the latest news:
+    <a href="http://groups.google.com/a/chromium.org/group/chromium-extensions/subscribe">subscribe to chromium-extensions</a>
+  </li>
+  <li>
+    Ask a question tagged [google-chrome-extension] on
+    <a href="http://stackoverflow.com/questions/tagged/google-chrome-extension">Stack Overflow</a>
+  </li>
+  <li>
+    Look at some
+    <a href="samples.html">sample extensions</a>
+  </li>
+  <li>
+    Watch some
+    <a href="http://www.youtube.com/view_play_list?p=CA101D6A85FE9D4B">videos</a>, such as
+    <a href="http://www.youtube.com/watch?v=e3McMaHvlBY&feature=PlayList&p=CA101D6A85FE9D4B&index=3">How to build an extension</a>
+  </li>
+</ul>