| 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 |