New screenshots for the extension UI overview.

chrome/common/extensions/docs/static/overview.html

 <div id="pageData-name" class="pageData">Overview</div>
 <div id="pageData-showTOC" class="pageData">true</div>
 
 <p>
 Once you've finished this page
 and the
 <a href="getstarted.html">Getting Started</a> tutorial,
 you'll be all set to start writing extensions and packaged apps.
 </p>
 
@@ skipping 35 matching lines @@
 or <a href="pageAction.html">page actions</a>.
 Each extension can have at most one browser action or page action.
 Choose a <b>browser action</b> when the extension is relevant to most pages.
 Choose a <b>page action</b> when the extension's icon
 should appear or disappear,
 depending on the page.
 </p>
 
 <table class="columns">
 <tr>
-  <td>
-    <img src="images/index/gmail.png"
-      width="150" height="79"
+  <td width="33%">
+    <img src="images/overview/browser-action.png"
+      width="147" height="100"
+      alt="screenshot" />
+  </td>
+  <td width="33%">
+    <img src="images/overview/page-action.png"
+      width="147" height="100"
       alt="screenshot" />
   </td>
   <td>
-    <img src="images/index/news.png"
-      width="150" height="79"
-      alt="screenshot" />
-  </td>
-  <td>
-    <img src="images/index/rss.png"
-      width="150" height="79"
+    <img src="images/overview/browser-action-with-popup.png"
+      width="147" height="100"
       alt="screenshot" />
   </td>
 </tr>
 
 <tr>
   <td>
     This <a href="samples.html#gmail">mail extension</a>
     uses a <em>browser action</em>
     (icon in the toolbar).
   </td>
   <td>
-    This <a href="samples.html#news">news reader extension</a>
-    features a browser action that,
-    when clicked,
-    shows a <em>popup</em>.
-  </td>
-  <td>
     This <a href="samples.html#mappy">map extension</a>
     uses a <em>page action</em>
     (icon in the address bar)
     and <em>content script</em>
     (code injected into a web page).
   </td>
+  <td>
+    This <a href="samples.html#news">news extension</a>
+    features a browser action that,
+    when clicked,
+    shows a <em>popup</em>.
+  </td>
 </tr>
 </table>
 
 <p>
 Extensions (and packaged apps) can also present a UI in other ways,
 such as adding to the Chrome context menu,
 providing an options page,
 or using a content script that changes how pages look.
 See the <a href="devguide.html">Developer's Guide</a>
 for a complete list of extension features,
 with links to implementation details
 for each one.
 </p>
 
 
 <h3 id="packagedapp-ui">Packaged app UIs</h3>
 
 <p>
 A packaged app usually presents its main functionality using
 an HTML page that's bundled into the app.
 For example, the following packaged app
 displays a Flash file within an HTML page.
 </p>
 
-<img src="images/index/flashapp.png"
+<img src="images/overview/flash-app.png"
   width="372" height="300"
   alt="screenshot" />
 
 <p>
 For more information,
 see <a href="apps.html">Packaged Apps</a>.
 </p>
 
 <h2 id="files">Files</h2>
 <p>
@@ skipping 95 matching lines @@
 
 <h2 id="arch">Architecture</h2>
 
 <p>
 Most extensions have a
 <a href="background_pages.html">background page</a>,
 an invisible page
 that holds the main logic of the extension.
 </p>
 
-<img src="images/arch-1.gif"
+<img src="images/overview/arch-1.gif"
  width="232" height="168"
  alt="Two windows and a box representing a background page (background.html). One window has a yellow icon; the other has both a yellow icon and a blue icon. The yellow icons are connected to the background page." />
 
 <p>
 The preceding figure shows a browser
 that has at least two extensions installed:
 a browser action (yellow icon)
 and a page action (blue icon).
 The browser action's background page,
 which is defined by an HTML file
@@ skipping 27 matching lines @@
 of a browser action's popup.
 The popup's contents are a web page
 defined by an HTML file
 (<code>popup.html</code>).
 The popup doesn't need to duplicate code
 that's in the background page
 (<code>background.html</code>)
 because the popup can invoke functions on the background page.
 </p>
 
-<img src="images/arch-2.gif"
+<img src="images/overview/arch-2.gif"
  width="256" height="168"
  alt="A browser window containing a browser action that's displaying a popup. The popup's HTML file (popup.html) can communicate with the extension's background page (background.html)." />
 
 <p>
 See the <a href="browserAction.html">Browser Actions</a> page and
 the <a href="#pageComm">Communication between pages</a> section
 for more details.
 </p>
 
 
@@ skipping 22 matching lines @@
 <p>
 Content scripts can read details of the web pages the browser visits,
 and they can make changes to the pages.
 In the following figure,
 the content script
 can read and modify
 the DOM for the displayed web page.
 It cannot, however, modify the DOM of its parent extension's background page.
 </p>
 
-<img src="images/arch-3.gif"
+<img src="images/overview/arch-3.gif"
  width="238" height="169"
  alt="A browser window with a browser action (controlled by background.html) and a content script (controlled by contentscript.js)." />
 
 <p>
 Content scripts aren't completely cut off from their parent extensions.
 A content script can exchange messages with its parent extension,
 as the arrows in the following figure show.
 For example, a content script might send a message
 whenever it finds an RSS feed in a browser page.
 Or a background page might send a message
 asking a content script to change the appearance of its browser page.
 </p>
 
-<img src="images/arch-cs.gif"
+<img src="images/overview/arch-cs.gif"
  width="238" height="194"
  alt="Like the previous figure, but showing more of the parent extension's files, as well as a communication path between the content script and the parent extension." />
 
 <!-- [PENDING: Add overview of message passing.] -->
 
 <p>
 For more information,
 see <a href="content_scripts.html">Content Scripts</a>.
 </p>
 
@@ skipping 89 matching lines @@
 <ul>
   <li> <a href="getstarted.html">Tutorial: Getting Started</a> </li>
   <li> <a href="tut_debugging.html">Tutorial: Debugging</a> </li>
   <li> <a href="devguide.html">Developer's Guide</a> </li>
   <li> <a href="http://dev.chromium.org/developers/design-documents/extensions/samples">Samples</a> </li>
   <li> <a href="http://www.youtube.com/view_play_list?p=CA101D6A85FE9D4B">Videos</a>,
     such as
     <a href="http://www.youtube.com/watch?v=B4M_a7xejYI&feature=PlayList&p=CA101D6A85FE9D4B&index=6">Extension Message Passing</a>
     </li>
 </ul>