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

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

Issue 219213007: Remove .html extension from links (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 6 years, 7 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>Overview</h1> 1 <h1>Overview</h1>
2 2
3 3
4 <p> 4 <p>
5 Once you've finished this page 5 Once you've finished this page
6 and the 6 and the
7 <a href="getstarted.html">Getting Started</a> tutorial, 7 <a href="getstarted">Getting Started</a> tutorial,
8 you'll be all set to start writing extensions. 8 you'll be all set to start writing extensions.
9 </p> 9 </p>
10 10
11 <h2 id="what">The basics</h2> 11 <h2 id="what">The basics</h2>
12 12
13 <p> 13 <p>
14 An extension is a zipped bundle of files&mdash;HTML, 14 An extension is a zipped bundle of files&mdash;HTML,
15 CSS, JavaScript, images, and anything else you need&mdash;that 15 CSS, JavaScript, images, and anything else you need&mdash;that
16 adds functionality to the Google Chrome browser. 16 adds functionality to the Google Chrome browser.
17 Extensions are essentially web pages, 17 Extensions are essentially web pages,
18 and they can use all the 18 and they can use all the
19 <a href="api_other.html">APIs that the browser provides to web pages</a>, 19 <a href="api_other">APIs that the browser provides to web pages</a>,
20 from XMLHttpRequest to JSON to HTML5. 20 from XMLHttpRequest to JSON to HTML5.
21 </p> 21 </p>
22 22
23 <p> 23 <p>
24 Extensions can interact with web pages or servers using 24 Extensions can interact with web pages or servers using
25 <a href="content_scripts.html">content scripts</a> or 25 <a href="content_scripts">content scripts</a> or
26 <a href="xhr.html">cross-origin XMLHttpRequests</a>. 26 <a href="xhr">cross-origin XMLHttpRequests</a>.
27 Extensions can also interact programmatically 27 Extensions can also interact programmatically
28 with browser features such as 28 with browser features such as
29 <a href="bookmarks.html">bookmarks</a> 29 <a href="bookmarks">bookmarks</a>
30 and <a href="tabs.html">tabs</a>. 30 and <a href="tabs">tabs</a>.
31 </p> 31 </p>
32 32
33 <h3 id="extension-ui">Extension UIs</h3> 33 <h3 id="extension-ui">Extension UIs</h3>
34 34
35 <p> 35 <p>
36 Many extensions&mdash;but not Chrome Apps&mdash;add 36 Many extensions&mdash;but not Chrome Apps&mdash;add
37 UI to Google Chrome in the form of 37 UI to Google Chrome in the form of
38 <a href="browserAction.html">browser actions</a> 38 <a href="browserAction">browser actions</a>
39 or <a href="pageAction.html">page actions</a>. 39 or <a href="pageAction">page actions</a>.
40 Each extension can have at most one browser action or page action. 40 Each extension can have at most one browser action or page action.
41 Choose a <b>browser action</b> when the extension is relevant to most pages. 41 Choose a <b>browser action</b> when the extension is relevant to most pages.
42 Choose a <b>page action</b> when the extension's icon 42 Choose a <b>page action</b> when the extension's icon
43 should appear or disappear, 43 should appear or disappear,
44 depending on the page. 44 depending on the page.
45 </p> 45 </p>
46 46
47 <table class="simple"> 47 <table class="simple">
48 <tr> 48 <tr>
49 <td width="33%"> 49 <td width="33%">
50 <img src="{{static}}/images/overview/browser-action.png" 50 <img src="{{static}}/images/overview/browser-action.png"
51 width="147" height="100" 51 width="147" height="100"
52 alt="screenshot" /> 52 alt="screenshot" />
53 </td> 53 </td>
54 <td width="33%"> 54 <td width="33%">
55 <img src="{{static}}/images/overview/page-action.png" 55 <img src="{{static}}/images/overview/page-action.png"
56 width="147" height="100" 56 width="147" height="100"
57 alt="screenshot" /> 57 alt="screenshot" />
58 </td> 58 </td>
59 <td> 59 <td>
60 <img src="{{static}}/images/overview/browser-action-with-popup.png" 60 <img src="{{static}}/images/overview/browser-action-with-popup.png"
61 width="147" height="100" 61 width="147" height="100"
62 alt="screenshot" /> 62 alt="screenshot" />
63 </td> 63 </td>
64 </tr> 64 </tr>
65 65
66 <tr> 66 <tr>
67 <td> 67 <td>
68 This <a href="samples.html#google-mail-checker">Google Mail Checker extensio n</a> 68 This <a href="samples#google-mail-checker">Google Mail Checker extension</a>
69 uses a <em>browser action</em> 69 uses a <em>browser action</em>
70 (icon in the toolbar). 70 (icon in the toolbar).
71 </td> 71 </td>
72 <td> 72 <td>
73 This <a href="samples.html#mappy">Mappy extension</a> 73 This <a href="samples#mappy">Mappy extension</a>
74 uses a <em>page action</em> 74 uses a <em>page action</em>
75 (icon in the address bar) 75 (icon in the address bar)
76 and <em>content script</em> 76 and <em>content script</em>
77 (code injected into a web page). 77 (code injected into a web page).
78 </td> 78 </td>
79 <td> 79 <td>
80 This <a href="samples.html#news-reader">News Reader extension</a> 80 This <a href="samples#news-reader">News Reader extension</a>
81 features a browser action that, 81 features a browser action that,
82 when clicked, 82 when clicked,
83 shows a <em>popup</em>. 83 shows a <em>popup</em>.
84 </td> 84 </td>
85 </tr> 85 </tr>
86 </table> 86 </table>
87 87
88 <p> 88 <p>
89 Extensions (and Chrome Apps) can also present a UI in other ways, 89 Extensions (and Chrome Apps) can also present a UI in other ways,
90 such as adding to the Chrome context menu, 90 such as adding to the Chrome context menu,
91 providing an options page, 91 providing an options page,
92 or using a content script that changes how pages look. 92 or using a content script that changes how pages look.
93 See the <a href="devguide.html">Developer's Guide</a> 93 See the <a href="devguide">Developer's Guide</a>
94 for a complete list of extension features, 94 for a complete list of extension features,
95 with links to implementation details 95 with links to implementation details
96 for each one. 96 for each one.
97 </p> 97 </p>
98 98
99 <h2 id="files">Files</h2> 99 <h2 id="files">Files</h2>
100 <p> 100 <p>
101 Each extension has the following files: 101 Each extension has the following files:
102 102
103 </p> 103 </p>
104 104
105 <ul> 105 <ul>
106 <li>A <b>manifest file</b></li> 106 <li>A <b>manifest file</b></li>
107 <li>One or more <b>HTML files</b> (unless the extension is a theme)</li> 107 <li>One or more <b>HTML files</b> (unless the extension is a theme)</li>
108 <li><em>Optional:</em> One or more <b>JavaScript files</b></li> 108 <li><em>Optional:</em> One or more <b>JavaScript files</b></li>
109 <li><em>Optional:</em> Any other files your extension needs&mdash;for 109 <li><em>Optional:</em> Any other files your extension needs&mdash;for
110 example, image files</li> 110 example, image files</li>
111 </ul> 111 </ul>
112 112
113 <p> 113 <p>
114 While you're working on your extension, 114 While you're working on your extension,
115 you put all these files into a single folder. 115 you put all these files into a single folder.
116 When you distribute your extension, 116 When you distribute your extension,
117 the contents of the folder are packaged into a special ZIP file 117 the contents of the folder are packaged into a special ZIP file
118 that has a <code>.crx</code> suffix. 118 that has a <code>.crx</code> suffix.
119 If you upload your extension using the 119 If you upload your extension using the
120 <a href="https://chrome.google.com/webstore/developer/dashboard">Chrome Develope r Dashboard</a>, 120 <a href="https://chrome.google.com/webstore/developer/dashboard">Chrome Develope r Dashboard</a>,
121 the <code>.crx</code> file is created for you. 121 the <code>.crx</code> file is created for you.
122 For details on distributing extensions, 122 For details on distributing extensions,
123 see <a href="hosting.html">Hosting</a>. 123 see <a href="hosting">Hosting</a>.
124 </p> 124 </p>
125 125
126 126
127 <h3 id="relative-urls">Referring to files</h3> 127 <h3 id="relative-urls">Referring to files</h3>
128 128
129 <p> 129 <p>
130 You can put any file you like into an extension, 130 You can put any file you like into an extension,
131 but how do you use it? 131 but how do you use it?
132 Usually, 132 Usually,
133 you can refer to the file using a relative URL, 133 you can refer to the file using a relative URL,
(...skipping 29 matching lines...) Expand all
163 <p> 163 <p>
164 While you're working on an extension 164 While you're working on an extension
165 (before it's packaged), 165 (before it's packaged),
166 the extension ID can change. 166 the extension ID can change.
167 Specifically, the ID of an unpacked extension will change 167 Specifically, the ID of an unpacked extension will change
168 if you load the extension from a different directory; 168 if you load the extension from a different directory;
169 the ID will change again when you package the extension. 169 the ID will change again when you package the extension.
170 If your extension's code 170 If your extension's code
171 needs to specify the full path to a file within the extension, 171 needs to specify the full path to a file within the extension,
172 you can use the <code>@@extension_id</code> 172 you can use the <code>@@extension_id</code>
173 <a href="i18n.html#overview-predefined">predefined message</a> 173 <a href="i18n#overview-predefined">predefined message</a>
174 to avoid hardcoding the ID during development. 174 to avoid hardcoding the ID during development.
175 </p> 175 </p>
176 176
177 <p> 177 <p>
178 When you package an extension 178 When you package an extension
179 (typically, by uploading it with the dashboard), 179 (typically, by uploading it with the dashboard),
180 the extension gets a permanent ID, 180 the extension gets a permanent ID,
181 which remains the same even after you update the extension. 181 which remains the same even after you update the extension.
182 Once the extension ID is permanent, 182 Once the extension ID is permanent,
183 you can change all occurrences of 183 you can change all occurrences of
(...skipping 25 matching lines...) Expand all
209 "permissions": ["http://*.google.com/", "https://*.google.com/"], 209 "permissions": ["http://*.google.com/", "https://*.google.com/"],
210 "browser_action": { 210 "browser_action": {
211 "default_title": "", 211 "default_title": "",
212 "default_icon": "icon_19.png", 212 "default_icon": "icon_19.png",
213 "default_popup": "popup.html" 213 "default_popup": "popup.html"
214 } 214 }
215 }</pre> 215 }</pre>
216 216
217 <p> 217 <p>
218 For details, see 218 For details, see
219 <a href="manifest.html">Manifest Files</a>. 219 <a href="manifest">Manifest Files</a>.
220 </p> 220 </p>
221 221
222 <h2 id="arch">Architecture</h2> 222 <h2 id="arch">Architecture</h2>
223 223
224 <p> 224 <p>
225 Many extensions have a <em>background page</em>, 225 Many extensions have a <em>background page</em>,
226 an invisible page 226 an invisible page
227 that holds the main logic of the extension. 227 that holds the main logic of the extension.
228 An extension can also contain other pages 228 An extension can also contain other pages
229 that present the extension's UI. 229 that present the extension's UI.
(...skipping 17 matching lines...) Expand all
247 and has JavaScript code that controls 247 and has JavaScript code that controls
248 the behavior of the browser action in both windows. 248 the behavior of the browser action in both windows.
249 </p> 249 </p>
250 250
251 <img src="{{static}}/images/overview/arch-1.gif" 251 <img src="{{static}}/images/overview/arch-1.gif"
252 width="232" height="168" 252 width="232" height="168"
253 alt="Two windows and a box representing a background page (background.html). On e window has a yellow icon; the other has both a yellow icon and a blue icon. Th e yellow icons are connected to the background page." /> 253 alt="Two windows and a box representing a background page (background.html). On e window has a yellow icon; the other has both a yellow icon and a blue icon. Th e yellow icons are connected to the background page." />
254 254
255 <p> 255 <p>
256 There are two types of background pages: 256 There are two types of background pages:
257 <a href="background_pages.html">persistent background pages</a>, 257 <a href="background_pages">persistent background pages</a>,
258 and <a href="event_pages.html">event pages</a>. Persistent 258 and <a href="event_pages">event pages</a>. Persistent
259 background pages, as the name suggests, are always open. 259 background pages, as the name suggests, are always open.
260 Event pages are opened and closed as needed. Unless you absolutely 260 Event pages are opened and closed as needed. Unless you absolutely
261 need your background page to run all the time, prefer to use 261 need your background page to run all the time, prefer to use
262 an event page. 262 an event page.
263 </p> 263 </p>
264 264
265 <!-- PENDING: Perhaps show a picture of many background page processes. 265 <!-- PENDING: Perhaps show a picture of many background page processes.
266 This could build on a figure that shows the process architecture. --> 266 This could build on a figure that shows the process architecture. -->
267 267
268 <p> 268 <p>
269 See <a href="event_pages.html">Event Pages</a> 269 See <a href="event_pages">Event Pages</a>
270 and <a href="background_pages.html">Background Pages</a> 270 and <a href="background_pages">Background Pages</a>
271 for more details. 271 for more details.
272 </p> 272 </p>
273 273
274 <h3 id="pages">UI pages</h3> 274 <h3 id="pages">UI pages</h3>
275 275
276 <p> 276 <p>
277 Extensions can contain ordinary HTML pages that display the extension's UI. 277 Extensions can contain ordinary HTML pages that display the extension's UI.
278 For example, a browser action can have a popup, 278 For example, a browser action can have a popup,
279 which is implemented by an HTML file. 279 which is implemented by an HTML file.
280 Any extension can have an options page, 280 Any extension can have an options page,
(...skipping 26 matching lines...) Expand all
307 The popup doesn't need to duplicate code 307 The popup doesn't need to duplicate code
308 that's in the background page 308 that's in the background page
309 because the popup can invoke functions on the background page. 309 because the popup can invoke functions on the background page.
310 </p> 310 </p>
311 311
312 <img src="{{static}}/images/overview/arch-2.gif" 312 <img src="{{static}}/images/overview/arch-2.gif"
313 width="256" height="168" 313 width="256" height="168"
314 alt="A browser window containing a browser action that's displaying a popup. Th e popup's HTML file (popup.html) can communicate with the extension's background page (background.html)." /> 314 alt="A browser window containing a browser action that's displaying a popup. Th e popup's HTML file (popup.html) can communicate with the extension's background page (background.html)." />
315 315
316 <p> 316 <p>
317 See <a href="browserAction.html">Browser Actions</a>, 317 See <a href="browserAction">Browser Actions</a>,
318 <a href="options.html">Options</a>, 318 <a href="options">Options</a>,
319 <a href="override.html">Override Pages</a>, 319 <a href="override">Override Pages</a>,
320 and the <a href="#pageComm">Communication between pages</a> section 320 and the <a href="#pageComm">Communication between pages</a> section
321 for more details. 321 for more details.
322 </p> 322 </p>
323 323
324 324
325 <h3 id="contentScripts">Content scripts</h3> 325 <h3 id="contentScripts">Content scripts</h3>
326 326
327 <p> 327 <p>
328 If your extension needs to interact with web pages, 328 If your extension needs to interact with web pages,
329 then it needs a <em>content script</em>. 329 then it needs a <em>content script</em>.
(...skipping 39 matching lines...) Expand 10 before | Expand all | Expand 10 after
369 </p> 369 </p>
370 370
371 <img src="{{static}}/images/overview/arch-cs.gif" 371 <img src="{{static}}/images/overview/arch-cs.gif"
372 width="238" height="194" 372 width="238" height="194"
373 alt="Like the previous figure, but showing more of the parent extension's files , as well as a communication path between the content script and the parent exte nsion." /> 373 alt="Like the previous figure, but showing more of the parent extension's files , as well as a communication path between the content script and the parent exte nsion." />
374 374
375 375
376 376
377 <p> 377 <p>
378 For more information, 378 For more information,
379 see <a href="content_scripts.html">Content Scripts</a>. 379 see <a href="content_scripts">Content Scripts</a>.
380 </p> 380 </p>
381 381
382 382
383 <h2 id="apis"> Using the chrome.* APIs </h2> 383 <h2 id="apis"> Using the chrome.* APIs </h2>
384 384
385 <p> 385 <p>
386 In addition to having access to all the APIs that web pages and apps can use, 386 In addition to having access to all the APIs that web pages and apps can use,
387 extensions can also use Chrome-only APIs 387 extensions can also use Chrome-only APIs
388 (often called <em>chrome.* APIs</em>) 388 (often called <em>chrome.* APIs</em>)
389 that allow tight integration with the browser. 389 that allow tight integration with the browser.
(...skipping 109 matching lines...) Expand 10 before | Expand all | Expand 10 after
499 Although <code>update()</code> is asynchronous, 499 Although <code>update()</code> is asynchronous,
500 this example doesn't use its callback parameter, 500 this example doesn't use its callback parameter,
501 since we don't do anything about the results of the update. 501 since we don't do anything about the results of the update.
502 </p> 502 </p>
503 503
504 504
505 <h3 id="chrome-more"> More details </h3> 505 <h3 id="chrome-more"> More details </h3>
506 506
507 <p> 507 <p>
508 For more information, see the 508 For more information, see the
509 <a href="api_index.html">chrome.* API docs</a> 509 <a href="api_index">chrome.* API docs</a>
510 and watch this video: 510 and watch this video:
511 </p> 511 </p>
512 512
513 <p> 513 <p>
514 <iframe title="YouTube video player" width="640" height="390" src="http://www.yo utube.com/embed/bmxr75CV36A?rel=0" frameborder="0" allowfullscreen></iframe> 514 <iframe title="YouTube video player" width="640" height="390" src="http://www.yo utube.com/embed/bmxr75CV36A?rel=0" frameborder="0" allowfullscreen></iframe>
515 </p> 515 </p>
516 516
517 <h2 id="pageComm">Communication between pages </h2> 517 <h2 id="pageComm">Communication between pages </h2>
518 518
519 <p> 519 <p>
520 The HTML pages within an extension often need to communicate. 520 The HTML pages within an extension often need to communicate.
521 521
522 Because all of an extension's pages 522 Because all of an extension's pages
523 execute in same process on the same thread, 523 execute in same process on the same thread,
524 the pages can make direct function calls to each other. 524 the pages can make direct function calls to each other.
525 </p> 525 </p>
526 526
527 <p> 527 <p>
528 To find pages in the extension, use 528 To find pages in the extension, use
529 <a href="extension.html"><code>chrome.extension</code></a> 529 <a href="extension"><code>chrome.extension</code></a>
530 methods such as 530 methods such as
531 <code>getViews()</code> and 531 <code>getViews()</code> and
532 <code>getBackgroundPage()</code>. 532 <code>getBackgroundPage()</code>.
533 Once a page has a reference to other pages within the extension, 533 Once a page has a reference to other pages within the extension,
534 the first page can invoke functions on the other pages, 534 the first page can invoke functions on the other pages,
535 and it can manipulate their DOMs. 535 and it can manipulate their DOMs.
536 </p> 536 </p>
537 537
538 <h2 id="incognito"> Saving data and incognito mode </h2> 538 <h2 id="incognito"> Saving data and incognito mode </h2>
539 539
(...skipping 53 matching lines...) Expand 10 before | Expand all | Expand 10 after
593 593
594 <h2 id="now-what"> Now what? </h2> 594 <h2 id="now-what"> Now what? </h2>
595 595
596 <p> 596 <p>
597 Now that you've been introduced to extensions, 597 Now that you've been introduced to extensions,
598 you should be ready to write your own. 598 you should be ready to write your own.
599 Here are some ideas for where to go next: 599 Here are some ideas for where to go next:
600 </p> 600 </p>
601 601
602 <ul> 602 <ul>
603 <li> <a href="getstarted.html">Tutorial: Getting Started</a> </li> 603 <li> <a href="getstarted">Tutorial: Getting Started</a> </li>
604 <li> <a href="tut_debugging.html">Tutorial: Debugging</a> </li> 604 <li> <a href="tut_debugging">Tutorial: Debugging</a> </li>
605 <li> <a href="devguide.html">Developer's Guide</a> </li> 605 <li> <a href="devguide">Developer's Guide</a> </li>
606 <li> <a href="samples.html">Samples</a> </li> 606 <li> <a href="samples">Samples</a> </li>
607 <li> <a href="http://www.youtube.com/view_play_list?p=CA101D6A85FE9D4B">Videos </a>, 607 <li> <a href="http://www.youtube.com/view_play_list?p=CA101D6A85FE9D4B">Videos </a>,
608 such as 608 such as
609 <a href="http://www.youtube.com/watch?v=B4M_a7xejYI&feature=PlayList&p=CA101 D6A85FE9D4B&index=6">Extension Message Passing</a> 609 <a href="http://www.youtube.com/watch?v=B4M_a7xejYI&feature=PlayList&p=CA101 D6A85FE9D4B&index=6">Extension Message Passing</a>
610 </li> 610 </li>
611 </ul> 611 </ul>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698