OLD | NEW |
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 127 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
138 <li><a href="options.html">Options Pages</a></li> | 138 <li><a href="options.html">Options Pages</a></li> |
139 <li class="leftNavSelected">Override Pages</li> | 139 <li class="leftNavSelected">Override Pages</li> |
140 <li><a href="pageAction.html">Page Actions</a></li> | 140 <li><a href="pageAction.html">Page Actions</a></li> |
141 <li><a href="themes.html">Themes</a></li> | 141 <li><a href="themes.html">Themes</a></li> |
142 </ul> | 142 </ul> |
143 </li> | 143 </li> |
144 <li>Browser Interaction | 144 <li>Browser Interaction |
145 <ul> | 145 <ul> |
146 <li><a href="bookmarks.html">Bookmarks</a></li> | 146 <li><a href="bookmarks.html">Bookmarks</a></li> |
147 <li><a href="events.html">Events</a></li> | 147 <li><a href="events.html">Events</a></li> |
| 148 <li><a href="history.html">History</a></li> |
148 <li><a href="tabs.html">Tabs</a></li> | 149 <li><a href="tabs.html">Tabs</a></li> |
149 <li><a href="windows.html">Windows</a></li> | 150 <li><a href="windows.html">Windows</a></li> |
150 </ul> | 151 </ul> |
151 </li> | 152 </li> |
152 <li>Implementation | 153 <li>Implementation |
153 <ul> | 154 <ul> |
154 <li><a href="background_pages.html">Background Pages</a></li> | 155 <li><a href="background_pages.html">Background Pages</a></li> |
155 <li><a href="content_scripts.html">Content Scripts</a></li> | 156 <li><a href="content_scripts.html">Content Scripts</a></li> |
156 <li><a href="xhr.html">Cross-Origin XHR</a></li> | 157 <li><a href="xhr.html">Cross-Origin XHR</a></li> |
157 <li><a href="i18n.html">Internationalization</a></li> | 158 <li><a href="i18n.html">Internationalization</a></li> |
(...skipping 127 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
285 </style> | 286 </style> |
286 | 287 |
287 <div id="pageData-title" class="pageData">Override Pages</div> | 288 <div id="pageData-title" class="pageData">Override Pages</div> |
288 <div id="pageData-showTOC" class="pageData">true</div> | 289 <div id="pageData-showTOC" class="pageData">true</div> |
289 | 290 |
290 <p> | 291 <p> |
291 Override pages are a way to replace a page | 292 Override pages are a way to replace a page |
292 that Google Chrome provides | 293 that Google Chrome provides |
293 with an HTML file that your extension provides. | 294 with an HTML file that your extension provides. |
294 An override page usually has CSS and JavaScript code, | 295 An override page usually has CSS and JavaScript code, |
295 in addition to HTML. | 296 in addition to HTML. A single extension can only override |
| 297 one page. |
296 </p> | 298 </p> |
297 | 299 |
298 <p> | 300 <p> |
299 Currently, the only page you can replace is | 301 Currently, extensions can replace two pages: |
300 the <em>New Tab page</em> — | 302 </p><ul> |
301 the page that appears | 303 <li> The <em>New Tab page</em> — |
302 when the user creates a new tab or window. | 304 the page that appears when the user creates a new tab or window.</li> |
303 </p> | |
304 | 305 |
| 306 <li> The <em>History page</em> — |
| 307 the page that appears when the user selects the 'History' menu item.</li> |
| 308 </ul> |
| 309 <p></p> |
305 <table id="pics"> | 310 <table id="pics"> |
306 <tbody><tr> | 311 <tbody><tr> |
307 <td> <b>The default New Tab page</b> </td> | 312 <td> <b>The default New Tab page</b> </td> |
308 <td> <b>An alternative New Tab page</b> </td> | 313 <td> <b>An alternative New Tab page</b> </td> |
309 </tr> | 314 </tr> |
310 <tr> | 315 <tr> |
311 <td> | 316 <td> |
312 <img src="images/ntp-default.png" alt="default New Tab page" width="200" h
eight="173"> | 317 <img src="images/ntp-default.png" alt="default New Tab page" width="200" h
eight="173"> |
313 </td> | 318 </td> |
314 <td> | 319 <td> |
315 <img src="images/ntp-blank.png" alt="a blank New Tab page" width="200" hei
ght="173"> | 320 <img src="images/ntp-blank.png" alt="a blank New Tab page" width="200" hei
ght="173"> |
316 </td> | 321 </td> |
317 </tr> | 322 </tr> |
318 </tbody></table> | 323 </tbody></table> |
319 | 324 |
320 | |
321 <h2 id="manifest">Manifest</h2> | 325 <h2 id="manifest">Manifest</h2> |
322 | 326 |
323 <p> | 327 <p> |
324 Register your New Tab page in the | 328 Register override pages in the |
325 <a href="manifest.html">extension manifest</a> | 329 <a href="manifest.html">extension manifest</a> |
326 like this: | 330 using property <code>chrome_url_overrides</code>. For example, the new tabs pag
e can be overridden like this: |
327 </p> | 331 </p> |
328 | 332 |
329 <pre>{ | 333 <pre>{ |
330 "name": "My extension", | 334 "name": "My extension", |
331 ... | 335 ... |
332 <b>"chrome_url_overrides": { | 336 <b>"chrome_url_overrides": { |
333 "newtab": "newtab.html" | 337 "newtab": "newtab.html" |
334 }</b>, | 338 }</b>, |
335 ... | 339 ... |
336 }</pre> | 340 }</pre> |
337 | 341 |
| 342 You can override the history page like this: |
| 343 |
| 344 <pre>{ |
| 345 "name": "My extension", |
| 346 ... |
| 347 <b>"chrome_url_overrides": { |
| 348 "history": "history.html" |
| 349 }</b>, |
| 350 ... |
| 351 }</pre> |
| 352 |
| 353 A single extension may only override one page. |
| 354 |
338 <h2 id="tips">Tips</h2> | 355 <h2 id="tips">Tips</h2> |
339 | 356 |
340 <p> | 357 <p> |
341 For an effective New Tab page, follow these guidelines: | 358 For an effective override pages, follow these guidelines: |
342 </p> | 359 </p> |
343 | 360 |
344 <ul> | 361 <ul> |
345 <li> | 362 <li> |
346 <p> | 363 <p> |
347 <b>Make your page quick and small.</b> <br> | 364 <b>Make your page quick and small.</b> <br> |
348 Because the New Tab page appears often, | 365 Users expect built in browser pages to open instantly. Avoid doing things t
hat |
349 its performance is important. | 366 may take a long time. |
350 For example, avoid synchronous fetches of network or database resources. | 367 For example, avoid synchronous fetches of network or database resources. |
351 </p> | 368 </p> |
352 </li> | 369 </li> |
353 <li> | 370 <li> |
354 <p> | 371 <p> |
355 <b>Include a title in your page.</b> <br> | 372 <b>Include a title in your page.</b> <br> |
356 Otherwise people will see the URL of the page, | 373 Otherwise people will see the URL of the page, |
357 which might confuse them. | 374 which might confuse them. |
358 Here's an example of specifying the title: | 375 Here's an example of specifying the title: |
359 <code><title>New Tab</title></code> | 376 <code><title>New Tab</title></code> |
360 </p> | 377 </p> |
361 | 378 |
362 </li><li> | 379 </li><li> |
363 <p> | 380 <p> |
364 <b>Don't rely on the page having the keyboard focus.</b> <br> | 381 <b>Don't rely on the page having the keyboard focus.</b> <br> |
365 The address bar always gets the focus first | 382 The address bar always gets the focus first |
366 when the user creates a new tab. | 383 when the user creates a new tab. |
367 </p> | 384 </p> |
368 </li> | 385 </li> |
369 <li> | 386 <li> |
370 <p> | 387 <p> |
371 <b>Don't try to emulate the default New Tab page.</b> <br> | 388 <b>Don't try to emulate the default pages.</b> <br> |
372 The APIs necessary to create | 389 The APIs necessary to create |
373 a slightly modified version of the default New Tab page — | 390 a slightly modified version of the default New Tab page — |
374 with top pages, | 391 with top pages, |
375 recently closed pages, | 392 recently closed pages, |
376 tips, | 393 tips, |
377 a theme background image, | 394 a theme background image, |
378 and so on — | 395 and so on — |
379 don't exist yet. | 396 don't exist yet. |
380 Until they do, | 397 Until they do, |
381 you're better off trying to make something completely different. | 398 you're better off trying to make something completely different. |
(...skipping 194 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
576 _uff=0; | 593 _uff=0; |
577 urchinTracker(); | 594 urchinTracker(); |
578 } | 595 } |
579 catch(e) {/* urchinTracker not available. */} | 596 catch(e) {/* urchinTracker not available. */} |
580 </script> | 597 </script> |
581 <!-- end analytics --> | 598 <!-- end analytics --> |
582 </div> | 599 </div> |
583 </div> <!-- /gc-footer --> | 600 </div> <!-- /gc-footer --> |
584 </div> <!-- /gc-container --> | 601 </div> <!-- /gc-container --> |
585 </body></html> | 602 </body></html> |
OLD | NEW |