| OLD | NEW |
|---|
| (Empty) | |
| 1 <h1 class="page_title">Tutorial: Getting Started (Hello, World!)</h1> |
| 2 <div id="pageData-showTOC" class="pageData">true</div> |
| 3 <p> |
| 4 This tutorial walks you through creating a simple extension. You'll add an |
| 5 icon to Google Chrome that, when clicked, displays an automatically generated |
| 6 page. The icon and page will look something like this: |
| 7 </p> |
| 8 <img src="{{static}}/images/hello-world-small.png" |
| 9 width="300" |
| 10 height="221" |
| 11 alt="a window with a grid of images related to 'Hello World'"> |
| 12 <p> |
| 13 You can develop extensions using any release of Google Chrome, on Windows, |
| 14 Mac, or Linux. Extensions you develop on one platform should run without |
| 15 change on every platform Chrome supports. |
| 16 </p> |
| 17 <h2 id="load">Create and load an extension</h2> |
| 18 <p> |
| 19 The extension we'll walk through creating here is a |
| 20 <a href="browserAction.html">Browser Action</a>, which adds a button to |
| 21 Chrome's toolbar whose behavior you can control. |
| 22 </p> |
| 23 <ol> |
| 24 <li> |
| 25 Create a folder somewhere on your computer to contain your extension's code. |
| 26 </li> |
| 27 <li> |
| 28 <p> |
| 29 Inside your extension's folder, create a text file called |
| 30 <strong><code>manifest.json</code></strong>, and fill it with the |
| 31 following code: |
| 32 </p> |
| 33 <pre>{ |
| 34 "name": "My First Extension", |
| 35 "version": "1.0", |
| 36 "manifest_version": 2, |
| 37 "description": "The first extension that I made.", |
| 38 "browser_action": { |
| 39 "default_icon": "icon.png" |
| 40 }, |
| 41 "permissions": [ |
| 42 "http://api.flickr.com/" |
| 43 ] |
| 44 }</pre> |
| 45 </li> |
| 46 <li> |
| 47 <p>Copy this icon to the same folder:</p> |
| 48 <div style="width: 150px; text-align: center;"> |
| 49 <a href='../examples/tutorials/getstarted/icon.png' |
| 50 download='icon'> |
| 51 <img src='../examples/tutorials/getstarted/icon.png' |
| 52 width='19' |
| 53 height='19' |
| 54 alt='' |
| 55 style='display: block; margin: 0.25em auto;'> |
| 56 Download icon.png |
| 57 </a> |
| 58 </div> |
| 59 </li> |
| 60 <li id="load-ext"> |
| 61 <p>Load the extension.</p> |
| 62 <ol type="a"> |
| 63 <li style="margin-top:0" /> |
| 64 Bring up the extensions management page |
| 65 by clicking the wrench icon |
| 66 <img src="{{static}}/images/toolsmenu.gif" width="29" height="29" alt="" |
| 67 style="margin-top:0" /> |
| 68 and choosing <b>Tools > Extensions</b>. |
| 69 </li> |
| 70 <li> |
| 71 If <b>Developer mode</b> has a + by it, |
| 72 click the + to add developer information to the page. |
| 73 The + changes to a -, |
| 74 and more buttons and information appear. |
| 75 </li> |
| 76 <li> |
| 77 Click the <b>Load unpacked extension</b> button. |
| 78 A file dialog appears. |
| 79 </li> |
| 80 <li> |
| 81 In the file dialog, |
| 82 navigate to your extension's folder |
| 83 and click <b>OK</b>. |
| 84 </li> |
| 85 </ol> </li> |
| 86 </ol> |
| 87 <p> |
| 88 If your extension is valid, |
| 89 its icon appears next to the address bar, |
| 90 and information about the extension |
| 91 appears in the extensions page, |
| 92 as the following screenshot shows. |
| 93 </p> |
| 94 <p> |
| 95 <a href="{{static}}/images/load_after.png"><img |
| 96 src="{{static}}/images/load_after_small.png" |
| 97 width="300" height="132" /></a> |
| 98 </p> |
| 99 <h2 id="code">Add code to the extension</h2> |
| 100 <p> |
| 101 In this step, you'll make your extension <em>do</em> something besides just |
| 102 look good. |
| 103 </p> |
| 104 <ol> |
| 105 <li> |
| 106 <p>Edit <code>manifest.json</code> to add the following line:</p> |
| 107 <pre>... |
| 108 "browser_action": { |
| 109 "default_icon": "icon.png"<b>, |
| 110 "default_popup": "popup.html"</b> |
| 111 }, |
| 112 ...</pre> |
| 113 <p> |
| 114 Inside your extension's folder, create two text files called |
| 115 <strong><code>popup.html</code></strong> and |
| 116 <strong><code>popup.js</code></strong>. Add the following code to |
| 117 these files: |
| 118 </p> |
| 119 <blockquote> |
| 120 <a href="../examples/tutorials/getstarted/popup.html" |
| 121 target="_blank">HTML code (popup.html)</a> and |
| 122 <a href="../examples/tutorials/getstarted/popup.js" |
| 123 target="_blank">JavaScript code (popup.js)</a> for hello_world</a> </blockqu
ote> |
| 124 </li> |
| 125 <li> |
| 126 Return to the extensions management page, |
| 127 and click the <b>Reload</b> button |
| 128 to load the new version of the extension.</li> |
| 129 <li>Click the extension's icon. |
| 130 A popup should appear that displays the contents of |
| 131 <code>popup.html</code>. </li> |
| 132 </ol> |
| 133 <p> It should look something like this:</p> |
| 134 <img src="{{static}}/images/hello-world.png" |
| 135 width="500" height="369" |
| 136 alt="a popup with a grid of images related to HELLO WORLD" /> |
| 137 <p> If you don't see the popup, |
| 138 try the instructions again, |
| 139 following them exactly. |
| 140 Don't try loading an HTML file that isn't in the extension's folder — |
| 141 it won't work! </p> |
| 142 <h2 id="summary">Now what?</h2> |
| 143 <p> |
| 144 Here are some suggestions for what to read next: |
| 145 </p> |
| 146 <ul> |
| 147 <li> |
| 148 The <a href="overview.html">Overview</a>, |
| 149 which has important conceptual and practical information |
| 150 </li> |
| 151 <li> |
| 152 The |
| 153 <a href="tut_debugging.html">debugging tutorial</a>, |
| 154 which starts where this tutorial leaves off |
| 155 </li> |
| 156 <li> |
| 157 The <a href="hosting.html">hosting</a> page, |
| 158 which tells you about options for distributing your extension |
| 159 </li> |
| 160 </ul> |
| 161 <p> |
| 162 If you don't feel like reading, try these: |
| 163 </p> |
| 164 <ul> |
| 165 <li> |
| 166 Keep up to date with the latest news: |
| 167 <a href="http://groups.google.com/a/chromium.org/group/chromium-extensions/s
ubscribe">subscribe to chromium-extensions</a> |
| 168 </li> |
| 169 <li> |
| 170 Ask a question tagged [google-chrome-extension] on |
| 171 <a href="http://stackoverflow.com/questions/tagged/google-chrome-extension">
Stack Overflow</a> |
| 172 </li> |
| 173 <li> |
| 174 Look at some |
| 175 <a href="samples.html">sample extensions</a> |
| 176 </li> |
| 177 <li> |
| 178 Watch some |
| 179 <a href="http://www.youtube.com/view_play_list?p=CA101D6A85FE9D4B">videos</a
>, such as |
| 180 <a href="http://www.youtube.com/watch?v=e3McMaHvlBY&feature=PlayList&p=CA101
D6A85FE9D4B&index=3">How to build an extension</a> |
| 181 </li> |
| 182 </ul> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 10832042:
Extensions Docs Server: Doc conversion script (Closed)
Base URL: svn://svn.chromium.org/chrome/trunk/src