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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
|
<div id="pageData-title" class="pageData">Tutorial: Getting Started</div>
<div id="pageData-showTOC" class="pageData">true</div>
<p>
This tutorial walks you through creating a simple extension.
To complete this tutorial, you must have Windows.
(Linux and Mac don't yet support extensions.)
</p>
<h2 id="browser">Get your browser ready</h2>
<p>
To develop extensions for Google Chrome, you need to set up your browser:
</p>
<ol>
<li><a href="http://dev.chromium.org/getting-involved/dev-channel">Subscribe
to the Dev channel</a> of Google Chrome for Windows. </li>
<li><a href="http://dev.chromium.org/developers/creating-and-using-profiles">Create
a separate profile</a> for testing
<em>(optional but highly recommended)</em>.
Having a testing profile means that you can use Google Chrome
(with your default profile)
for everyday browsing,
even if your extension has horrible bugs.</li>
</ol>
<h2 id="load">Create and load an extension</h2>
<p>
In this section, you'll write a <em>toolstrip</em> —
an extension
that puts a bit of UI into the <em>toolbar</em>
at the bottom of the Google Chrome window.
</p>
<ol>
<li>
Create a folder somewhere on your computer to contain your extension's code.
We'll assume the folder is located at
<strong><code>c:\myext</code></strong>,
but it can be anywhere.
</li>
<li>
Inside your extension's folder,
create a text file called <strong><code>manifest.json</code></strong>,
and put this in it:
<pre>{
"name": "My First Extension",
"version": "1.0",
"description": "The first extension that I made.",
"toolstrips": [
"my_toolstrip.html"
]
}</pre>
</li>
<li>
In the same folder, create a text file called
<strong><code>my_toolstrip.html</code></strong>,
and put this in it:
<pre><div class="toolstrip-button">
<span>Hello, World!</span>
</div></pre>
</li>
<li> Load the extension:
<ol type="a">
<li>
Change the shortcut that you use to start the browser
(or create a new one)
so that it has the
<code>--load-extension</code> flag.
For example, if your extension is at <code>c:\myext</code>,
your shortcut might look something like this:
<pre>chrome.exe <span class="newCode">--load-extension="c:\myext"</span></pre>
</li>
<li>Exit Google Chrome.
If you have a separate profile for testing,
you only need to exit the browser instances that use the testing profile. </li>
<li>Double-click the shortcut to start the browser.</li>
</ol>
<p>
<b>Note:</b>
To run already-packaged extensions
the browser must be started with the
<code>--enable-extensions</code> or <code>--load-extension</code> flag.
An exception:
themes run in the Dev channel version of Google Chrome,
no flags required.
For details on changing shortcut properties, see
<a href="http://dev.chromium.org/developers/creating-and-using-profiles">Creating
and Using Profiles</a>.
</p>
</li>
</ol>
<p>
You should see the UI for your extension at the bottom left of the browser, looking something like this:
</p>
<table class="imagelayout">
<tbody>
<tr class="images">
<td width="33%"><img src="images/hw-1.gif"
alt="" /></td>
<td width="33%"><img src="images/hw-2.gif"
alt="" /></td>
<td width="33%"><img src="images/hw-3.gif"
alt="" /></td>
</tr>
<tr>
<td width="33%"> default appearance</td>
<td width="33%"> initial onhover appearance</td>
<td width="33%"> final onhover appearance</td>
</tr>
</tbody>
</table>
<p>
Your extension's button is automatically styled
to look like it belongs in the browser.
If you put the cursor over the button,
the button gets a nice, rounded edge,
just like the buttons in the bookmark bar.
After a while, a tooltip comes up, identifying the extension.
</p>
<p> [PENDING: troubleshooting info should go here.
what are symptoms of common typos, including misnamed files?
what are the symptoms if you don't have the dev channel?] </p>
<h2 id="code">Add code to the extension</h2>
<p> In this step, you'll make your extension <em>do</em> something besides just look good. </p>
<ol>
<li>
<p> Inside your extension's folder,
create a text file called <strong><code>hello_world.html</code></strong>,
and add the following code to it:</p>
<blockquote> <a href="samples/hello_world.txt">CSS
and JavaScript code for hello_world</a></blockquote>
</li>
<li>
<p> Edit <code>my_toolstrip.html</code>, so that it has the following code: </p>
<pre><div class="toolstrip-button"<span class="newCode"> onclick="window.open('hello_world.html')"</span>>
<span>Hello, World!</span>
</div></pre>
</li>
<li>
Restart the browser to load the new version of the extension.</li>
<li>Click the button.
A window should come up that displays <code>hello_world.html</code>. </li>
</ol>
<p> It should look something like this:</p>
<img src="images/hello_world-page.gif" alt="a window with a grid of images related to HELLO WORLD" />
<p> If you don't see that page,
try the instructions again,
following them exactly.
Don't try loading an HTML file that isn't in the extension's folder —
it won't work! </p>
<h2 id="summary">Summary</h2>
<p>
[PENDING: Summarize what we did,
what it means,
what else we would've done if this were a real extension (e.g. package it),
and where to find more information.
Suggest where to go next.]</p>
|