| 1 <!DOCTYPE html><!-- This page is a placeholder for generated extensions api doc.
Note: 1) The <head> information in this page is significant, should be uniform
across api docs and should be edited only with knowledge of the templating mecha
nism. 2) The <body> tag *must* retain id="body" 3) All <body>.innerHTML is gener
eated as an rendering step. If viewed in a browser, it will be re-generated from
the template, json schema and authored overview content. 4) The <body>.innerHTM
L is also generated by an offline step so that this page may easily be indexed b
y search engines. TODO(rafaelw): Abstract this into a "pageshell" that becomes t
he single version of page template shell and the "instance" pages (bookmarks.htm
l, etc...) can be generated with a build step. --><!-- <html> must retain id="te
mplate --><html xmlns="http://www.w3.org/1999/xhtml" jstcache="0"><!-- <head> da
ta is significant and loads the needed libraries and styles --><head jstcache="0
"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" jstcache="
0"> <title jscontent="getPageTitle()" jstcache="1">Tutorial: Getting Started</ti
tle> <link href="css/ApiRefStyles.css" rel="stylesheet" type="text/css" jstcache
="0"> <script type="text/javascript" src="../../../third_party/jstemplate/jstemp
late_compiled.js" jstcache="0"> </script> <script type="text/javascript" src="js
/api_page_generator.js" jstcache="0"></script> <script type="text/javascript" sr
c="js/bootstrap.js" jstcache="0"></script> </head><!-- <body> content is complet
ely generated. Do not edit, as it will be and rewritten. --><body jstcache="0">
<div id="container" jstcache="0"> <a name="top" jstcache="0"> </a> <!-- API HEAD
ER --> <div id="pageHeader" jstcache="0"> <div id="searchbox" jstcache="0"> <for
m action="http://www.google.com/cse" id="cse-search-box" jstcache="0"> <div jstc
ache="0"> <input type="hidden" name="cx" value="002967670403910741006:61_cvzfqtn
o" jstcache="0"> <input type="hidden" name="ie" value="UTF-8" jstcache="0"> <inp
ut type="text" name="q" size="31" jstcache="0"> <input type="submit" name="sa" v
alue="Search" jstcache="0"> </div> </form> <script type="text/javascript" src="h
ttp://www.google.com/jsapi" jstcache="0"></script> <script type="text/javascript
" jstcache="0">google.load("elements", "1", {packages: "transliteration"});</scr
ipt> <script type="text/javascript" src="http://www.google.com/coop/cse/t13n?for
m=cse-search-box&t13n_langs=en" jstcache="0"></script> <script type="text/ja
vascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang
=en" jstcache="0"></script> </div> <div id="pageTitle" jstcache="0"> <h1 jsconte
nt="getPageTitle()" jstcache="1">Tutorial: Getting Started</h1> </div> </div> <!
-- /pageHeader --> <div id="pageContent" jstcache="0"> <!-- SIDENAV --> <div id=
"leftNav" jstcache="0"> <ul jstcache="0"> <li jstcache="0"> <a href="index.html"
jstcache="0">Home</a></li> <li jstcache="0" class="leftNavSelected">Getting Sta
rted </li> <li jstcache="0"> <a href="overview.html" jstcache="0">Overview</a></
li> <li jstcache="0"> <a href="devguide.html" jstcache="0"><div jstcache="0">Dev
eloper's Guide</div></a> <ul jstcache="0"> <li jstcache="0"><a href="toolstrip.h
tml" jstcache="0">Toolstrips</a></li> <li jstcache="0"><a href="pageActions.html
" jstcache="0">Page Actions</a></li> <li jstcache="0"><a href="background_pages.
html" jstcache="0">Background Pages</a></li> <li jstcache="0"><a href="content_s
cripts.html" jstcache="0">Content Scripts</a></li> <li jstcache="0">Events</li>
<li jstcache="0"><a href="tabs.html" jstcache="0">Tabs</a></li> <li jstcache="0"
><a href="windows.html" jstcache="0">Windows</a></li> <li jstcache="0"><a href="
bookmarks.html" jstcache="0">Bookmarks</a></li> <li jstcache="0">Themes</li> <li
jstcache="0"><a href="npapi.html" jstcache="0">NPAPI Plugins</a></li> <li jstca
che="0"><a href="packaging.html" jstcache="0">Packaging</a></li> <li jstcache="0
">Autoupdate</li> </ul> </li> <li jstcache="0"><a href="tutorials.html" jstcache
="0"><div jstcache="0">Tutorials</div></a> <ul jstcache="0"> <li jstcache="0"><a
href="tut_debugging.html" jstcache="0">Debugging</a></li> </ul> </li> <li jstca
che="0">Reference <ul jstcache="0"> <li jstcache="0"> Formats <ul jstcache="0">
<li jstcache="0"><a href="manifest.html" jstcache="0">Manifest Files</a></li> <l
i jstcache="0">Match Patterns</li> <li jstcache="0">Packages (.crx)</li> </ul> <
/li> <li jstcache="0"> <a href="api_index.html" jstcache="0">chrome.* APIs</a> <
/li> <li jstcache="0">Other APIs</li> </ul> </li> <li jstcache="0">Samples <ul j
stcache="0"> <li jstcache="0">[sample 1]</li> <li jstcache="0">[sample 2]</li> <
/ul> </li> </ul> </div> <div id="mainColumn" jstcache="0"> <!-- TABLE OF CONTENT
S --> <div id="toc" jsdisplay="showPageTOC()" jstcache="2"> <p jstcache="0">Cont
ents</p> <ol jstcache="0"> <li jsselect="getStaticTOC()" jstcache="9" jsinstance
="0"> <a jscontent="name" jsvalues=".href:'#' + href" jstcache="14" href="#H2-0"
>Get your browser ready</a> <ol jstcache="0"> <li jsselect="$this.children" jstc
ache="22" jsinstance="*0" style="display: none; "> <a jscontent="name" jsvalues=
".href:'#' + href" jstcache="14">h3Name</a> </li> </ol> </li><li jsselect="getSt
aticTOC()" jstcache="9" jsinstance="1"> <a jscontent="name" jsvalues=".href:'#'
+ href" jstcache="14" href="#H2-1">Create and load an extension</a> <ol jstcache
="0"> <li jsselect="$this.children" jstcache="22" jsinstance="*0" style="display
: none; "> <a jscontent="name" jsvalues=".href:'#' + href" jstcache="14">h3Name<
/a> </li> </ol> </li><li jsselect="getStaticTOC()" jstcache="9" jsinstance="2">
<a jscontent="name" jsvalues=".href:'#' + href" jstcache="14" href="#H2-2">Add c
ode to the extension</a> <ol jstcache="0"> <li jsselect="$this.children" jstcach
e="22" jsinstance="*0" style="display: none; "> <a jscontent="name" jsvalues=".h
ref:'#' + href" jstcache="14">h3Name</a> </li> </ol> </li><li jsselect="getStati
cTOC()" jstcache="9" jsinstance="*3"> <a jscontent="name" jsvalues=".href:'#' +
href" jstcache="14" href="#H2-3">Summary</a> <ol jstcache="0"> <li jsselect="$th
is.children" jstcache="22" jsinstance="*0" style="display: none; "> <a jscontent
="name" jsvalues=".href:'#' + href" jstcache="14">h3Name</a> </li> </ol> </li> <
div jsselect="apiDefinition" jstcache="3" style="display: none; "> <li jstcache=
"0"> <a href="#apiReference" jscontent="'API Reference: ' + getModuleName()" jst
cache="23">API Reference</a> <ol jstcache="0"> <li jsdisplay="$this.properties"
jstcache="5"> <a href="#properties" jstcache="0">Properties</a> <ol jstcache="0"
> <li jsselect="getPropertyListFromObject($this)" jstcache="10"> <a jscontent="n
ame" jsvalues=".href:'#property-' + name" href="#property-anchor" jstcache="42">
propertyName</a> </li> </ol> </li> <li jsdisplay="functions && functions
.length > 0" jstcache="6"> <a href="#methods" jstcache="0">Methods</a> <ol js
tcache="0"> <li jsselect="functions" jstcache="11"> <a jscontent="name" jsvalues
=".href:'#method-' + name" href="#method-anchor" jstcache="43">methodName</a> </
li> </ol> </li> <li jsdisplay="events && events.length > 0" jstcache=
"7"> <a href="#events" jstcache="0">Events</a> <ol jstcache="0"> <li jsselect="e
vents" jstcache="12"> <a jscontent="name" jsvalues=".href:'#event-' + name" href
="#event-anchor" jstcache="44">eventName</a> </li> </ol> </li> <li jsdisplay="ty
pes && types.length > 0" jstcache="8"> <a href="#types" jstcache="0">
Types</a> <ol jstcache="0"> <li jsselect="types" jstcache="13"> <a jscontent="id
" jsvalues=".href:'#type-' + id" href="#id-anchor" jstcache="45">id</a> </li> </
ol> </li> </ol> </li> </div> </ol> </div> <!-- /TABLE OF CONTENTS --> <!-- STATI
C CONTENT PLACEHOLDER --> <div id="static" jstcache="0"><div id="pageData-title"
class="pageData" jstcache="0">Tutorial: Getting Started</div> <div id="pageData
-showTOC" class="pageData" jstcache="0">true</div> <p jstcache="0"> This tutoria
l walks you through creating a simple extension. To complete this tutorial, you
must have Windows. (Linux and Mac don't yet support extensions.) </p> <a name="H
2-0" jstcache="0"></a><h2 id="browser" jstcache="0">Get your browser ready</h2>
<p jstcache="0"> To develop extensions for Google Chrome, you need to set up you
r browser: </p> <ol jstcache="0"> <li jstcache="0"><a href="http://dev.chromium.
org/getting-involved/dev-channel" jstcache="0">Subscribe to the Dev channel</a>
of Google Chrome for Windows. </li> <li jstcache="0"><a href="http://dev.chromiu
m.org/developers/creating-and-using-profiles" jstcache="0">Create a separate pro
file</a> for testing <em jstcache="0">(optional but highly recommended)</em>. Ha
ving a testing profile means that you can use Google Chrome (with your default p
rofile) for everyday browsing, even if your extension has horrible bugs.</li> </
ol> <a name="H2-1" jstcache="0"></a><h2 id="load" jstcache="0">Create and load a
n extension</h2> <p jstcache="0"> In this section, you'll write a <em jstcache="
0">toolstrip</em> — an extension that puts a bit of UI into the <em jstcache="0"
>toolbar</em> at the bottom of the Google Chrome window. </p> <ol jstcache="0">
<li jstcache="0"> Create a folder somewhere on your computer to contain your ext
ension's code. We'll assume the folder is located at <strong jstcache="0"><code
jstcache="0">c:\myext</code></strong>, but it can be anywhere. </li> <li jstcach
e="0"> Inside your extension's folder, create a text file called <strong jstcach
e="0"><code jstcache="0">manifest.json</code></strong>, and put this in it: <pre
jstcache="0">{ "name": "My First Extension", "version": "1.0", "description": "
The first extension that I made.", "toolstrips": [ "my_toolstrip.html" ] }</pre>
</li> <li jstcache="0"> In the same folder, create a text file called <strong j
stcache="0"><code jstcache="0">my_toolstrip.html</code></strong>, and put this i
n it: <pre jstcache="0"><div class="toolstrip-button"> <span>Hello,
World!</span> </div></pre> </li> <li jstcache="0"> Load the extensio
n: <ol type="a" jstcache="0"> <li jstcache="0"> Change the shortcut that you use
to start the browser (or create a new one) so that it has the <code jstcache="0
">--load-extension</code> flag. For example, if your extension is at <code jstca
che="0">c:\myext</code>, your shortcut might look something like this: <pre jstc
ache="0">chrome.exe <span class="newCode" jstcache="0">--load-extension="c:\myex
t"</span></pre> </li> <li jstcache="0">Exit Google Chrome. If you have a separat
e profile for testing, you only need to exit the browser instances that use the
testing profile. </li> <li jstcache="0">Double-click the shortcut to start the b
rowser.</li> </ol> <p jstcache="0"> <b jstcache="0">Note:</b> To run already-pac
kaged extensions the browser must be started with the <code jstcache="0">--enabl
e-extensions</code> or <code jstcache="0">--load-extension</code> flag. An excep
tion: 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.o
rg/developers/creating-and-using-profiles" jstcache="0">Creating and Using Profi
les</a>. </p> </li> </ol> <p jstcache="0"> You should see the UI for your extens
ion at the bottom left of the browser, looking something like this: </p> <table
class="imagelayout" jstcache="0"> <tbody jstcache="0"> <tr class="images" jstcac
he="0"> <td width="33%" jstcache="0"><img src="images/hw-1.gif" alt="" jstcache=
"0"></td> <td width="33%" jstcache="0"><img src="images/hw-2.gif" alt="" jstcach
e="0"></td> <td width="33%" jstcache="0"><img src="images/hw-3.gif" alt="" jstca
che="0"></td> </tr> <tr jstcache="0"> <td width="33%" jstcache="0"> default appe
arance</td> <td width="33%" jstcache="0"> initial onhover appearance</td> <td wi
dth="33%" jstcache="0"> final onhover appearance</td> </tr> </tbody> </table> <p
jstcache="0"> Your extension's button is automatically styled to look like it b
elongs 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 jstcache="0"> [PENDING: tro
ubleshooting info should go here. what are symptoms of common typos, including m
isnamed files? what are the symptoms if you don't have the dev channel?] </p> <a
name="H2-2" jstcache="0"></a><h2 id="code" jstcache="0">Add code to the extensi
on</h2> <p jstcache="0"> In this step, you'll make your extension <em jstcache="
0">do</em> something besides just look good. </p> <ol jstcache="0"> <li jstcache
="0"> <p jstcache="0"> Inside your extension's folder, create a text file called
<strong jstcache="0"><code jstcache="0">hello_world.html</code></strong>, and a
dd the following code to it:</p> <blockquote jstcache="0"> <a href="samples/hell
o_world.txt" jstcache="0">CSS and JavaScript code for hello_world</a></blockquot
e> </li> <li jstcache="0"> <p jstcache="0"> Edit <code jstcache="0">my_toolstrip
.html</code>, so that it has the following code: </p> <pre jstcache="0"><div
class="toolstrip-button"<span class="newCode" jstcache="0"> onclick="window.open
('hello_world.html')"</span>> <span>Hello, World!</span> </div
></pre> </li> <li jstcache="0"> Restart the browser to load the new version o
f the extension.</li> <li jstcache="0">Click the button. A window should come up
that displays <code jstcache="0">hello_world.html</code>. </li> </ol> <p jstcac
he="0"> It should look something like this:</p> <img src="images/hello_world-pag
e.gif" alt="a window with a grid of images related to HELLO WORLD" jstcache="0">
<p jstcache="0"> If you don't see that page, try the instructions again, follow
ing them exactly. Don't try loading an HTML file that isn't in the extension's f
older — it won't work! </p> <a name="H2-3" jstcache="0"></a><h2 id="summary" jst
cache="0">Summary</h2> <p jstcache="0"> [PENDING: Summarize what we did, what it
means, what else we would've done if this were a real extension (e.g. package i
t), and where to find more information. Suggest where to go next.]</p> </div> <!
-- API PAGE --> <div class="apiPage" jsselect="apiDefinition" jstcache="3" style
="display: none; "> <a name="apiReference" jstcache="0"></a> <h2 jscontent="getM
oduleName() + ' API reference'" jstcache="4">chrome.apiname API reference</h2> <
!-- PROPERTIES --> <div jsdisplay="$this.properties" class="apiGroup" jstcache="
5"> <a name="properties" jstcache="0"></a> <h3 id="properties" jstcache="0">Prop
erties</h3> <div jsselect="getPropertyListFromObject($this)" jstcache="10"> <a j
svalues=".name:'property-' + name" jstcache="15"></a> <h4 jscontent="name" jstca
che="16">getLastError</h4> <div class="summary" jstcache="0"> <!-- Note: intenti
onally longer 80 columns --> <span jscontent="getModuleName() + '.'" jstcache="2
4">chrome.extension</span><span jscontent="$this.name" jstcache="25">lastError</
span> </div> <div transclude="valueTemplate" jstcache="17"> </div> </div> </div>
<!-- /apiGroup --> <!-- METHODS --> <div jsdisplay="functions && functi
ons.length > 0" class="apiGroup" id="methods" jstcache="6"> <a name="methods"
jstcache="0"></a> <h3 jstcache="0">Methods</h3> <!-- iterates over all function
s --> <div class="apiItem" jsselect="functions" jstcache="11"> <a jsvalues=".nam
e:'method-' + name" jstcache="18"></a> <!-- method-anchor --> <h4 jscontent="nam
e" jstcache="16">method name</h4> <div class="summary" jstcache="0"><span jsdisp
lay="returns" jscontent="getTypeName(returns)" jstcache="26">void</span> <!-- No
te: intentionally longer 80 columns --> <span jscontent="getFullyQualifiedFuncti
onName($this)" jstcache="27">chrome.module.methodName</span>(<span jsselect="par
ameters" jsvalues="class:optional ? 'optional' : ''" jstcache="28"><span jsdispl
ay="$index" jstcache="34">, </span><span jscontent="getTypeName($this)" jstcache
="35"></span> <var jstcache="0"><span jscontent="name" jstcache="16"></span></va
r></span>)</div> <div class="description" jstcache="0"> <p class="todo" jsdispla
y="!description" jstcache="29">Undocumented.</p> <p jsdisplay="description" jsva
lues=".innerHTML:description" jstcache="30"> A description from the json schema
def of the function goes here. </p> <!-- PARAMETERS --> <h4 jstcache="0">Paramet
ers</h4> <dl jstcache="0"> <div jsselect="parameters" jstcache="36"> <!-- VALUE:
This is a subtemplate that is used elsewhere via jsTemplate *transclude* --> <d
iv id="valueTemplate" jstcache="0"> <dt jstcache="0"> <var jsdisplay="$this.name
" jscontent="$this.name" jstcache="46">paramName</var> <em jstcache="0"> <!-- TY
PE --> <div style="display:inline" jstcache="0"> ( <span class="optional" jsdisp
lay="optional" jstcache="47">optional</span> <span id="typeTemplate" jstcache="0
"> <span jsdisplay="getTypeRef($this)" jstcache="48"> <a jsvalues=".href: getTyp
eRefPage($this) + '#type-' + getTypeRef($this)" jscontent="getTypeRef($this)" js
tcache="50"> Type</a> </span> <span jsdisplay="!getTypeRef($this)" jstcache="49"
> <span jsdisplay="isArray($this)" jstcache="51"> array of <span jsselect="items
" jstcache="53"><span transclude="typeTemplate" jstcache="54"></span></span> </s
pan> <span jsdisplay="!isArray($this)" jscontent="getTypeName($this)" jstcache="
52">paramType</span> </span> </span> ) </div> </em> </dt> <dd class="todo" jsdis
play="!$this.description" jstcache="39"> Undocumented. </dd> <dd jsdisplay="$thi
s.description" jsvalues=".innerHTML:$this.description" jstcache="40"> Descriptio
n of this parameter from the json schema. </dd> <!-- OBJECT PROPERTIES --> <dd j
sdisplay="shouldExpandObject($this)" jstcache="41"> <dl jstcache="0"> <div jssel
ect="getPropertyListFromObject($this)" jstcache="10"> <div transclude="valueTemp
late" jstcache="17"> </div> </div> </dl> </dd> </div> <!-- /VALUE --> </div> </d
l> <!-- RETURNS --> <h4 jsdisplay="returns" jstcache="31">Returns</h4> <dl jstca
che="0"> <div jsselect="returns" jstcache="37"> <div transclude="valueTemplate"
jstcache="17"> </div> </div> </dl> <!-- CALLBACK --> <div jsdisplay="hasCall
back(parameters)" jstcache="32"> <div jsselect="getCallbackParameters(parameters
)" jstcache="38"> <h4 jstcache="0">Callback function</h4> <p jstcache="0"> If yo
u specify the <em jstcache="0">callback</em> parameter, it should specify a func
tion that looks like this: </p> <!-- Note: intentionally longer 80 columns --> <
pre jstcache="0">function(<span jscontent="getSignatureString(parameters)" jstca
che="33">Type param1, Type param2</span>) <span class="subdued" jstcache="0">{..
.}</span>);</pre> <dl jstcache="0"> <div jsselect="parameters" jstcache="36"> <d
iv transclude="valueTemplate" jstcache="17"> </div> </div> </dl> </div> </div> <
/div> <!-- /description --> </div> <!-- /apiItem --> </div> <!-- /apiGroup --> <
!-- EVENTS --> <div jsdisplay="events && events.length > 0" class="ap
iGroup" jstcache="7"> <a name="events" jstcache="0"></a> <h3 id="events" jstcach
e="0">Events</h3> <!-- iterates over all events --> <div jsselect="events" class
="apiItem" jstcache="12"> <a jsvalues=".name:'event-' + name" jstcache="19"></a>
<h4 jscontent="name" jstcache="16">event name</h4> <div class="summary" jstcach
e="0"> <!-- Note: intentionally longer 80 columns --> <span jscontent="getModule
Name() + '.'" class="subdued" jstcache="24">chrome.bookmarks</span><span jsconte
nt="name" jstcache="16">onEvent</span><span class="subdued" jstcache="0">.addLis
tener</span>(function(<span jscontent="getSignatureString(parameters)" jstcache=
"33">Type param1, Type param2</span>) <span class="subdued" jstcache="0">{...}</
span>); </div> <div class="description" jstcache="0"> <p class="todo" jsdisplay=
"!description" jstcache="29">Undocumented.</p> <p jsdisplay="description" jsvalu
es=".innerHTML:description" jstcache="30"> A description from the json schema de
f of the event goes here. </p> <!-- PARAMETERS --> <h4 jstcache="0">Parameters</
h4> <dl jstcache="0"> <div jsselect="parameters" jstcache="36"> <div transclude=
"valueTemplate" jstcache="17"> </div> </div> </dl> </div> <!-- /decription --> <
/div> <!-- /apiItem --> </div> <!-- /apiGroup --> <!-- TYPES --> <div jsdisplay=
"types && types.length > 0" class="apiGroup" jstcache="8"> <a name="t
ypes" jstcache="0"></a> <h3 id="types" jstcache="0">Types</h3> <!-- iterates ove
r all types --> <div jsselect="types" class="apiItem" jstcache="13"> <a jsvalues
=".name:'type-' + id" jstcache="20"></a> <h4 jscontent="id" jstcache="21">type n
ame</h4> <div transclude="valueTemplate" jstcache="17"> </div> </div> <!-- /apiI
tem --> </div> <!-- /apiGroup --> </div> <!-- /apiPage --> </div> <!-- /mainColu
mn --> </div> <!-- /pageContent --> <div id="pageFooter" --="" jstcache="0"> Cop
yright 2009. For terms of use, see the Chromium <a href="http://src.chromium.org
/viewvc/chrome/trunk/src/LICENSE" jstcache="0">license</a>. </div> <!-- /pageFoo
ter --> </div> <!-- /container --> </body></html> | 1 <!DOCTYPE html><!-- This page is a placeholder for generated extensions api doc.
Note: 1) The <head> information in this page is significant, should be uniform
across api docs and should be edited only with knowledge of the templating mecha
nism. 2) The <body> tag *must* retain id="body" 3) All <body>.innerHTML is gener
eated as an rendering step. If viewed in a browser, it will be re-generated from
the template, json schema and authored overview content. 4) The <body>.innerHTM
L is also generated by an offline step so that this page may easily be indexed b
y search engines. TODO(rafaelw): Abstract this into a "pageshell" that becomes t
he single version of page template shell and the "instance" pages (bookmarks.htm
l, etc...) can be generated with a build step. --><!-- <html> must retain id="te
mplate --><html xmlns="http://www.w3.org/1999/xhtml" jstcache="0"><!-- <head> da
ta is significant and loads the needed libraries and styles --><head jstcache="0
"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" jstcache="
0"> <title jscontent="getPageTitle()" jstcache="1">Tutorial: Getting Started (He
llo, World!)</title> <link href="css/ApiRefStyles.css" rel="stylesheet" type="te
xt/css" jstcache="0"> <script type="text/javascript" src="../../../third_party/j
stemplate/jstemplate_compiled.js" jstcache="0"> </script> <script type="text/jav
ascript" src="js/api_page_generator.js" jstcache="0"></script> <script type="tex
t/javascript" src="js/bootstrap.js" jstcache="0"></script> </head><!-- <body> co
ntent is completely generated. Do not edit, as it will be and rewritten. --><bod
y jstcache="0"> <div id="container" jstcache="0"> <a name="top" jstcache="0"> </
a> <!-- API HEADER --> <div id="pageHeader" jstcache="0"> <div id="searchbox" js
tcache="0"> <form action="http://www.google.com/cse" id="cse-search-box" jstcach
e="0"> <div jstcache="0"> <input type="hidden" name="cx" value="0029676704039107
41006:61_cvzfqtno" jstcache="0"> <input type="hidden" name="ie" value="UTF-8" js
tcache="0"> <input type="text" name="q" size="31" jstcache="0"> <input type="sub
mit" name="sa" value="Search" jstcache="0"> </div> </form> <script type="text/ja
vascript" src="http://www.google.com/jsapi" jstcache="0"></script> <script type=
"text/javascript" jstcache="0">google.load("elements", "1", {packages: "translit
eration"});</script> <script type="text/javascript" src="http://www.google.com/c
oop/cse/t13n?form=cse-search-box&t13n_langs=en" jstcache="0"></script> <scri
pt type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-sea
rch-box&lang=en" jstcache="0"></script> </div> <div id="pageTitle" jstcache=
"0"> <h1 jscontent="getPageTitle()" jstcache="1">Tutorial: Getting Started (Hell
o, World!)</h1> </div> </div> <!-- /pageHeader --> <div id="pageContent" jstcach
e="0"> <!-- SIDENAV --> <div id="leftNav" jstcache="0"> <ul jstcache="0"> <li js
tcache="0"> <a href="index.html" jstcache="0">Home</a></li> <li jstcache="0" cla
ss="leftNavSelected">Getting Started </li> <li jstcache="0"> <a href="overview.h
tml" jstcache="0">Overview</a></li> <li jstcache="0"> <a href="devguide.html" js
tcache="0"><div jstcache="0">Developer's Guide</div></a> <ul jstcache="0"> <li j
stcache="0"><a href="toolstrip.html" jstcache="0">Toolstrips</a></li> <li jstcac
he="0"><a href="pageActions.html" jstcache="0">Page Actions</a></li> <li jstcach
e="0"><a href="background_pages.html" jstcache="0">Background Pages</a></li> <li
jstcache="0"><a href="content_scripts.html" jstcache="0">Content Scripts</a></l
i> <li jstcache="0">Events</li> <li jstcache="0"><a href="tabs.html" jstcache="0
">Tabs</a></li> <li jstcache="0"><a href="windows.html" jstcache="0">Windows</a>
</li> <li jstcache="0"><a href="bookmarks.html" jstcache="0">Bookmarks</a></li>
<li jstcache="0">Themes</li> <li jstcache="0"><a href="npapi.html" jstcache="0">
NPAPI Plugins</a></li> <li jstcache="0"><a href="packaging.html" jstcache="0">Pa
ckaging</a></li> <li jstcache="0">Autoupdate</li> </ul> </li> <li jstcache="0"><
a href="tutorials.html" jstcache="0"><div jstcache="0">Tutorials</div></a> <ul j
stcache="0"> <li jstcache="0"><a href="tut_debugging.html" jstcache="0">Debuggin
g</a></li> </ul> </li> <li jstcache="0">Reference <ul jstcache="0"> <li jstcache
="0"> Formats <ul jstcache="0"> <li jstcache="0"><a href="manifest.html" jstcach
e="0">Manifest Files</a></li> <li jstcache="0">Match Patterns</li> <li jstcache=
"0">Packages (.crx)</li> </ul> </li> <li jstcache="0"> <a href="api_index.html"
jstcache="0">chrome.* APIs</a> </li> <li jstcache="0"> <a href="api_other.html"
jstcache="0">Other APIs</a> </li> </ul> </li> <li jstcache="0"><a href="http://d
ev.chromium.org/developers/design-documents/extensions/samples" jstcache="0">Sam
ples</a></li> </ul> </div> <div id="mainColumn" jstcache="0"> <!-- TABLE OF CONT
ENTS --> <div id="toc" jsdisplay="showPageTOC()" jstcache="2"> <p jstcache="0">C
ontents</p> <ol jstcache="0"> <li jsselect="getStaticTOC()" jstcache="9" jsinsta
nce="0"> <a jscontent="name" jsvalues=".href:'#' + href" jstcache="14" href="#H2
-0">Get your browser ready</a> <ol jstcache="0"> <li jsselect="$this.children" j
stcache="22" jsinstance="*0" style="display: none; "> <a jscontent="name" jsvalu
es=".href:'#' + href" jstcache="14">h3Name</a> </li> </ol> </li><li jsselect="ge
tStaticTOC()" jstcache="9" jsinstance="1"> <a jscontent="name" jsvalues=".href:'
#' + href" jstcache="14" href="#H2-1">Create and load an extension</a> <ol jstca
che="0"> <li jsselect="$this.children" jstcache="22" jsinstance="*0" style="disp
lay: none; "> <a jscontent="name" jsvalues=".href:'#' + href" jstcache="14">h3Na
me</a> </li> </ol> </li><li jsselect="getStaticTOC()" jstcache="9" jsinstance="2
"> <a jscontent="name" jsvalues=".href:'#' + href" jstcache="14" href="#H2-2">Ad
d code to the extension</a> <ol jstcache="0"> <li jsselect="$this.children" jstc
ache="22" jsinstance="*0" style="display: none; "> <a jscontent="name" jsvalues=
".href:'#' + href" jstcache="14">h3Name</a> </li> </ol> </li><li jsselect="getSt
aticTOC()" jstcache="9" jsinstance="*3"> <a jscontent="name" jsvalues=".href:'#'
+ href" jstcache="14" href="#H2-3">Now what?</a> <ol jstcache="0"> <li jsselect
="$this.children" jstcache="22" jsinstance="*0" style="display: none; "> <a jsco
ntent="name" jsvalues=".href:'#' + href" jstcache="14">h3Name</a> </li> </ol> </
li> <div jsselect="apiDefinition" jstcache="3" style="display: none; "> <li jstc
ache="0"> <a href="#apiReference" jscontent="'API reference: ' + getModuleName()
" jstcache="4">API reference</a> <ol jstcache="0"> <li jsdisplay="$this.properti
es" jstcache="5"> <a href="#properties" jstcache="0">Properties</a> <ol jstcache
="0"> <li jsselect="getPropertyListFromObject($this)" jstcache="10"> <a jsconten
t="name" jsvalues=".href:'#property-' + name" href="#property-anchor" jstcache="
41">propertyName</a> </li> </ol> </li> <li jsdisplay="functions && funct
ions.length > 0" jstcache="6"> <a href="#methods" jstcache="0">Methods</a> <o
l jstcache="0"> <li jsselect="functions" jstcache="11"> <a jscontent="name" jsva
lues=".href:'#method-' + name" href="#method-anchor" jstcache="42">methodName</a
> </li> </ol> </li> <li jsdisplay="events && events.length > 0" jstca
che="7"> <a href="#events" jstcache="0">Events</a> <ol jstcache="0"> <li jsselec
t="events" jstcache="12"> <a jscontent="name" jsvalues=".href:'#event-' + name"
href="#event-anchor" jstcache="43">eventName</a> </li> </ol> </li> <li jsdisplay
="types && types.length > 0" jstcache="8"> <a href="#types" jstcache=
"0">Types</a> <ol jstcache="0"> <li jsselect="types" jstcache="13"> <a jscontent
="id" jsvalues=".href:'#type-' + id" href="#id-anchor" jstcache="44">id</a> </li
> </ol> </li> </ol> </li> </div> </ol> </div> <!-- /TABLE OF CONTENTS --> <!-- S
TATIC CONTENT PLACEHOLDER --> <div id="static" jstcache="0"><div id="pageData-ti
tle" class="pageData" jstcache="0">Tutorial: Getting Started (Hello, World!)</di
v> <div id="pageData-showTOC" class="pageData" jstcache="0">true</div> <p jstcac
he="0"> This tutorial walks you through creating a simple extension. To complete
this tutorial, you must have Windows. (Linux and Mac don't yet support extensio
ns.) </p> <a name="H2-0" jstcache="0"></a><h2 id="browser" jstcache="0">Get your
browser ready</h2> <p jstcache="0"> To develop extensions for Google Chrome, yo
u need to set up your browser: </p> <ol jstcache="0"> <li jstcache="0"><a href="
http://dev.chromium.org/getting-involved/dev-channel" jstcache="0">Subscribe to
the Dev channel</a> of Google Chrome for Windows. </li> <li jstcache="0"><a href
="http://dev.chromium.org/developers/creating-and-using-profiles" jstcache="0">C
reate a separate profile</a> for testing <em jstcache="0">(optional but highly r
ecommended)</em>. Having a testing profile means that you can use Google Chrome
(with your default profile) for everyday browsing, even if your extension has ho
rrible bugs.</li> </ol> <a name="H2-1" jstcache="0"></a><h2 id="load" jstcache="
0">Create and load an extension</h2> <p jstcache="0"> In this section, you'll wr
ite a <em jstcache="0">toolstrip</em> — an extension that puts a bit of UI into
the <em jstcache="0">toolbar</em> at the bottom of the Google Chrome window. </p
> <ol jstcache="0"> <li jstcache="0"> Create a folder somewhere on your computer
to contain your extension's code. We'll assume the folder is located at <strong
jstcache="0"><code jstcache="0">c:\myext</code></strong>, but it can be anywher
e. </li> <li jstcache="0"> Inside your extension's folder, create a text file ca
lled <strong jstcache="0"><code jstcache="0">manifest.json</code></strong>, and
put this in it: <pre jstcache="0">{ "name": "My First Extension", "version": "1.
0", "description": "The first extension that I made.", "toolstrips": [ "my_tools
trip.html" ] }</pre> </li> <li jstcache="0"> In the same folder, create a text f
ile called <strong jstcache="0"><code jstcache="0">my_toolstrip.html</code></str
ong>, and put this in it: <pre jstcache="0"><div class="toolstrip-button">
<span>Hello, World!</span> </div></pre> </li> <li jstcache="0
"> Load the extension: <ol type="a" jstcache="0"> <li jstcache="0"> Change the s
hortcut that you use to start the browser (or create a new one) so that it has t
he <code jstcache="0">--load-extension</code> flag. For example, if your extensi
on is at <code jstcache="0">c:\myext</code>, your shortcut might look something
like this: <pre jstcache="0">chrome.exe <b jstcache="0">--load-extension="c:\mye
xt"</b></pre> </li> <li jstcache="0">Exit Google Chrome. If you have a separate
profile for testing, you only need to exit the browser instances that use the te
sting profile. </li> <li jstcache="0">Double-click the shortcut to start the bro
wser.</li> </ol> <p jstcache="0"> <b jstcache="0">Note:</b> To run already-packa
ged extensions the browser must be started with the <code jstcache="0">--enable-
extensions</code> or <code jstcache="0">--load-extension</code> flag. An excepti
on: themes run in the Dev channel version of Google Chrome, no flags required. F
or details on changing shortcut properties, see <a href="http://dev.chromium.org
/developers/creating-and-using-profiles" jstcache="0">Creating and Using Profile
s</a>. </p> </li> </ol> <p jstcache="0"> You should see the UI for your extensio
n at the bottom left of the browser, looking something like this: </p> <table cl
ass="imagelayout" jstcache="0"> <tbody jstcache="0"> <tr class="images" jstcache
="0"> <td width="33%" jstcache="0"><img src="images/hw-1.gif" alt="" jstcache="0
"></td> <td width="33%" jstcache="0"><img src="images/hw-2.gif" alt="" jstcache=
"0"></td> <td width="33%" jstcache="0"><img src="images/hw-3.gif" alt="" jstcach
e="0"></td> </tr> <tr jstcache="0"> <td width="33%" jstcache="0"> default appear
ance</td> <td width="33%" jstcache="0"> initial onhover appearance</td> <td widt
h="33%" jstcache="0"> final onhover appearance</td> </tr> </tbody> </table> <p j
stcache="0"> Your extension's button is automatically styled to look like it bel
ongs in the browser. If you put the cursor over the button, the button gets a ni
ce, rounded edge, just like the buttons in the bookmark bar. After a while, a to
oltip comes up, identifying the extension. </p> <p jstcache="0"> [PENDING: troub
leshooting info should go here. what are symptoms of common typos, including mis
named files? what are the symptoms if you don't have the dev channel?] </p> <a n
ame="H2-2" jstcache="0"></a><h2 id="code" jstcache="0">Add code to the extension
</h2> <p jstcache="0"> In this step, you'll make your extension <em jstcache="0"
>do</em> something besides just look good. </p> <ol jstcache="0"> <li jstcache="
0"> <p jstcache="0"> Inside your extension's folder, create a text file called <
strong jstcache="0"><code jstcache="0">hello_world.html</code></strong>, and add
the following code to it:</p> <blockquote jstcache="0"> <a href="samples/hello_
world.txt" jstcache="0">CSS and JavaScript code for hello_world</a></blockquote>
</li> <li jstcache="0"> <p jstcache="0"> Edit <code jstcache="0">my_toolstrip.h
tml</code>, so that it has the following code: </p> <pre jstcache="0"><div cl
ass="toolstrip-button"<b jstcache="0"> onclick="window.open('hello_world.html')"
</b>> <span>Hello, World!</span> </div></pre> </li> <li jst
cache="0"> Restart the browser to load the new version of the extension.</li> <l
i jstcache="0">Click the button. A window should come up that displays <code jst
cache="0">hello_world.html</code>. </li> </ol> <p jstcache="0"> It should look s
omething like this:</p> <img src="images/hello_world-page.gif" alt="a window wit
h a grid of images related to HELLO WORLD" jstcache="0"> <p jstcache="0"> 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> <a name="H2-3" jstcache="0"></a><h2 id="summary" jstcache="0">Now what?</h2>
<p jstcache="0"> [PENDING: Summarize what we did, what it means, what else we w
ould've done if this were a real extension (e.g. package it), and where to find
more information.]</p> <ul jstcache="0"> <li jstcache="0"> Subscribe to <a href=
"http://groups.google.com/group/chromium-extensions/subscribe" jstcache="0">chro
mium-extensions</a> to keep up to date with the latest news </li> <li jstcache="
0"> Learn how to debug your extension by following the <a href="tut_debugging.ht
ml" jstcache="0">debugging tutorial</a> </li> <li jstcache="0"> Look at some <a
href="http://sites.google.com/a/chromium.org/dev/developers/design-documents/ext
ensions/samples" jstcache="0">sample extensions</a> </li> <li jstcache="0"> Lear
n more about <a href="toolstrips.html" jstcache="0">toolstrips</a> </li> <li jst
cache="0"> <a href="packaging.html" jstcache="0">Package</a> your extension into
a <code jstcache="0">.crx</code> file so you can share it with your friends </l
i> </ul> </div> <!-- API PAGE --> <div class="apiPage" jsselect="apiDefinition"
jstcache="3" style="display: none; "> <a name="apiReference" jstcache="0"></a> <
h2 jscontent="'API reference: ' + getModuleName()" jstcache="4">API reference: c
hrome.apiname </h2> <!-- PROPERTIES --> <div jsdisplay="$this.properties" class=
"apiGroup" jstcache="5"> <a name="properties" jstcache="0"></a> <h3 id="properti
es" jstcache="0">Properties</h3> <div jsselect="getPropertyListFromObject($this)
" jstcache="10"> <a jsvalues=".name:'property-' + name" jstcache="15"></a> <h4 j
scontent="name" jstcache="16">getLastError</h4> <div class="summary" jstcache="0
"> <!-- Note: intentionally longer 80 columns --> <span jscontent="getModuleName
() + '.'" jstcache="23">chrome.extension</span><span jscontent="$this.name" jstc
ache="24">lastError</span> </div> <div transclude="valueTemplate" jstcache="17">
</div> </div> </div> <!-- /apiGroup --> <!-- METHODS --> <div jsdisplay="functi
ons && functions.length > 0" class="apiGroup" id="methods" jstcache="
6"> <a name="methods" jstcache="0"></a> <h3 jstcache="0">Methods</h3> <!-- itera
tes over all functions --> <div class="apiItem" jsselect="functions" jstcache="1
1"> <a jsvalues=".name:'method-' + name" jstcache="18"></a> <!-- method-anchor -
-> <h4 jscontent="name" jstcache="16">method name</h4> <div class="summary" jstc
ache="0"><span jsdisplay="returns" jscontent="getTypeName(returns)" jstcache="25
">void</span> <!-- Note: intentionally longer 80 columns --> <span jscontent="ge
tFullyQualifiedFunctionName($this)" jstcache="26">chrome.module.methodName</span
>(<span jsselect="parameters" jsvalues="class:optional ? 'optional' : ''" jstcac
he="27"><span jsdisplay="$index" jstcache="33">, </span><span jscontent="getType
Name($this)" jstcache="34"></span> <var jstcache="0"><span jscontent="name" jstc
ache="16"></span></var></span>)</div> <div class="description" jstcache="0"> <p
class="todo" jsdisplay="!description" jstcache="28">Undocumented.</p> <p jsdispl
ay="description" jsvalues=".innerHTML:description" jstcache="29"> A description
from the json schema def of the function goes here. </p> <!-- PARAMETERS --> <h4
jstcache="0">Parameters</h4> <dl jstcache="0"> <div jsselect="parameters" jstca
che="35"> <!-- VALUE: This is a subtemplate that is used elsewhere via jsTemplat
e *transclude* --> <div id="valueTemplate" jstcache="0"> <dt jstcache="0"> <var
jsdisplay="$this.name" jscontent="$this.name" jstcache="45">paramName</var> <em
jstcache="0"> <!-- TYPE --> <div style="display:inline" jstcache="0"> ( <span cl
ass="optional" jsdisplay="optional" jstcache="46">optional</span> <span id="type
Template" jstcache="0"> <span jsdisplay="getTypeRef($this)" jstcache="47"> <a js
values=".href: getTypeRefPage($this) + '#type-' + getTypeRef($this)" jscontent="
getTypeRef($this)" jstcache="49"> Type</a> </span> <span jsdisplay="!getTypeRef(
$this)" jstcache="48"> <span jsdisplay="isArray($this)" jstcache="50"> array of
<span jsselect="items" jstcache="52"><span transclude="typeTemplate" jstcache="5
3"></span></span> </span> <span jsdisplay="!isArray($this)" jscontent="getTypeNa
me($this)" jstcache="51">paramType</span> </span> </span> ) </div> </em> </dt> <
dd class="todo" jsdisplay="!$this.description" jstcache="38"> Undocumented. </dd
> <dd jsdisplay="$this.description" jsvalues=".innerHTML:$this.description" jstc
ache="39"> Description of this parameter from the json schema. </dd> <!-- OBJECT
PROPERTIES --> <dd jsdisplay="shouldExpandObject($this)" jstcache="40"> <dl jst
cache="0"> <div jsselect="getPropertyListFromObject($this)" jstcache="10"> <div
transclude="valueTemplate" jstcache="17"> </div> </div> </dl> </dd> </div> <!--
/VALUE --> </div> </dl> <!-- RETURNS --> <h4 jsdisplay="returns" jstcache="30">R
eturns</h4> <dl jstcache="0"> <div jsselect="returns" jstcache="36"> <div transc
lude="valueTemplate" jstcache="17"> </div> </div> </dl> <!-- CALLBACK -->
<div jsdisplay="hasCallback(parameters)" jstcache="31"> <div jsselect="getCallb
ackParameters(parameters)" jstcache="37"> <h4 jstcache="0">Callback function</h4
> <p jstcache="0"> If you specify the <em jstcache="0">callback</em> parameter,
it should specify a function that looks like this: </p> <!-- Note: intentionally
longer 80 columns --> <pre jstcache="0">function(<span jscontent="getSignatureS
tring(parameters)" jstcache="32">Type param1, Type param2</span>) <span class="s
ubdued" jstcache="0">{...}</span>);</pre> <dl jstcache="0"> <div jsselect="param
eters" jstcache="35"> <div transclude="valueTemplate" jstcache="17"> </div> </di
v> </dl> </div> </div> </div> <!-- /description --> </div> <!-- /apiItem --> </d
iv> <!-- /apiGroup --> <!-- EVENTS --> <div jsdisplay="events && events.
length > 0" class="apiGroup" jstcache="7"> <a name="events" jstcache="0"></a>
<h3 id="events" jstcache="0">Events</h3> <!-- iterates over all events --> <div
jsselect="events" class="apiItem" jstcache="12"> <a jsvalues=".name:'event-' +
name" jstcache="19"></a> <h4 jscontent="name" jstcache="16">event name</h4> <div
class="summary" jstcache="0"> <!-- Note: intentionally longer 80 columns --> <s
pan jscontent="getModuleName() + '.'" class="subdued" jstcache="23">chrome.bookm
arks</span><span jscontent="name" jstcache="16">onEvent</span><span class="subdu
ed" jstcache="0">.addListener</span>(function(<span jscontent="getSignatureStrin
g(parameters)" jstcache="32">Type param1, Type param2</span>) <span class="subdu
ed" jstcache="0">{...}</span>); </div> <div class="description" jstcache="0"> <p
class="todo" jsdisplay="!description" jstcache="28">Undocumented.</p> <p jsdisp
lay="description" jsvalues=".innerHTML:description" jstcache="29"> A description
from the json schema def of the event goes here. </p> <!-- PARAMETERS --> <h4 j
stcache="0">Parameters</h4> <dl jstcache="0"> <div jsselect="parameters" jstcach
e="35"> <div transclude="valueTemplate" jstcache="17"> </div> </div> </dl> </div
> <!-- /decription --> </div> <!-- /apiItem --> </div> <!-- /apiGroup --> <!-- T
YPES --> <div jsdisplay="types && types.length > 0" class="apiGroup"
jstcache="8"> <a name="types" jstcache="0"></a> <h3 id="types" jstcache="0">Type
s</h3> <!-- iterates over all types --> <div jsselect="types" class="apiItem" js
tcache="13"> <a jsvalues=".name:'type-' + id" jstcache="20"></a> <h4 jscontent="
id" jstcache="21">type name</h4> <div transclude="valueTemplate" jstcache="17">
</div> </div> <!-- /apiItem --> </div> <!-- /apiGroup --> </div> <!-- /apiPage -
-> </div> <!-- /mainColumn --> </div> <!-- /pageContent --> <div id="pageFooter"
--="" jstcache="0"> Copyright 2009. For terms of use, see the Chromium <a href=
"http://src.chromium.org/viewvc/chrome/trunk/src/LICENSE" jstcache="0">license</
a>. </div> <!-- /pageFooter --> </div> <!-- /container --> </body></html> |
Chromium Code Reviews
Issue 180016:
Extension API Renaming/Consistency changes (Closed)
