OLD | NEW |
(Empty) | |
| 1 <h1 class="page_title">Override Pages</h1> |
| 2 <style> |
| 3 #pics { |
| 4 margin:2em 1em 1.5em; |
| 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 #pics img { |
| 14 width:188; |
| 15 height:246; |
| 16 border:none; |
| 17 } |
| 18 </style> |
| 19 <p> |
| 20 Override pages are a way to substitute an HTML file from your extension |
| 21 for a page that Google Chrome normally provides. |
| 22 In addition to HTML, |
| 23 an override page usually has CSS and JavaScript code. |
| 24 </p> |
| 25 <p> |
| 26 An extension can replace any one of the following pages: |
| 27 <ul> |
| 28 <li> <b>Bookmark Manager:</b> |
| 29 The page that appears when the user chooses |
| 30 the Bookmark Manager menu item |
| 31 from the wrench menu or, on Mac, |
| 32 the Bookmark Manager item from the Bookmarks menu. |
| 33 You can also get to this page by entering the URL |
| 34 <b>chrome://bookmarks</b>. |
| 35 </li> |
| 36 <li> <b>History:</b> |
| 37 The page that appears when the user |
| 38 chooses the History menu item |
| 39 from the Tools (wrench) menu or, on Mac, |
| 40 the Show Full History item from the History menu. |
| 41 You can also get to this page by entering the URL |
| 42 <b>chrome://history</b>. |
| 43 </li> |
| 44 <li> <b>New Tab:</b> |
| 45 The page that appears when the user creates a new tab or window. |
| 46 You can also get to this page by entering the URL |
| 47 <b>chrome://newtab</b>. |
| 48 </li> |
| 49 </ul> |
| 50 </p> |
| 51 <p class="note"> |
| 52 <b>Note:</b> |
| 53 A single extension can override |
| 54 <b>only one page</b>. |
| 55 For example, an extension can't override both |
| 56 the Bookmark Manager and History pages. |
| 57 </p> |
| 58 <p> |
| 59 Incognito windows are treated specially. |
| 60 New Tab pages cannot be overridden in incognito windows. |
| 61 Other override pages work in incognito windows |
| 62 as long as the |
| 63 <a href="manifest.html#incognito">incognito</a> |
| 64 manifest property is set to "spanning" |
| 65 (which is the default value for extensions |
| 66 but not for packaged apps). |
| 67 See <a href="overview.html#incognito">Saving data and incognito mode</a> |
| 68 in the Overview for more details on how you should treat |
| 69 incognito windows. |
| 70 </p> |
| 71 <p> |
| 72 The following screenshots show the default New Tab page |
| 73 next to a custom New Tab page. |
| 74 </p> |
| 75 <table id="pics"> |
| 76 <tr> |
| 77 <td> <b>The default New Tab page</b> </td> |
| 78 <td> <b>An alternative New Tab page</b> </td> |
| 79 </tr> |
| 80 <tr> |
| 81 <td> |
| 82 <img src="{{static}}/images/ntp-default.png" |
| 83 alt="default New Tab page" |
| 84 width="200" height="173"> |
| 85 </td> |
| 86 <td> |
| 87 <img src="{{static}}/images/ntp-blank.png" |
| 88 alt="a blank New Tab page" |
| 89 width="200" height="173"> |
| 90 </td> |
| 91 </tr> |
| 92 </table> |
| 93 <h2 id="manifest">Manifest</h2> |
| 94 <p> |
| 95 Register an override page in the |
| 96 <a href="manifest.html">extension manifest</a> like this: |
| 97 </p> |
| 98 <pre>{ |
| 99 "name": "My extension", |
| 100 ... |
| 101 <b> "chrome_url_overrides" : { |
| 102 "<em>pageToOverride</em>": "<em>myPage.html</em>" |
| 103 }</b>, |
| 104 ... |
| 105 }</pre> |
| 106 <p> |
| 107 For <code><em>pageToOverride</em></code>, substitute one of the following: |
| 108 </p> |
| 109 <ul> |
| 110 <li> <code>bookmarks</code> |
| 111 <li> <code>history</code> |
| 112 <li> <code>newtab</code> |
| 113 </ul> |
| 114 <h2 id="tips">Tips</h2> |
| 115 <p> |
| 116 For an effective override page, follow these guidelines: |
| 117 </p> |
| 118 <ul> |
| 119 <li> |
| 120 <p> |
| 121 <b>Make your page quick and small.</b> <br /> |
| 122 Users expect built-in browser pages to open instantly. |
| 123 Avoid doing things that might take a long time. |
| 124 For example, avoid synchronous fetches of network or database resources. |
| 125 </p> |
| 126 </li> |
| 127 <li> |
| 128 <p> |
| 129 <b>Include a title in your page.</b> <br /> |
| 130 Otherwise people might see the URL of the page, |
| 131 which could be confusing. |
| 132 Here's an example of specifying the title: |
| 133 <code><title>New Tab</title></code> |
| 134 </p> |
| 135 </li> |
| 136 <li> |
| 137 <p> |
| 138 <b>Don't rely on the page having the keyboard focus.</b> <br /> |
| 139 The address bar always gets the focus first |
| 140 when the user creates a new tab. |
| 141 </p> |
| 142 </li> |
| 143 <li> |
| 144 <p> |
| 145 <b>Don't try to emulate the default New Tab page.</b> <br /> |
| 146 The APIs necessary to create |
| 147 a slightly modified version of the default New Tab page — |
| 148 with top pages, |
| 149 recently closed pages, |
| 150 tips, |
| 151 a theme background image, |
| 152 and so on — |
| 153 don't exist yet. |
| 154 Until they do, |
| 155 you're better off trying to make something completely different. |
| 156 </p> |
| 157 </li> |
| 158 </ul> |
| 159 <h2 id="examples"> Examples </h2> |
| 160 <p> |
| 161 See the |
| 162 <a href="samples.html#chrome_url_overrides">override samples</a>. |
| 163 </p> |
OLD | NEW |