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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: chrome/common/extensions/docs/overview.html

Issue 5398002: doc stuff (Closed) Base URL: svn://chrome-svn/chrome/trunk/src/
Patch Set: '' Created 10 years 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 | Annotate | Revision Log
« no previous file with comments | « chrome/common/extensions/docs/override.html ('k') | chrome/common/extensions/docs/packaging.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html><!-- This page is a placeholder for generated extensions api doc. Note: 1 <!DOCTYPE html><!-- This page is a placeholder for generated extensions api doc. Note:
2 1) The <head> information in this page is significant, should be uniform 2 1) The <head> information in this page is significant, should be uniform
3 across api docs and should be edited only with knowledge of the 3 across api docs and should be edited only with knowledge of the
4 templating mechanism. 4 templating mechanism.
5 3) All <body>.innerHTML is genereated as an rendering step. If viewed in a 5 3) All <body>.innerHTML is genereated as an rendering step. If viewed in a
6 browser, it will be re-generated from the template, json schema and 6 browser, it will be re-generated from the template, json schema and
7 authored overview content. 7 authored overview content.
8 4) The <body>.innerHTML is also generated by an offline step so that this 8 4) The <body>.innerHTML is also generated by an offline step so that this
9 page may easily be indexed by search engines. 9 page may easily be indexed by search engines.
10 --><html xmlns="http://www.w3.org/1999/xhtml"><head> 10 --><html xmlns="http://www.w3.org/1999/xhtml"><head>
(...skipping 152 matching lines...) Expand 10 before | Expand all | Expand 10 after
163 <ul> 163 <ul>
164 <li>Browser UI 164 <li>Browser UI
165 <ul> 165 <ul>
166 <li><a href="browserAction.html">Browser Actions</a></li> 166 <li><a href="browserAction.html">Browser Actions</a></li>
167 <li><a href="contextMenus.html">Context Menus</a></li> 167 <li><a href="contextMenus.html">Context Menus</a></li>
168 <li><a href="notifications.html">Desktop Notifications</a></li > 168 <li><a href="notifications.html">Desktop Notifications</a></li >
169 <li><a href="omnibox.html">Omnibox</a></li> 169 <li><a href="omnibox.html">Omnibox</a></li>
170 <li><a href="options.html">Options Pages</a></li> 170 <li><a href="options.html">Options Pages</a></li>
171 <li><a href="override.html">Override Pages</a></li> 171 <li><a href="override.html">Override Pages</a></li>
172 <li><a href="pageAction.html">Page Actions</a></li> 172 <li><a href="pageAction.html">Page Actions</a></li>
173 <li><a href="themes.html">Themes</a></li>
174 </ul> 173 </ul>
175 </li> 174 </li>
176 <li>Browser Interaction 175 <li>Browser Interaction
177 <ul> 176 <ul>
178 <li><a href="bookmarks.html">Bookmarks</a></li> 177 <li><a href="bookmarks.html">Bookmarks</a></li>
179 <li><a href="cookies.html">Cookies</a></li> 178 <li><a href="cookies.html">Cookies</a></li>
180 <li><a href="events.html">Events</a></li> 179 <li><a href="events.html">Events</a></li>
181 <li><a href="history.html">History</a></li> 180 <li><a href="history.html">History</a></li>
182 <li><a href="management.html">Management</a></li> 181 <li><a href="management.html">Management</a></li>
183 <li><a href="tabs.html">Tabs</a></li> 182 <li><a href="tabs.html">Tabs</a></li>
(...skipping 13 matching lines...) Expand all
197 </ul> 196 </ul>
198 </li> 197 </li>
199 <li>Finishing 198 <li>Finishing
200 <ul> 199 <ul>
201 <li><a href="hosting.html">Hosting</a></li> 200 <li><a href="hosting.html">Hosting</a></li>
202 <li><a href="external_extensions.html">Other Deployment Option s</a></li> 201 <li><a href="external_extensions.html">Other Deployment Option s</a></li>
203 </ul> 202 </ul>
204 </li> 203 </li>
205 </ul> 204 </ul>
206 </li> 205 </li>
206 <li><h2><a href="apps.html">Packaged Apps</a></h2></li>
207 <li><h2><a href="tutorials.html">Tutorials</a></h2> 207 <li><h2><a href="tutorials.html">Tutorials</a></h2>
208 <ul> 208 <ul>
209 <li><a href="tut_debugging.html">Debugging</a></li> 209 <li><a href="tut_debugging.html">Debugging</a></li>
210 <li><a href="tut_analytics.html">Google Analytics</a></li> 210 <li><a href="tut_analytics.html">Google Analytics</a></li>
211 <li><a href="tut_oauth.html">OAuth</a></li> 211 <li><a href="tut_oauth.html">OAuth</a></li>
212 </ul> 212 </ul>
213 </li> 213 </li>
214 <li><h2>Reference</h2> 214 <li><h2>Reference</h2>
215 <ul> 215 <ul>
216 <li>Formats 216 <li>Formats
217 <ul> 217 <ul>
218 <li><a href="manifest.html">Manifest Files</a></li> 218 <li><a href="manifest.html">Manifest Files</a></li>
219 <li><a href="match_patterns.html">Match Patterns</a></li> 219 <li><a href="match_patterns.html">Match Patterns</a></li>
220 <!-- <li>Packages (.crx)</li> -->
221 </ul> 220 </ul>
222 </li> 221 </li>
222 <li><a href="permission_warnings.html">Permission Warnings</a></li >
223 <li><a href="api_index.html">chrome.* APIs</a></li> 223 <li><a href="api_index.html">chrome.* APIs</a></li>
224 <li><a href="api_other.html">Other APIs</a></li> 224 <li><a href="api_other.html">Other APIs</a></li>
225 </ul> 225 </ul>
226 </li> 226 </li>
227 <li><h2><a href="samples.html">Samples</a></h2></li> 227 <li><h2><a href="samples.html">Samples</a></h2></li>
228 <div class="line"> </div> 228 <div class="line"> </div>
229 <li><h2>More</h2> 229 <li><h2>More</h2>
230 <ul> 230 <ul>
231 <li><a href="http://code.google.com/chrome/webstore/docs/index.htm l">Chrome Web Store</a></li> 231 <li><a href="http://code.google.com/chrome/webstore/docs/index.htm l">Chrome Web Store</a></li>
232 <li><a href="http://code.google.com/chrome/apps/docs/developers_gu ide.html">Installable Web Apps</a></li> 232 <li><a href="http://code.google.com/chrome/apps/docs/developers_gu ide.html">Hosted Apps</a></li>
233 <li><a href="themes.html">Themes</a></li> 233 <li><a href="themes.html">Themes</a></li>
234 </ul> 234 </ul>
235 </li> 235 </li>
236 </ul> 236 </ul>
237 </div> 237 </div>
238 <script> 238 <script>
239 initToggles(); 239 initToggles();
240 </script> 240 </script>
241 241
242 <div class="g-unit" id="gc-pagecontent"> 242 <div class="g-unit" id="gc-pagecontent">
243 <div id="pageTitle"> 243 <div id="pageTitle">
244 <h1 class="page_title">Overview</h1> 244 <h1 class="page_title">Overview</h1>
245 </div> 245 </div>
246 <!-- TABLE OF CONTENTS --> 246 <!-- TABLE OF CONTENTS -->
247 <div id="toc"> 247 <div id="toc">
248 <h2>Contents</h2> 248 <h2>Contents</h2>
249 <ol> 249 <ol>
250 <li> 250 <li>
251 <a href="#what">The basics</a> 251 <a href="#what">The basics</a>
252 <ol> 252 <ol>
253 <li style="display: none; "> 253 <li>
254 <a>h3Name</a> 254 <a href="#extension-ui">Extension UIs</a>
255 </li><li>
256 <a href="#packagedapp-ui">Packaged app UIs</a>
255 </li> 257 </li>
256 </ol> 258 </ol>
257 </li><li> 259 </li><li>
258 <a href="#files">Files</a> 260 <a href="#files">Files</a>
259 <ol> 261 <ol>
260 <li> 262 <li>
261 <a href="#relative-urls">Referring to files</a> 263 <a href="#relative-urls">Referring to files</a>
262 </li><li> 264 </li><li>
263 <a href="#H3-3">The manifest file</a> 265 <a href="#H3-5">The manifest file</a>
264 </li> 266 </li>
265 </ol> 267 </ol>
266 </li><li> 268 </li><li>
267 <a href="#arch">Architecture</a> 269 <a href="#arch">Architecture</a>
268 <ol> 270 <ol>
269 <li> 271 <li>
270 <a href="#pages">Pages</a> 272 <a href="#pages">Pages</a>
271 </li><li> 273 </li><li>
272 <a href="#contentScripts">Content scripts</a> 274 <a href="#contentScripts">Content scripts</a>
273 </li> 275 </li>
(...skipping 67 matching lines...) Expand 10 before | Expand all | Expand 10 after
341 </p> 343 </p>
342 344
343 <!-- STATIC CONTENT PLACEHOLDER --> 345 <!-- STATIC CONTENT PLACEHOLDER -->
344 <div id="static"><div id="pageData-name" class="pageData">Overview</div> 346 <div id="static"><div id="pageData-name" class="pageData">Overview</div>
345 <div id="pageData-showTOC" class="pageData">true</div> 347 <div id="pageData-showTOC" class="pageData">true</div>
346 348
347 <p> 349 <p>
348 Once you've finished this page 350 Once you've finished this page
349 and the 351 and the
350 <a href="getstarted.html">Getting Started</a> tutorial, 352 <a href="getstarted.html">Getting Started</a> tutorial,
351 you'll be all set to start writing extensions. 353 you'll be all set to start writing extensions and packaged apps.
352 </p> 354 </p>
353 355
356 <p class="caution">
357 <strong>Note:</strong>
358 <em>Packaged apps</em> are implemented as extensions,
359 so unless otherwise stated,
360 everything in this page applies to packaged apps.
361 </p>
354 362
355 <h2 id="what">The basics</h2> 363 <h2 id="what">The basics</h2>
356 364
357 <p> 365 <p>
358 An extension is a zipped bundle of files — 366 An extension is a zipped bundle of files—HTML,
359 HTML, CSS, JavaScript, images, and anything else you need — 367 CSS, JavaScript, images, and anything else you need—that
360 that adds functionality to the Google Chrome browser. 368 adds functionality to the Google Chrome browser.
361 Extensions are essentially web pages, 369 Extensions are essentially web pages,
362 and they can use all the 370 and they can use all the
363 <a href="api_other.html">APIs that the browser provides to web pages</a>, 371 <a href="api_other.html">APIs that the browser provides to web pages</a>,
364 from XMLHttpRequest to JSON to HTML5. 372 from XMLHttpRequest to JSON to HTML5.
365 </p> 373 </p>
366 374
367 <p> 375 <p>
368 Many extensions add UI to Google Chrome, 376 Extensions can interact with web pages or servers using
369 in the form of 377 <a href="content_scripts.html">content scripts</a> or
370 <a href="browserAction.html">browser actions</a> 378 <a href="xhr.html">cross-origin XMLHttpRequests</a>.
371 or <a href="pageAction.html">page actions</a>.
372 Extensions can also interact programmatically 379 Extensions can also interact programmatically
373 with browser features such as 380 with browser features such as
374 <a href="bookmarks.html">bookmarks</a> 381 <a href="bookmarks.html">bookmarks</a>
375 and <a href="tabs.html">tabs</a>. 382 and <a href="tabs.html">tabs</a>.
376 To interact with web pages or servers,
377 extensions can use
378 <a href="content_scripts.html">content scripts</a> or
379 <a href="xhr.html">cross-origin XMLHttpRequests</a>.
380 </p> 383 </p>
381 384
385 <h3 id="extension-ui">Extension UIs</h3>
386
382 <p> 387 <p>
383 <b>Note:</b> 388 Many extensions—but not packaged apps—add
389 UI to Google Chrome in the form of
390 <a href="browserAction.html">browser actions</a>
391 or <a href="pageAction.html">page actions</a>.
384 Each extension can have at most one browser action or page action. 392 Each extension can have at most one browser action or page action.
385 Choose a <b>browser action</b> when the extension is relevant to most pages. 393 Choose a <b>browser action</b> when the extension is relevant to most pages.
386 Choose a <b>page action</b> when the extension's icon 394 Choose a <b>page action</b> when the extension's icon
387 should appear or disappear, 395 should appear or disappear,
388 depending on the page. 396 depending on the page.
389 </p> 397 </p>
390 398
399 <table class="columns">
400 <tbody><tr>
401 <td>
402 <img src="images/index/gmail.png" width="150" height="79" alt="screenshot">
403 </td>
404 <td>
405 <img src="images/index/news.png" width="150" height="79" alt="screenshot">
406 </td>
407 <td>
408 <img src="images/index/rss.png" width="150" height="79" alt="screenshot">
409 </td>
410 </tr>
411
412 <tr>
413 <td>
414 This <a href="samples.html#gmail">mail extension</a>
415 uses a <em>browser action</em>
416 (icon in the toolbar).
417 </td>
418 <td>
419 This <a href="samples.html#news">news reader extension</a>
420 features a browser action that,
421 when clicked,
422 shows a <em>popup</em>.
423 </td>
424 <td>
425 This <a href="samples.html#mappy">map extension</a>
426 uses a <em>page action</em>
427 (icon in the address bar)
428 and <em>content script</em>
429 (code injected into a web page).
430 </td>
431 </tr>
432 </tbody></table>
433
391 <p> 434 <p>
435 Extensions (and packaged apps) can also present a UI in other ways,
436 such as adding to the Chrome context menu,
437 providing an options page,
438 or using a content script that changes how pages look.
392 See the <a href="devguide.html">Developer's Guide</a> 439 See the <a href="devguide.html">Developer's Guide</a>
393 for a complete list of extension features, 440 for a complete list of extension features,
394 with implementation details 441 with links to implementation details
395 for each one. 442 for each one.
396 </p> 443 </p>
397 444
445
446 <h3 id="packagedapp-ui">Packaged app UIs</h3>
447
448 <p>
449 A packaged app usually presents its main functionality using
450 an HTML page that's bundled into the app.
451 For example, the following packaged app
452 displays a Flash file within an HTML page.
453 </p>
454
455 <img src="images/index/flashapp.png" width="372" height="300" alt="screenshot">
456
457 <p>
458 For more information,
459 see <a href="apps.html">Packaged Apps</a>.
460 </p>
461
398 <h2 id="files">Files</h2> 462 <h2 id="files">Files</h2>
399 <p> 463 <p>
400 Each extension has the following files: 464 Each extension has the following files:
401 <!-- PENDING: This could use a picture --> 465 <!-- PENDING: This could use a picture -->
402 </p> 466 </p>
403 467
404 <ul> 468 <ul>
405 <li>A <b>manifest file</b></li> 469 <li>A <b>manifest file</b></li>
406 <li>One or more <b>HTML files</b> (unless the extension is a theme)</li> 470 <li>One or more <b>HTML files</b> (unless the extension is a theme)</li>
407 <li><em>Optional:</em> One or more <b>JavaScript files</b></li> 471 <li><em>Optional:</em> One or more <b>JavaScript files</b></li>
408 <li><em>Optional:</em> Any other files your extension needs — 472 <li><em>Optional:</em> Any other files your extension needs—for
409 for example, image files</li> 473 example, image files</li>
410 </ul> 474 </ul>
411 475
412 <p> 476 <p>
413 While you're working on your extension, 477 While you're working on your extension,
414 you put all these files into a single folder. 478 you put all these files into a single folder.
415 When you distribute your extension, 479 When you distribute your extension,
416 the contents of the folder are packaged into a special ZIP file 480 the contents of the folder are packaged into a special ZIP file
417 that has a <code>.crx</code> suffix. 481 that has a <code>.crx</code> suffix.
418 If you put your extension in the gallery, 482 If you upload your extension using the
419 the gallery creates the <code>.crx</code> file for you. 483 <a href="https://chrome.google.com/webstore/developer/dashboard">Chrome Develope r Dashboard</a>,
484 the <code>.crx</code> file is created for you.
420 For details on distributing extensions, 485 For details on distributing extensions,
421 see <a href="hosting.html">Hosting</a>. 486 see <a href="hosting.html">Hosting</a>.
422 </p> 487 </p>
423 488
424 489
425 <h3 id="relative-urls">Referring to files</h3> 490 <h3 id="relative-urls">Referring to files</h3>
426 491
427 <p> 492 <p>
428 You can put any file you like into an extension, 493 You can put any file you like into an extension,
429 but how do you use it? 494 but how do you use it?
(...skipping 23 matching lines...) Expand all
453 You can see the IDs for all your loaded extensions 518 You can see the IDs for all your loaded extensions
454 by going to the URL <b>chrome://extensions</b>. 519 by going to the URL <b>chrome://extensions</b>.
455 The <em>&lt;pathToFile&gt;</em> is the location of the file 520 The <em>&lt;pathToFile&gt;</em> is the location of the file
456 under the extension's top folder; 521 under the extension's top folder;
457 it's the same as the relative URL. 522 it's the same as the relative URL.
458 </p> 523 </p>
459 524
460 <!-- [PENDING: Should mention/reflect/link to <a href="http://dev.chromium.org/d evelopers/design-documents/extensions/i18n">internationalization</a> when it's r eady.] --> 525 <!-- [PENDING: Should mention/reflect/link to <a href="http://dev.chromium.org/d evelopers/design-documents/extensions/i18n">internationalization</a> when it's r eady.] -->
461 526
462 527
463 <a name="H3-3"></a><h3>The manifest file</h3> 528 <a name="H3-5"></a><h3>The manifest file</h3>
464 529
465 <p> 530 <p>
466 The manifest file, called <code>manifest.json</code>, 531 The manifest file, called <code>manifest.json</code>,
467 gives information about the extension, 532 gives information about the extension,
468 such as the most important files 533 such as the most important files
469 and the capabilities that the extension might use. 534 and the capabilities that the extension might use.
470 Here's a typical manifest file for a browser action 535 Here's a typical manifest file for a browser action
471 that uses information from google.com: 536 that uses information from google.com:
472 </p> 537 </p>
473 538
(...skipping 161 matching lines...) Expand 10 before | Expand all | Expand 10 after
635 <h2 id="incognito"> Saving data and incognito mode </h2> 700 <h2 id="incognito"> Saving data and incognito mode </h2>
636 701
637 <p> 702 <p>
638 Extensions can save data using 703 Extensions can save data using
639 the HTML5 <a href="http://dev.w3.org/html5/webstorage/">web storage API</a> 704 the HTML5 <a href="http://dev.w3.org/html5/webstorage/">web storage API</a>
640 (such as <code>localStorage</code>) 705 (such as <code>localStorage</code>)
641 or by making server requests that result in saving data. 706 or by making server requests that result in saving data.
642 Whenever you want to save something, 707 Whenever you want to save something,
643 first consider whether it's 708 first consider whether it's
644 from a window that's in incognito mode. 709 from a window that's in incognito mode.
645 By default, extensions don't run in incognito windows. 710 By default, extensions don't run in incognito windows,
646 However, users can selectively enable your extension for incognito mode, 711 and packaged apps <em>do</em>.
647 so you need to consider what a user expects 712 You need to consider what a user expects
648 from your extension in that case. 713 from your extension or packaged app
714 when the browser is incognito.
649 </p> 715 </p>
650 716
651 <p> 717 <p>
652 <em>Incognito mode</em> promises that the window will leave no tracks. 718 <em>Incognito mode</em> promises that the window will leave no tracks.
653 When dealing with data from incognito windows, 719 When dealing with data from incognito windows,
654 do your best to honor this promise. 720 do your best to honor this promise.
655 For example, if your extension normally 721 For example, if your extension normally
656 saves browsing history to the cloud, 722 saves browsing history to the cloud,
657 don't save history from incognito windows. 723 don't save history from incognito windows.
658 On the other hand, you can store 724 On the other hand, you can store
(...skipping 233 matching lines...) Expand 10 before | Expand all | Expand 10 after
892 _uff=0; 958 _uff=0;
893 urchinTracker(); 959 urchinTracker();
894 } 960 }
895 catch(e) {/* urchinTracker not available. */} 961 catch(e) {/* urchinTracker not available. */}
896 </script> 962 </script>
897 <!-- end analytics --> 963 <!-- end analytics -->
898 </div> 964 </div>
899 </div> <!-- /gc-footer --> 965 </div> <!-- /gc-footer -->
900 </div> <!-- /gc-container --> 966 </div> <!-- /gc-container -->
901 </body></html> 967 </body></html>
OLDNEW
« no previous file with comments | « chrome/common/extensions/docs/override.html ('k') | chrome/common/extensions/docs/packaging.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698