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
136
137
138
139
140
141
142
143
144
145
146
|
<style>
a img {
border:0;
}
</style>
<div id="pageData-showTOC" class="pageData">true</div>
<p>
This page shows some sample extensions,
with links that let you install them
and find their source code.
Each sample also has links to the documentation
for each feature used by the sample.
</p>
<p><b>Note:</b> To run these samples,
you need to get on an early access release channel of Google Chrome.
The normal, "Stable channel" release of Google Chrome
doesn't yet support extensions.
</p>
<ul>
<li> <b>Windows</b> or <b>Linux</b>: Subscribe to the <a href="http://www.google.com/landing/chrome/beta/">Beta channel</a> </li>
<li> <b>Mac</b>: Subscribe to the <a href="http://www.chromium.org/getting-involved/dev-channel#TOC-Mac">Dev channel</a> </li>
</ul>
<p>
For more example code, see the
<a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/" target="_blank">Chromium examples directory</a>.
For tips on using the code viewer, see
<a href="#viewsource">How to view the source code</a>.
</p>
<h2 id="featured">Sample extensions</h2>
<h3 id="gmail">Google Mail Checker</h3>
<p>Adds a Google Mail button to the toolbar, displaying the number of unread messages in your inbox. Click the button to open your inbox.
<p>Included with no charge is a swell animation when the number of unread items changes.
<p><a href="https://clients2.google.com/service/update2/crx?response=redirect&x=id%3Dmihcahmgecmbnbcchbopgniflfhgnkff%26uc%26lang%3Den-US"><img src="images/google-mail-checker-capture.png" width="243" height="170" style="margin-bottom:0.5em"></a><br>
<b><a href="https://clients2.google.com/service/update2/crx?response=redirect&x=id%3Dmihcahmgecmbnbcchbopgniflfhgnkff%26uc%26lang%3Den-US">Install</a>
<a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/extensions/gmail/">Source code</a></b>
<br><br>
<p>Features used:
<ul>
<li><a href="browserAction.html">Browser action</a> (with canvas-based animation)
<li><a href="browserAction.html#badge">Badge</a>
<li><a href="background_pages.html">Background page</a>
<li><a href="xhr.html">Cross-origin XMLHttpRequest</a>
<li><a href="tabs.html">Tabs</a> module
</ul>
<br>
<h3 id="subscribe_page_action">Subscribe in Feed Reader</h3>
<p>Adds a small icon to the address bar when a web page contains a feed that can be subscribed to. When you click the icon, you'll see a preview of the feed and have the option to subscribe with the web-based reader of your choice.
<p><a href="https://clients2.google.com/service/update2/crx?response=redirect&x=id%3Dnlbjncdgjeocebhnmkbbbdekmmmcbfjd%26uc%26lang%3Den-US"><img src="images/subscribe-cap1.png" style="margin-bottom:0.5em" width="342" height="165"></a>
<p><a href="https://clients2.google.com/service/update2/crx?response=redirect&x=id%3Dnlbjncdgjeocebhnmkbbbdekmmmcbfjd%26uc%26lang%3Den-US"><img src="images/subscribe-cap2.png" style="margin-bottom:0.5em" width="566" height="327"></a><br>
<b><a href="https://clients2.google.com/service/update2/crx?response=redirect&x=id%3Dnlbjncdgjeocebhnmkbbbdekmmmcbfjd%26uc%26lang%3Den-US">Install</a> <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/test/data/extensions/subscribe_page_action/">Source code</a></b>
<br><br>
<p>Features used:
<ul>
<li><a href="pageAction.html">Page action</a>
<li><a href="background_pages.html">Background page</a>
<li><a href="content_scripts.html">Content scripts</a>
<li><a href="messaging.html">Message passing</a>
<li><a href="xhr.html">Cross-origin XMLHttpRequest</a>
</ul>
<br>
<h3 id="news">News Reader</h3>
<p>Uses a popup to display the first 5 items from the "Google News - top news" RSS feed. The popup dynamically resizes itself to fit additional content.
<p><a href="https://clients2.google.com/service/update2/crx?response=redirect&x=id%3Dmmdhomleggalggemanamhjdhafaabfdi%26uc%26lang%3Den-US"><img src="images/news.gif" style="margin-bottom:0.5em" width="475" height="346"></a><br>
<b><a href="https://clients2.google.com/service/update2/crx?response=redirect&x=id%3Dmmdhomleggalggemanamhjdhafaabfdi%26uc%26lang%3Den-US">Install</a> <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/extensions/news/">Source code</a></b>
<br><br>
<p>Features used:
<ul>
<li><a href="browserAction.html">Browser action</a>
<li><a href="xhr.html">Cross-origin XMLHttpRequest</a>
</ul>
<br>
<h2 id="otherExtensions">Other sample extensions</h2>
<p>These samples use similar capabilities to the ones above, but to implement different features.</p>
<dl>
<dt>Chromium buildbot monitor</dt>
<dd>Monitors the Chromium tree status <br />
<b><a href="https://clients2.google.com/service/update2/crx?response=redirect&x=id%3Dafmppjmdopaajlhgcddfhfhfgincjeih%26uc%26lang%3Den-US">Install</a> <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/extensions/news/">Source code</a></b>
</dd>
<dt>Mappy</dt>
<dd>Lets you bring up a map for the first address on any web page <br />
<b><a href="https://clients2.google.com/service/update2/crx?response=redirect&x=id%3Dobjeacibkcphiplbghlbmlbnihbbmfjl%26uc%26lang%3Den-US">Install</a> <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/extensions/mappy/">Source code</a></b>
</dd>
<dt>Email this page</dt>
<dd>Lets you share the current web page by sending it in an email <br />
<b><a href="https://clients2.google.com/service/update2/crx?response=redirect&x=id%3Ddbeoemfhkdniadbojeencpkgmobndpai%26uc%26lang%3Den-US">Install</a> <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/extensions/email_this_page/">Source code</a></b>
</dd>
</dl>
<h2 id="viewsource">How to view the source code</h2>
<p>
The source code links in this page take you to a directory
(for example,
<a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/extensions/gmail/">examples/extensions/gmail</a>)
that lists all the files in an extension.
To view a file,
first click its filename.
If the page that comes up has an <b>as text</b> link,
click that link to view the page's source code.
</p>
<p>
To download the file,
right-click the <b>download</b> link.
You can also left-click the <b>download</b> link
to view the source code for files such as
<a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/extensions/gmail/manifest.json">manifest.json</a>
that have no <b>as text</b> link.
</p>
<p>
We're working on a way to make it easier to look at the sample source code.
If you'd like to track our progress,
put a star by bug <a href="http://code.google.com/p/chromium/issues/detail?id=25247">25247</a>.
</p>
|
