Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(2)

Side by Side Diff: chrome/common/extensions/docs/templates/articles/getstarted.html

Issue 219213007: Remove .html extension from links (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 6 years, 8 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 <h1>Getting Started: Building a Chrome Extension</h1> 1 <h1>Getting Started: Building a Chrome Extension</h1>
2 2
3 <p> 3 <p>
4 Extensions allow you to add functionality to Chrome without diving deeply 4 Extensions allow you to add functionality to Chrome without diving deeply
5 into native code. You can create new extensions for Chrome with those core 5 into native code. You can create new extensions for Chrome with those core
6 technologies that you're already familiar with from web development: HTML, 6 technologies that you're already familiar with from web development: HTML,
7 CSS, and JavaScript. If you've ever built a web page, you should feel right at 7 CSS, and JavaScript. If you've ever built a web page, you should feel right at
8 home with extensions pretty quickly; we'll put that to the test right now by 8 home with extensions pretty quickly; we'll put that to the test right now by
9 walking through the construction of a simple extension that will give you 9 walking through the construction of a simple extension that will give you
10 one-click access to pictures of kittens. Kittens! 10 one-click access to pictures of kittens. Kittens!
11 </p> 11 </p>
12 12
13 <p> 13 <p>
14 We'll do so by implementing a UI element we call a 14 We'll do so by implementing a UI element we call a
15 <a href="browserAction.html">browser action</a>, which allows us to place a 15 <a href="browserAction">browser action</a>, which allows us to place a
16 clickable icon right next to Chrome's Omnibox for easy access. Clicking that 16 clickable icon right next to Chrome's Omnibox for easy access. Clicking that
17 icon will open a popup window filled with kittenish goodness, which will look 17 icon will open a popup window filled with kittenish goodness, which will look
18 something like this: 18 something like this:
19 </p> 19 </p>
20 20
21 <img src="{{static}}/images/gettingstarted-1.jpg" 21 <img src="{{static}}/images/gettingstarted-1.jpg"
22 width="600" 22 width="600"
23 height="420" 23 height="420"
24 alt="Chrome, with an extension's popup open and displaying many kittens."> 24 alt="Chrome, with an extension's popup open and displaying many kittens.">
25 25
(...skipping 27 matching lines...) Expand all
53 53
54 "name": "One-click Kittens", 54 "name": "One-click Kittens",
55 "description": "This extension demonstrates a browser action with kittens.", 55 "description": "This extension demonstrates a browser action with kittens.",
56 "version": "1.0", 56 "version": "1.0",
57 57
58 "permissions": [ 58 "permissions": [
59 "https://secure.flickr.com/" 59 "https://secure.flickr.com/"
60 ], 60 ],
61 "browser_action": { 61 "browser_action": {
62 "default_icon": "icon.png", 62 "default_icon": "icon.png",
63 "default_popup": "popup.html" 63 "default_popup": "popup"
64 } 64 }
65 } 65 }
66 </pre> 66 </pre>
67 67
68 <p> 68 <p>
69 Go ahead and save that data to a file named <code>manifest.json</code> in the 69 Go ahead and save that data to a file named <code>manifest.json</code> in the
70 directory you created, or 70 directory you created, or
71 <a href="examples/tutorials/getstarted/manifest.json" download="manifest.json" > 71 <a href="examples/tutorials/getstarted/manifest.json" download="manifest.json" >
72 download a copy of <code>manifest.json</code> from our sample repository 72 download a copy of <code>manifest.json</code> from our sample repository
73 </a>. 73 </a>.
(...skipping 26 matching lines...) Expand all
100 <code>https://secure.flickr.com/</code>, and declares that this extension 100 <code>https://secure.flickr.com/</code>, and declares that this extension
101 implements a browser action, assigning it a default icon and popup in the 101 implements a browser action, assigning it a default icon and popup in the
102 process. 102 process.
103 </p> 103 </p>
104 104
105 <h2 id="resources">Resources</h2> 105 <h2 id="resources">Resources</h2>
106 106
107 <p> 107 <p>
108 You probably noticed that <code>manifest.json</code> pointed at two resource 108 You probably noticed that <code>manifest.json</code> pointed at two resource
109 files when defining the browser action: <code>icon.png</code> and 109 files when defining the browser action: <code>icon.png</code> and
110 <code>popup.html</code>. Both resources must exist inside the extension 110 <code>popup</code>. Both resources must exist inside the extension
111 package, so let's create them now: 111 package, so let's create them now:
112 </p> 112 </p>
113 113
114 <ul class="imaged"> 114 <ul class="imaged">
115 <li> 115 <li>
116 <p> 116 <p>
117 <img src="{{static}}/images/gettingstarted-icon.png" 117 <img src="{{static}}/images/gettingstarted-icon.png"
118 width="127" 118 width="127"
119 height="127" 119 height="127"
120 alt="The popup's icon will be displayed right next to the Omnibox."> 120 alt="The popup's icon will be displayed right next to the Omnibox.">
121 <code>icon.png</code> will be displayed next to the Omnibox, waiting for 121 <code>icon.png</code> will be displayed next to the Omnibox, waiting for
122 user interaction. Download a copy of icon.png from our sample repository, 122 user interaction. Download a copy of icon.png from our sample repository,
123 <a href="examples/tutorials/getstarted/icon.png" download="icon.png"> 123 <a href="examples/tutorials/getstarted/icon.png" download="icon.png">
124 Download a copy of <code>icon.png</code> from our sample repository 124 Download a copy of <code>icon.png</code> from our sample repository
125 </a>, and save it into the directory you're working in. You could also 125 </a>, and save it into the directory you're working in. You could also
126 create your own if you're so inclined; it's just a 19px-square PNG file. 126 create your own if you're so inclined; it's just a 19px-square PNG file.
127 </p> 127 </p>
128 </li> 128 </li>
129 <li> 129 <li>
130 <p> 130 <p>
131 <img src="{{static}}/images/gettingstarted-popup.jpg" 131 <img src="{{static}}/images/gettingstarted-popup.jpg"
132 width="165" 132 width="165"
133 height="200" 133 height="200"
134 alt="The popup's HTML will be rendered directly below the icon when c licked."> 134 alt="The popup's HTML will be rendered directly below the icon when c licked.">
135 <code>popup.html</code> will be rendered inside the popup window that's 135 <code>popup</code> will be rendered inside the popup window that's
136 created in response to a user's click on the browser action. It's a 136 created in response to a user's click on the browser action. It's a
137 standard HTML file, just like you're used to from web development, giving 137 standard HTML file, just like you're used to from web development, giving
138 you more or less free reign over what the popup displays. 138 you more or less free reign over what the popup displays.
139 <a href="examples/tutorials/getstarted/popup.html" download="popup.html"> 139 <a href="examples/tutorials/getstarted/popup" download="popup">
140 Download a copy of <code>popup.html</code> from our sample repository 140 Download a copy of <code>popup</code> from our sample repository
141 </a>, and save it into 141 </a>, and save it into
142 the directory you're working in. 142 the directory you're working in.
143 </p> 143 </p>
144 <p> 144 <p>
145 <code>popup.html</code> requires an additional JavaScript file in order to 145 <code>popup</code> requires an additional JavaScript file in order to
146 do the work of grabbing kitten images from the web and loading them into 146 do the work of grabbing kitten images from the web and loading them into
147 the popup. To save you some effort, just 147 the popup. To save you some effort, just
148 <a href="examples/tutorials/getstarted/popup.js" download="popup.js"> 148 <a href="examples/tutorials/getstarted/popup.js" download="popup.js">
149 download a copy of <code>popup.js</code> from our sample repository 149 download a copy of <code>popup.js</code> from our sample repository
150 </a>, and save it into the directory you're working in. 150 </a>, and save it into the directory you're working in.
151 </p> 151 </p>
152 </li> 152 </li>
153 </ul> 153 </ul>
154 154
155 <p> 155 <p>
156 You should now have four files in your working directory: 156 You should now have four files in your working directory:
157 <a href="examples/tutorials/getstarted/icon.png" download="icon.png"><code>ico n.png</code></a>, 157 <a href="examples/tutorials/getstarted/icon.png" download="icon.png"><code>ico n.png</code></a>,
158 <a href="examples/tutorials/getstarted/manifest.json" download="manifest.json" ><code>manifest.json</code></a>, 158 <a href="examples/tutorials/getstarted/manifest.json" download="manifest.json" ><code>manifest.json</code></a>,
159 <a href="examples/tutorials/getstarted/popup.html" download="popup.html"><code >popup.html</code></a>, 159 <a href="examples/tutorials/getstarted/popup" download="popup"><code>popup</co de></a>,
160 <a href="examples/tutorials/getstarted/popup.js" download="popup.js"><code>pop up.js</code></a>. 160 <a href="examples/tutorials/getstarted/popup.js" download="popup.js"><code>pop up.js</code></a>.
161 The next step is to load those files into Chrome. 161 The next step is to load those files into Chrome.
162 </p> 162 </p>
163 163
164 <h2 id="unpacked">Load the extension</h2> 164 <h2 id="unpacked">Load the extension</h2>
165 165
166 <p> 166 <p>
167 Extensions that you download from the Chrome Web Store are packaged up as 167 Extensions that you download from the Chrome Web Store are packaged up as
168 <code>.crx</code> files, which is great for distribution, but not so great for 168 <code>.crx</code> files, which is great for distribution, but not so great for
169 development. Recognizing this, Chrome gives you a quick way of loading up your 169 development. Recognizing this, Chrome gives you a quick way of loading up your
(...skipping 76 matching lines...) Expand 10 before | Expand all | Expand 10 after
246 You now know about the manifest file's central role in bringing things 246 You now know about the manifest file's central role in bringing things
247 together, and you've mastered the basics of declaring a browser action, and 247 together, and you've mastered the basics of declaring a browser action, and
248 rendering some kittens (or puppies!) in response to a user's click. That's a 248 rendering some kittens (or puppies!) in response to a user's click. That's a
249 great start, and has hopefully gotten you interested enough to explore 249 great start, and has hopefully gotten you interested enough to explore
250 further. There's a lot more out there to play around with. 250 further. There's a lot more out there to play around with.
251 </p> 251 </p>
252 252
253 <ul> 253 <ul>
254 <li> 254 <li>
255 <p> 255 <p>
256 The <a href="overview.html">Chrome Extension Overview</a> backs up a bit, 256 The <a href="overview">Chrome Extension Overview</a> backs up a bit,
257 and fills in a lot of detail about extensions' architecture in general, 257 and fills in a lot of detail about extensions' architecture in general,
258 and some specific concepts you'll want to be familiar with going forward. 258 and some specific concepts you'll want to be familiar with going forward.
259 It's the best next step on your journey towards extension mastery. 259 It's the best next step on your journey towards extension mastery.
260 </p> 260 </p>
261 </li> 261 </li>
262 <li> 262 <li>
263 <p> 263 <p>
264 No one writes perfect code on the first try, which means that you'll need 264 No one writes perfect code on the first try, which means that you'll need
265 to learn about the options available for debugging your creations. Our 265 to learn about the options available for debugging your creations. Our
266 <a href="tut_debugging.html">debugging tutorial</a> is perfect for that, 266 <a href="tut_debugging">debugging tutorial</a> is perfect for that,
267 and is well worth carefully reading. 267 and is well worth carefully reading.
268 </p> 268 </p>
269 </li> 269 </li>
270 <li> 270 <li>
271 <p> 271 <p>
272 Chrome extensions have access to powerful APIs above and beyond what's 272 Chrome extensions have access to powerful APIs above and beyond what's
273 available on the open web: browser actions are just the tip of the 273 available on the open web: browser actions are just the tip of the
274 iceburg. Our <a href="api_index.html">chrome.* APIs documentation</a> will 274 iceburg. Our <a href="api_index">chrome.* APIs documentation</a> will
275 walk you through each API in turn. 275 walk you through each API in turn.
276 </p> 276 </p>
277 </li> 277 </li>
278 <li> 278 <li>
279 <p> 279 <p>
280 Finally, the <a href="devguide.html">developer's guide</a> has dozens of 280 Finally, the <a href="devguide">developer's guide</a> has dozens of
281 additional links to pieces of documentation you might be interested in. 281 additional links to pieces of documentation you might be interested in.
282 </p> 282 </p>
283 </li> 283 </li>
284 </ul> 284 </ul>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698