Cleanup pass on Getting Started.

Copyedited it, and updated it to use new icons,
new screenshots, and the new examples directory.
I'll remove the samples directory once the
debugging tutorial is updated.

BUG=none
TEST=none
TBR=aa

Review URL: http://codereview.chromium.org/384136

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@31969 0039d316-1c4b-4281-b951-d872f2087c98

1 files changed, 31 insertions, 20 deletions

diff --git a/chrome/common/extensions/docs/getstarted.html b/chrome/common/extensions/docs/getstarted.html
index 9ff61ff..3536ad7 100644
--- a/chrome/common/extensions/docs/getstarted.html
+++ b/chrome/common/extensions/docs/getstarted.html
@@ -239,12 +239,12 @@
 
 <p>
 This tutorial walks you through creating a simple extension.
-You'll add a button to Google Chrome
+You'll add an icon to Google Chrome
 that, when clicked, displays an automatically generated page.
-The button and page will look something like this:
+The icon and page will look something like this:
 </p>
 
-<img src="images/hello-world-small.png" width="300" height="199" alt="a window with a grid of images related to HELLO WORLD">
+<img src="images/hello-world-small.png" width="300" height="243" alt="a window with a grid of images related to HELLO WORLD">
 
 
 <h2 id="browser">Get your browser ready</h2>
@@ -284,7 +284,7 @@ to the toolbar of Google Chrome.
   "version": "1.0",
   "description": "The first extension that I made.",
   "browser_action": {
-    ""default_icon": "icon.png""
+    "default_icon": "icon.png"
   },
   "permissions": [
     "http://api.flickr.com/"
@@ -295,15 +295,25 @@ to the toolbar of Google Chrome.
     Copy this icon to the same folder:<br>
     <table cellpadding="0" cellspacing="0">
       <tbody><tr>
-        <td style="text-align:center; border:0;"><a href="samples/hello_world/icon.png"><img src="samples/hello_world/icon.png" width="19" height="19" border="0"></a><br>
-          <a href="samples/hello_world/icon.png">Download icon.png</a></td>
+        <td style="text-align:center; border:0;"><a href="examples/tutorials/getstarted/icon.png"><img src="examples/tutorials/getstarted/icon.png" width="19" height="19" border="0"></a><br>
+          <a href="examples/tutorials/getstarted/icon.png">Download icon.png</a></td>
       </tr>
     </tbody></table>
   </li>
   <li> Load the extension.
     <ol type="a">
       <li>
-      Bring up the Extensions management page by clicking the wrench icon, and selecting the "Extensions" menu item.
+      Bring up the extensions management page
+      by clicking the Tools menu
+      <img src="images/toolsmenu.gif" width="43" height="34" alt="" align="absmiddle">
+      and choosing <b>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>
@@ -315,21 +325,21 @@ to the toolbar of Google Chrome.
       In the file dialog,
       navigate to your extension's folder
       (<code>c:\myext</code>, for example)
-      and click the <b>OK</b> button.
+      and click <b>OK</b>.
       </li>
     </ol> </li>
   </ol>
 
 <p>
 If your extension is valid,
-information about it
-appears in the <b>Installed extensions</b> part
-of the Extensions page,
+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="images/load_after.png"><img src="images/load_after_small.png" width="327" height="206"></a>
+<a href="images/load_after.png"><img src="images/load_after_small.png" width="300" height="194"></a>
 </p>
 
 <h2 id="code">Add code to the extension</h2>
@@ -339,27 +349,28 @@ as the following screenshot shows.
     <p> Edit <code>manifest.json</code> to add the following line:</p>
 <pre>  ...
   "browser_action": {
-    "default_icon": "icon.png",
-    <b style="background:yellow">"popup": "popup.html"</b>
+    "default_icon": "icon.png"<b>,
+    "popup": "popup.html"</b>
   },
   ...
 </pre>
     <p> Inside your extension's folder,
     create a text file called <strong><code>popup.html</code></strong>,
     and add the following code to it:</p>
-    <blockquote> <a href="samples/hello_world/popup.html" onclick="window.open('view-source:' + this.href); return false;">CSS
+    <blockquote> <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/tutorials/getstarted/popup.html?content-type=text/plain" target="_blank">CSS
     and JavaScript code for hello_world</a></blockquote>
   </li>
   <li>
-    Return to <b>chrome://extensions</b>,
+    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 button.
-  A popup bubble should come up that displays <code>popup.html</code>. </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="images/hello-world.png" width="583" height="387" alt="a popup with a grid of images related to HELLO WORLD">
+<img src="images/hello-world.png" width="500" height="405" alt="a popup with a grid of images related to HELLO WORLD">
 
 <p> If you don't see the popup,
 try the instructions again,
@@ -397,7 +408,7 @@ Here are some suggestions for what to do next:
   </li>
   <li>
     Look at some
-    <a href="http://sites.google.com/a/chromium.org/dev/developers/design-documents/extensions/samples">sample extensions</a>
+    <a href="samples.html">sample extensions</a>
   </li>
 </ul>
 </div>