1<div id="pageData-name" class="pageData"></div> 2<div id="pageData-showSideNav" class="pageData">false</div> 3 4<style> 5cs { 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> 26Extensions are small software programs that 27can modify and enhance the functionality of the Chrome browser. 28You write them using web technologies such as 29HTML, JavaScript, and CSS. 30You can also use the extension system to build 31<a href="apps.html">packaged apps</a>, 32a 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" /> 40From a user's point of view, 41extensions and packaged apps are very different 42because they present very different user interfaces. 43Extensions have little to no user interface. 44For example, the image to the right shows the icon 45that 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" /> 53Packaged apps, on the other hand, 54look and feel like regular web apps, 55with a big-screen design 56and rich UI. 57The image to the right shows a jigsaw puzzle game 58implemented by a packaged app. 59</p> 60 61<p> 62Both extensions and packaged apps bundle all their files 63into a single file that the user downloads and installs. 64This bundling means that, unlike ordinary web apps, 65extensions and packaged apps don't need to depend 66on content from the web. 67</p> 68 69<p> 70You can distribute your extension or packaged app 71by using the 72<a href="https://chrome.google.com/webstore/developer/dashboard">Chrome Developer Dashboard</a> 73to publish to the 74<a href="http://chrome.google.com/webstore">Chrome Web Store</a>. 75For 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
