1 <div id="pageData-name" class="pageData"></div> 2 <div id="pageData-showSideNav" class="pageData">false</div> 3 4 <style> 5 cs { 6 border:none; 7 margin:0; 8 } 9 10 #pics td { 11 padding:0 1em 0 0; 12 } 13 14 #pics img { 15 border:none; 16 } 17 </style> 18 19 <table class="columns" style="margin:0"> 20 21 <tr> 22 <td> 23 <h3>What are extensions?</h3> 24 25 <p> 26 Extensions are small software programs that 27 can modify and enhance the functionality of the Chrome browser. 28 You write them using web technologies such as 29 HTML, JavaScript, and CSS. 30 You can also use the extension system to build 31 <a href="apps.html">packaged apps</a>, 32 a downloadable kind of 33 <a href="http://code.google.com/chrome/apps/index.html">installable web app</a>. 34 </p> 35 36 <p> 37 <img src="images/index/gmail-small.png" width="91" height="35" 38 align="right" style="margin-top:0px; margin-left:0.5em" 39 alt="A screenshot of an extension's icon in the browser bar" /> 40 From a user's point of view, 41 extensions and packaged apps are very different 42 because they present very different user interfaces. 43 Extensions have little to no user interface. 44 For example, the image to the right shows the icon 45 that provides the UI for the 46 <a href="samples.html#gmail">Gmail extension</a>. 47 </p> 48 49 <p> 50 <img src="images/index/html5app.png" width="200" height="160" 51 align="right" style="margin-top:0px; margin-left:0.5em" 52 alt="A screenshot of a packaged app that implements a jigsaw puzzle" /> 53 Packaged apps, on the other hand, 54 look and feel like regular web apps, 55 with a big-screen design 56 and rich UI. 57 The image to the right shows a jigsaw puzzle game 58 implemented by a packaged app. 59 </p> 60 61 <p> 62 Both extensions and packaged apps bundle all their files 63 into a single file that the user downloads and installs. 64 This bundling means that, unlike ordinary web apps, 65 extensions and packaged apps don't need to depend 66 on content from the web. 67 </p> 68 69 <p> 70 You can distribute your extension or packaged app 71 by using the 72 <a href="https://chrome.google.com/webstore/developer/dashboard">Chrome Developer Dashboard</a> 73 to publish to the 74 <a href="http://chrome.google.com/webstore">Chrome Web Store</a>. 75 For more information, see the 76 <a href="http://code.google.com/chrome/webstore">store developer documentation</a>. 77 </p> 78 79 </td> 80 <td style="width:330px"> 81 <h3>How do I start?</h3> 82 83 <p> 84 <ol> 85 <li> 86 Follow the <a href="getstarted.html">Getting Started tutorial</a> 87 <!-- PENDING: once we have one for packaged apps, change to 88 "for _extensions_ or _packaged_apps_" --> 89 </li> 90 <li> 91 Read the 92 <a href="overview.html">Overview</a> 93 </li> 94 <li> 95 Keep up-to-date by reading the 96 <a href="http://blog.chromium.org/">Chromium blog</a> 97 </li> 98 <li> 99 Subscribe to the 100 <a href="http://groups.google.com/a/chromium.org/group/chromium-extensions">chromium-extensions group</a> 101 </li> 102 </ol> 103 </p> 104 105 <h3>Featured videos</h3> 106 107 <p> 108 <a href="http://www.youtube.com/view_play_list?p=CA101D6A85FE9D4B">Technical videos</a> <br /> 109 <a href="http://www.youtube.com/view_play_list?p=38DF05697DE372B1">Developer snapshots</a> (below) 110 </p> 111 112 <p> 113 <iframe title="YouTube video player" width="300" height="199" src="http://www.youtube.com/embed/wRDPTnY3yO8?rel=0" frameborder="0" allowfullscreen></iframe> 114 </p> 115 </td> 116 </tr> 117 </table> 118
