| OLD | NEW |
|---|
| (Empty) | |
| 1 <style> |
| 2 #pics { |
| 3 margin:2em 1em 1.5em; |
| 4 } |
| 5 |
| 6 #pics td { |
| 7 text-align:center; |
| 8 width:50%!important; |
| 9 border:none; |
| 10 padding:0 1em; |
| 11 font-size:90%; |
| 12 } |
| 13 |
| 14 #pics img { |
| 15 width:188; |
| 16 height:246; |
| 17 border:none; |
| 18 } |
| 19 </style> |
| 20 |
| 21 <div id="pageData-title" class="pageData">Override Pages</div> |
| 22 |
| 23 <p> |
| 24 Override pages are a way to replace a page |
| 25 that Google Chrome provides |
| 26 with an HTML file that your extension provides. |
| 27 An override page usually has CSS and JavaScript code, |
| 28 in addition to HTML. |
| 29 </p> |
| 30 |
| 31 <p> |
| 32 Currently, the only page you can replace is |
| 33 the <em>New Tab page</em> — |
| 34 the page that appears |
| 35 when the user creates a new tab or window. |
| 36 </p> |
| 37 |
| 38 <table id="pics"> |
| 39 <tr> |
| 40 <td> <b>The default New Tab page</b> </td> |
| 41 <td> <b>An alternative New Tab page</b> </td> |
| 42 </tr> |
| 43 <tr> |
| 44 <td> |
| 45 <img src="images/ntp-default.png" |
| 46 alt="default New Tab page"> |
| 47 </td> |
| 48 <td> |
| 49 <img src="images/ntp-blank.png" |
| 50 alt="a blank New Tab page"> |
| 51 </td> |
| 52 </tr> |
| 53 </table> |
| 54 |
| 55 |
| 56 <p class="comment"> |
| 57 [PENDING: update these screenshots.] |
| 58 </p> |
| 59 |
| 60 <h2 id="manifest">Manifest</h2> |
| 61 |
| 62 <p> |
| 63 Register your New Tab page in the |
| 64 <a href="manifest.html">extension manifest</a> |
| 65 like this: |
| 66 </p> |
| 67 |
| 68 <pre> |
| 69 "chrome_url_overrides": { |
| 70 "newtab": "newtab.html" |
| 71 } |
| 72 </pre> |
| 73 |
| 74 <h2 id="tips">Tips</h2> |
| 75 |
| 76 <p> |
| 77 For an effective New Tab page, follow these guidelines: |
| 78 </p> |
| 79 |
| 80 <ul> |
| 81 <li> |
| 82 <p> |
| 83 <b>Make your page quick and small.</b> <br /> |
| 84 Because the New Tab page appears often, |
| 85 its performance is important. |
| 86 For example, avoid synchronous fetches of network or database resources. |
| 87 </p> |
| 88 </li> |
| 89 <li> |
| 90 <p> |
| 91 <b>Include a title in your page.</b> <br /> |
| 92 Otherwise people will see the URL of the page, |
| 93 which might confuse them. |
| 94 Here's an example of specifying the title: |
| 95 <code><title>New Tab</title></code> |
| 96 </p> |
| 97 |
| 98 <li> |
| 99 <p> |
| 100 <b>Don't rely on the page having the keyboard focus.</b> <br /> |
| 101 The address bar always gets the focus first |
| 102 when the user creates a new tab. |
| 103 </p> |
| 104 </li> |
| 105 <li> |
| 106 <p> |
| 107 <b>Don't try to emulate the default New Tab page.</b> <br /> |
| 108 The APIs necessary to create |
| 109 a slightly modified version of the default New Tab page — |
| 110 with top pages, |
| 111 recently closed pages, |
| 112 tips, |
| 113 a theme background image, |
| 114 and so on — |
| 115 don't exist yet. |
| 116 Until they do, |
| 117 you're better off trying to make something completely different. |
| 118 </p> |
| 119 </li> |
| 120 </ul> |
| 121 |
| 122 <h2 id="examples">Examples</h2> |
| 123 |
| 124 <p> |
| 125 For an example of specifying a very simple New Tab page, |
| 126 see the |
| 127 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/test/data/extens
ions/samples/override_igoogle/">override_igoogle</a> sample. |
| 128 It uses a 3-line file named <code>redirect.html</code> |
| 129 to implement the New Tab page. |
| 130 </p> |
| 131 |
| 132 <p class="comment"> |
| 133 [PENDING: Maybe have a gallery of NTPs?] |
| 134 </p> |
| OLD | NEW |
|---|
Chromium Code Reviews
