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