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