| OLD | NEW |
|---|
| 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="toolstrip.html" jstcache="0">toolstrips</a> </li> <li jstc
ache="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 </li
> </ul> </div> <!-- API PAGE --> <div class="apiPage" jsselect="apiDefinition" j
stcache="3" style="display: none; "> <a name="apiReference" jstcache="0"></a> <h
2 jscontent="'API reference: ' + getModuleName()" jstcache="4">API reference: ch
rome.apiname </h2> <!-- PROPERTIES --> <div jsdisplay="$this.properties" class="
apiGroup" jstcache="5"> <a name="properties" jstcache="0"></a> <h3 id="propertie
s" jstcache="0">Properties</h3> <div jsselect="getPropertyListFromObject($this)"
jstcache="10"> <a jsvalues=".name:'property-' + name" jstcache="15"></a> <h4 js
content="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" jstca
che="24">lastError</span> </div> <div transclude="valueTemplate" jstcache="17">
</div> </div> </div> <!-- /apiGroup --> <!-- METHODS --> <div jsdisplay="functio
ns && functions.length > 0" class="apiGroup" id="methods" jstcache="6
"> <a name="methods" jstcache="0"></a> <h3 jstcache="0">Methods</h3> <!-- iterat
es over all functions --> <div class="apiItem" jsselect="functions" jstcache="11
"> <a jsvalues=".name:'method-' + name" jstcache="18"></a> <!-- method-anchor --
> <h4 jscontent="name" jstcache="16">method name</h4> <div class="summary" jstca
che="0"><span jsdisplay="returns" jscontent="getTypeName(returns)" jstcache="25"
>void</span> <!-- Note: intentionally longer 80 columns --> <span jscontent="get
FullyQualifiedFunctionName($this)" jstcache="26">chrome.module.methodName</span>
(<span jsselect="parameters" jsvalues="class:optional ? 'optional' : ''" jstcach
e="27"><span jsdisplay="$index" jstcache="33">, </span><span jscontent="getTypeN
ame($this)" jstcache="34"></span> <var jstcache="0"><span jscontent="name" jstca
che="16"></span></var></span>)</div> <div class="description" jstcache="0"> <p c
lass="todo" jsdisplay="!description" jstcache="28">Undocumented.</p> <p jsdispla
y="description" jsvalues=".innerHTML:description" jstcache="29"> A description f
rom the json schema def of the function goes here. </p> <!-- PARAMETERS --> <h4
jstcache="0">Parameters</h4> <dl jstcache="0"> <div jsselect="parameters" jstcac
he="35"> <!-- VALUE: This is a subtemplate that is used elsewhere via jsTemplate
*transclude* --> <div id="valueTemplate" jstcache="0"> <dt jstcache="0"> <var j
sdisplay="$this.name" jscontent="$this.name" jstcache="45">paramName</var> <em j
stcache="0"> <!-- TYPE --> <div style="display:inline" jstcache="0"> ( <span cla
ss="optional" jsdisplay="optional" jstcache="46">optional</span> <span id="typeT
emplate" jstcache="0"> <span jsdisplay="getTypeRef($this)" jstcache="47"> <a jsv
alues=".href: getTypeRefPage($this) + '#type-' + getTypeRef($this)" jscontent="g
etTypeRef($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="53
"></span></span> </span> <span jsdisplay="!isArray($this)" jscontent="getTypeNam
e($this)" jstcache="51">paramType</span> </span> </span> ) </div> </em> </dt> <d
d class="todo" jsdisplay="!$this.description" jstcache="38"> Undocumented. </dd>
<dd jsdisplay="$this.description" jsvalues=".innerHTML:$this.description" jstca
che="39"> Description of this parameter from the json schema. </dd> <!-- OBJECT
PROPERTIES --> <dd jsdisplay="shouldExpandObject($this)" jstcache="40"> <dl jstc
ache="0"> <div jsselect="getPropertyListFromObject($this)" jstcache="10"> <div t
ransclude="valueTemplate" jstcache="17"> </div> </div> </dl> </dd> </div> <!-- /
VALUE --> </div> </dl> <!-- RETURNS --> <h4 jsdisplay="returns" jstcache="30">Re
turns</h4> <dl jstcache="0"> <div jsselect="returns" jstcache="36"> <div transcl
ude="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"> <p jstcache="0"> Except as otherwise <a href="http://code.g
oogle.com/policies.html#restrictions" jstcache="0">noted</a>, the content of thi
s page is licensed under the <a rel="license" href="http://creativecommons.org/l
icenses/by/3.0/" jstcache="0">Creative Commons Attribution 3.0 License</a>, and
code samples are licensed under the <a rel="license" href="http://code.google.co
m/google_bsd_license.html" jstcache="0">BSD License</a>. </p> <p jstcache="0"> ©
2009 Google </p> </div> <!-- /pageFooter --> </div> <!-- /container --> </body><
/html> | 1 <!DOCTYPE html><!-- This page is a placeholder for generated extensions api doc.
Note: |
| 2 1) The <head> information in this page is significant, should be uniform |
| 3 across api docs and should be edited only with knowledge of the |
| 4 templating mechanism. |
| 5 2) The <body> tag *must* retain id="body" |
| 6 3) All <body>.innerHTML is genereated as an rendering step. If viewed in a |
| 7 browser, it will be re-generated from the template, json schema and |
| 8 authored overview content. |
| 9 4) The <body>.innerHTML is also generated by an offline step so that this |
| 10 page may easily be indexed by search engines. |
| 11 |
| 12 TODO(rafaelw): Abstract this into a "pageshell" that becomes the single |
| 13 version of page template shell and the "instance" pages (bookmarks.html, |
| 14 etc...) can be generated with a build step. |
| 15 --><!-- <html> must retain id="template --><html xmlns="http://www.w3.org/1999/x
html" jstcache="0"><!-- <head> data is significant and loads the needed librarie
s and styles --><head jstcache="0"> |
| 16 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" jstcache=
"0"> |
| 17 <title jscontent="getPageTitle()" jstcache="1">Tutorial: Getting Started (He
llo, World!)</title> |
| 18 <link href="css/ApiRefStyles.css" rel="stylesheet" type="text/css" jstcache=
"0"> |
| 19 <script type="text/javascript" src="../../../third_party/jstemplate/jstempla
te_compiled.js" jstcache="0"> |
| 20 </script> |
| 21 <script type="text/javascript" src="js/api_page_generator.js" jstcache="0"><
/script> |
| 22 <script type="text/javascript" src="js/bootstrap.js" jstcache="0"></script> |
| 23 </head><!-- <body> content is completely generated. Do not edit, as it will be |
| 24 and rewritten. --><body jstcache="0"> <div id="container" jstcache="0"> |
| 25 <a name="top" jstcache="0"> </a> |
| 26 <!-- API HEADER --> |
| 27 <div id="pageHeader" jstcache="0"> |
| 28 <div id="searchbox" jstcache="0"> |
| 29 <form action="http://www.google.com/cse" id="cse-search-box" jstcache="0
"> |
| 30 <div jstcache="0"> |
| 31 <input type="hidden" name="cx" value="002967670403910741006:61_cvzfq
tno" jstcache="0"> |
| 32 <input type="hidden" name="ie" value="UTF-8" jstcache="0"> |
| 33 <input type="text" name="q" size="31" jstcache="0"> |
| 34 <input type="submit" name="sa" value="Search" jstcache="0"> |
| 35 </div> |
| 36 </form> |
| 37 |
| 38 <script type="text/javascript" src="http://www.google.com/jsapi" jstcach
e="0"></script> |
| 39 <script type="text/javascript" jstcache="0">google.load("elements", "1",
{packages: "transliteration"});</script> |
| 40 <script type="text/javascript" src="http://www.google.com/coop/cse/t13n?
form=cse-search-box&t13n_langs=en" jstcache="0"></script> |
| 41 <script type="text/javascript" src="http://www.google.com/coop/cse/brand
?form=cse-search-box&lang=en" jstcache="0"></script> |
| 42 </div> |
| 43 <div id="pageTitle" jstcache="0"> |
| 44 <h1 jscontent="getPageTitle()" jstcache="1">Tutorial: Getting Started (H
ello, World!)</h1> |
| 45 </div> |
| 46 </div> <!-- /pageHeader --> |
| 47 |
| 48 <div id="pageContent" jstcache="0"> |
| 49 <!-- SIDENAV --> |
| 50 <div id="leftNav" jstcache="0"> |
| 51 <ul jstcache="0"> |
| 52 <li jstcache="0"> <a href="index.html" jstcache="0">Home</a></li> |
| 53 <li jstcache="0" class="leftNavSelected">Getting Started </li> |
| 54 <li jstcache="0"> <a href="overview.html" jstcache="0">Overview</a></l
i> |
| 55 <li jstcache="0"> <a href="devguide.html" jstcache="0"><div jstcache="
0">Developer's Guide</div></a> |
| 56 <ul jstcache="0"> |
| 57 <li jstcache="0"><a href="toolstrip.html" jstcache="0">Toolstrips<
/a></li> |
| 58 <li jstcache="0"><a href="pageActions.html" jstcache="0">Page Acti
ons</a></li> |
| 59 <li jstcache="0"><a href="background_pages.html" jstcache="0">Back
ground Pages</a></li> |
| 60 <li jstcache="0"><a href="content_scripts.html" jstcache="0">Conte
nt Scripts</a></li> |
| 61 <li jstcache="0"><a href="events.html" jstcache="0">Events</a></li
> |
| 62 <li jstcache="0"><a href="tabs.html" jstcache="0">Tabs</a></li> |
| 63 <li jstcache="0"><a href="windows.html" jstcache="0">Windows</a></
li> |
| 64 <li jstcache="0"><a href="bookmarks.html" jstcache="0">Bookmarks</
a></li> |
| 65 <li jstcache="0"><a href="themes.html" jstcache="0">Themes</a></li
> |
| 66 <li jstcache="0"><a href="npapi.html" jstcache="0">NPAPI Plugins</
a></li> |
| 67 <li jstcache="0"><a href="packaging.html" jstcache="0">Packaging</
a></li> |
| 68 <li jstcache="0">Autoupdate</li> |
| 69 </ul> |
| 70 </li> |
| 71 <li jstcache="0"><a href="tutorials.html" jstcache="0"><div jstcache="
0">Tutorials</div></a> |
| 72 <ul jstcache="0"> |
| 73 <li jstcache="0"><a href="tut_debugging.html" jstcache="0">Debuggi
ng</a></li> |
| 74 </ul> |
| 75 </li> |
| 76 <li jstcache="0">Reference |
| 77 <ul jstcache="0"> |
| 78 <li jstcache="0"> Formats |
| 79 <ul jstcache="0"> |
| 80 <li jstcache="0"><a href="manifest.html" jstcache="0">Manifest
Files</a></li> |
| 81 <li jstcache="0"><a href="match_patterns.html" jstcache="0">Ma
tch Patterns</a></li> |
| 82 <li jstcache="0">Packages (.crx)</li> |
| 83 </ul> |
| 84 </li> |
| 85 <li jstcache="0"> <a href="api_index.html" jstcache="0">chrome.* A
PIs</a> </li> |
| 86 <li jstcache="0"> <a href="api_other.html" jstcache="0">Other APIs
</a> </li> |
| 87 </ul> |
| 88 </li> |
| 89 <li jstcache="0"><a href="http://dev.chromium.org/developers/design-doc
uments/extensions/samples" jstcache="0">Samples</a></li> |
| 90 </ul> |
| 91 </div> |
| 92 |
| 93 <div id="mainColumn" jstcache="0"> |
| 94 <!-- TABLE OF CONTENTS --> |
| 95 <div id="toc" jsdisplay="showPageTOC()" jstcache="2"> |
| 96 <p jstcache="0">Contents</p> |
| 97 <ol jstcache="0"> |
| 98 <li jsselect="getStaticTOC()" jstcache="9" jsinstance="0"> |
| 99 <a jscontent="name" jsvalues=".href:'#' + href" jstcache="14" href
="#browser">Get your browser ready</a> |
| 100 <ol jstcache="0"> |
| 101 <li jsselect="$this.children" jstcache="22" jsinstance="*0" styl
e="display: none; "> |
| 102 <a jscontent="name" jsvalues=".href:'#' + href" jstcache="14">
h3Name</a> |
| 103 </li> |
| 104 </ol> |
| 105 </li><li jsselect="getStaticTOC()" jstcache="9" jsinstance="1"> |
| 106 <a jscontent="name" jsvalues=".href:'#' + href" jstcache="14" href
="#load">Create and load an extension</a> |
| 107 <ol jstcache="0"> |
| 108 <li jsselect="$this.children" jstcache="22" jsinstance="*0" styl
e="display: none; "> |
| 109 <a jscontent="name" jsvalues=".href:'#' + href" jstcache="14">
h3Name</a> |
| 110 </li> |
| 111 </ol> |
| 112 </li><li jsselect="getStaticTOC()" jstcache="9" jsinstance="2"> |
| 113 <a jscontent="name" jsvalues=".href:'#' + href" jstcache="14" href
="#code">Add code to the extension</a> |
| 114 <ol jstcache="0"> |
| 115 <li jsselect="$this.children" jstcache="22" jsinstance="*0" styl
e="display: none; "> |
| 116 <a jscontent="name" jsvalues=".href:'#' + href" jstcache="14">
h3Name</a> |
| 117 </li> |
| 118 </ol> |
| 119 </li><li jsselect="getStaticTOC()" jstcache="9" jsinstance="*3"> |
| 120 <a jscontent="name" jsvalues=".href:'#' + href" jstcache="14" href
="#summary">Now what?</a> |
| 121 <ol jstcache="0"> |
| 122 <li jsselect="$this.children" jstcache="22" jsinstance="*0" styl
e="display: none; "> |
| 123 <a jscontent="name" jsvalues=".href:'#' + href" jstcache="14">
h3Name</a> |
| 124 </li> |
| 125 </ol> |
| 126 </li> |
| 127 <div jsselect="apiDefinition" jstcache="3" style="display: none; "> |
| 128 <li jstcache="0"> |
| 129 <a href="#apiReference" jscontent="'API reference: ' + getModule
Name()" jstcache="4">API reference</a> |
| 130 <ol jstcache="0"> |
| 131 <li jsdisplay="$this.properties" jstcache="5"> |
| 132 <a href="#properties" jstcache="0">Properties</a> |
| 133 <ol jstcache="0"> |
| 134 <li jsselect="getPropertyListFromObject($this)" jstcache="
10"> |
| 135 <a jscontent="name" jsvalues=".href:'#property-' + name"
href="#property-anchor" jstcache="42">propertyName</a> |
| 136 </li> |
| 137 </ol> |
| 138 </li> |
| 139 <li jsdisplay="functions && functions.length > 0" j
stcache="6"> |
| 140 <a href="#methods" jstcache="0">Methods</a> |
| 141 <ol jstcache="0"> |
| 142 <li jsselect="functions.sort(sortByName)" jstcache="11"> |
| 143 <a jscontent="name" jsvalues=".href:'#method-' + name" h
ref="#method-anchor" jstcache="43">methodName</a> |
| 144 </li> |
| 145 </ol> |
| 146 </li> |
| 147 <li jsdisplay="events && events.length > 0" jstcach
e="7"> |
| 148 <a href="#events" jstcache="0">Events</a> |
| 149 <ol jstcache="0"> |
| 150 <li jsselect="events.sort(sortByName)" jstcache="12"> |
| 151 <a jscontent="name" jsvalues=".href:'#event-' + name" hr
ef="#event-anchor" jstcache="44">eventName</a> |
| 152 </li> |
| 153 </ol> |
| 154 </li> |
| 155 <li jsdisplay="types && types.length > 0" jstcache=
"8"> |
| 156 <a href="#types" jstcache="0">Types</a> |
| 157 <ol jstcache="0"> |
| 158 <li jsselect="types.sort(sortByName)" jstcache="38"> |
| 159 <a jscontent="id" jsvalues=".href:'#type-' + id" href="#
id-anchor" jstcache="45">id</a> |
| 160 </li> |
| 161 </ol> |
| 162 </li> |
| 163 </ol> |
| 164 </li> |
| 165 </div> |
| 166 </ol> |
| 167 </div> |
| 168 <!-- /TABLE OF CONTENTS --> |
| 169 |
| 170 <!-- STATIC CONTENT PLACEHOLDER --> |
| 171 <div id="static" jstcache="0"><div id="pageData-title" class="pageData"
jstcache="0">Tutorial: Getting Started (Hello, World!)</div> |
| 172 <div id="pageData-showTOC" class="pageData" jstcache="0">true</div> |
| 173 |
| 174 <p jstcache="0"> |
| 175 This tutorial walks you through creating a simple extension. |
| 176 To complete this tutorial, you must have Windows. |
| 177 (Linux and Mac don't yet support extensions.) |
| 178 </p> |
| 179 |
| 180 <h2 id="browser" jstcache="0">Get your browser ready</h2> |
| 181 |
| 182 <p jstcache="0"> |
| 183 To develop extensions for Google Chrome, you need to set up your browser: |
| 184 </p> |
| 185 |
| 186 <ol jstcache="0"> |
| 187 <li jstcache="0"><a href="http://dev.chromium.org/getting-involved/dev-channel
" jstcache="0">Subscribe |
| 188 to the Dev channel</a> of Google Chrome for Windows. </li> |
| 189 <li jstcache="0"><a href="http://dev.chromium.org/developers/creating-and-usin
g-profiles" jstcache="0">Create |
| 190 a separate profile</a> for testing |
| 191 <em jstcache="0">(optional but highly recommended)</em>. |
| 192 Having a testing profile means that you can use Google Chrome |
| 193 (with your default profile) |
| 194 for everyday browsing, |
| 195 even if your extension has horrible bugs.</li> |
| 196 </ol> |
| 197 |
| 198 <h2 id="load" jstcache="0">Create and load an extension</h2> |
| 199 <p jstcache="0"> |
| 200 In this section, you'll write a <em jstcache="0">toolstrip</em> — |
| 201 an extension |
| 202 that puts a bit of UI into the <em jstcache="0">toolbar</em> |
| 203 at the bottom of the Google Chrome window. |
| 204 </p> |
| 205 |
| 206 <ol jstcache="0"> |
| 207 <li jstcache="0"> |
| 208 Create a folder somewhere on your computer to contain your extension's code. |
| 209 We'll assume the folder is located at |
| 210 <strong jstcache="0"><code jstcache="0">c:\myext</code></strong>, |
| 211 but it can be anywhere. |
| 212 </li> |
| 213 <li jstcache="0"> |
| 214 Inside your extension's folder, |
| 215 create a text file called <strong jstcache="0"><code jstcache="0">manifest.j
son</code></strong>, |
| 216 and put this in it: |
| 217 <pre jstcache="0">{ |
| 218 "name": "My First Extension", |
| 219 "version": "1.0", |
| 220 "description": "The first extension that I made.", |
| 221 "toolstrips": [ |
| 222 "my_toolstrip.html" |
| 223 ] |
| 224 }</pre> |
| 225 </li> |
| 226 <li jstcache="0"> |
| 227 In the same folder, create a text file called |
| 228 <strong jstcache="0"><code jstcache="0">my_toolstrip.html</code></strong>, |
| 229 and put this in it: |
| 230 <pre jstcache="0"><div class="toolstrip-button"> |
| 231 <span>Hello, World!</span> |
| 232 </div></pre> |
| 233 </li> |
| 234 <li jstcache="0"> Load the extension. |
| 235 <ol type="a" jstcache="0"> |
| 236 <li jstcache="0"> |
| 237 Bring up the Extensions page |
| 238 by going to this URL: |
| 239 <blockquote jstcache="0"> |
| 240 <b jstcache="0">chrome://extensions</b> |
| 241 </blockquote> |
| 242 </li> |
| 243 |
| 244 <li jstcache="0"> |
| 245 Click the <b jstcache="0">Load unpacked extension</b> button. |
| 246 A file dialog appears. |
| 247 </li> |
| 248 |
| 249 <li jstcache="0"> |
| 250 In the file dialog, |
| 251 navigate to your extension's directory |
| 252 (<code jstcache="0">c:\myext</code>, for example) |
| 253 and click the <b jstcache="0">OK</b> button. |
| 254 </li> |
| 255 </ol> </li> |
| 256 </ol> |
| 257 |
| 258 <p jstcache="0"> |
| 259 If your extension is valid, |
| 260 information about it |
| 261 appears in the <b jstcache="0">Installed extensions</b> part |
| 262 of the Extensions page, |
| 263 as the following screenshot shows. |
| 264 </p> |
| 265 |
| 266 <p jstcache="0"> |
| 267 <a href="images/load_after.gif" jstcache="0"><img src="images/load_after-small.g
if" width="327" height="196" jstcache="0"></a> |
| 268 </p> |
| 269 |
| 270 <p jstcache="0"> |
| 271 You should see the UI for your extension at the bottom left of the browser, |
| 272 looking something like this: |
| 273 </p> |
| 274 |
| 275 <table class="imagelayout" jstcache="0"> |
| 276 <tbody jstcache="0"> |
| 277 <tr class="images" jstcache="0"> |
| 278 <td width="33%" jstcache="0"><img src="images/hw-1.gif" alt="" jstcache=
"0"></td> |
| 279 <td width="33%" jstcache="0"><img src="images/hw-2.gif" alt="" jstcache=
"0"></td> |
| 280 <td width="33%" jstcache="0"><img src="images/hw-3.gif" alt="" jstcache=
"0"></td> |
| 281 </tr> |
| 282 <tr jstcache="0"> |
| 283 <td width="33%" jstcache="0"> default appearance</td> |
| 284 <td width="33%" jstcache="0"> initial onhover appearance</td> |
| 285 <td width="33%" jstcache="0"> final onhover appearance</td> |
| 286 </tr> |
| 287 </tbody> |
| 288 </table> |
| 289 |
| 290 <p jstcache="0"> |
| 291 Your extension's button is automatically styled |
| 292 to look like it belongs in the browser. |
| 293 If you put the cursor over the button, |
| 294 the button gets a nice, rounded edge, |
| 295 just like the buttons in the bookmark bar. |
| 296 After a while, a tooltip comes up, identifying the extension. |
| 297 </p> |
| 298 <p class="comment" jstcache="0"> |
| 299 [PENDING: troubleshooting info should go here. |
| 300 what are symptoms of common typos, including misnamed files? |
| 301 what are the symptoms if you don't have the dev channel?] |
| 302 </p> |
| 303 |
| 304 <h2 id="code" jstcache="0">Add code to the extension</h2> |
| 305 <p jstcache="0"> In this step, you'll make your extension <em jstcache="0">do</e
m> something besides just look good. </p> |
| 306 <ol jstcache="0"> |
| 307 <li jstcache="0"> |
| 308 <p jstcache="0"> Inside your extension's folder, |
| 309 create a text file called <strong jstcache="0"><code jstcache="0">hello_worl
d.html</code></strong>, |
| 310 and add the following code to it:</p> |
| 311 <blockquote jstcache="0"> <a href="samples/hello_world.txt" jstcache="0">CSS |
| 312 and JavaScript code for hello_world</a></blockquote> |
| 313 </li> |
| 314 <li jstcache="0"> |
| 315 <p jstcache="0"> Edit <code jstcache="0">my_toolstrip.html</code>, so that i
t has the following code: </p> |
| 316 <pre jstcache="0"><div class="toolstrip-button"<b jstcache="0"> onclick="
window.open('hello_world.html')"</b>> |
| 317 <span>Hello, World!</span> |
| 318 </div></pre> |
| 319 </li> |
| 320 <li jstcache="0"> |
| 321 Restart the browser to load the new version of the extension.</li> |
| 322 <li jstcache="0">Click the button. |
| 323 A window should come up that displays <code jstcache="0">hello_world.html</cod
e>. </li> |
| 324 </ol> |
| 325 <p jstcache="0"> It should look something like this:</p> |
| 326 |
| 327 <img src="images/hello_world-page.gif" alt="a window with a grid of images relat
ed to HELLO WORLD" jstcache="0"> |
| 328 |
| 329 <p jstcache="0"> If you don't see that page, |
| 330 try the instructions again, |
| 331 following them exactly. |
| 332 Don't try loading an HTML file that isn't in the extension's folder — |
| 333 it won't work! </p> |
| 334 |
| 335 <h2 id="summary" jstcache="0">Now what?</h2> |
| 336 |
| 337 <p class="comment" jstcache="0"> |
| 338 [PENDING: Summarize what we did, |
| 339 what it means, |
| 340 what else we would've done if this were a real extension (e.g. package it), |
| 341 and where to find more information.]</p> |
| 342 |
| 343 <ul jstcache="0"> |
| 344 <li jstcache="0"> |
| 345 Subscribe to |
| 346 <a href="http://groups.google.com/group/chromium-extensions/subscribe" jstca
che="0">chromium-extensions</a> |
| 347 to keep up to date with the latest news |
| 348 </li> |
| 349 <li jstcache="0"> |
| 350 Learn how to debug your extension by following the |
| 351 <a href="tut_debugging.html" jstcache="0">debugging tutorial</a> |
| 352 </li> |
| 353 <li jstcache="0"> |
| 354 Look at some |
| 355 <a href="http://sites.google.com/a/chromium.org/dev/developers/design-docume
nts/extensions/samples" jstcache="0">sample extensions</a> |
| 356 </li> |
| 357 <li jstcache="0"> |
| 358 Learn more about |
| 359 <a href="toolstrip.html" jstcache="0">toolstrips</a> |
| 360 </li> |
| 361 <li jstcache="0"> |
| 362 <a href="packaging.html" jstcache="0">Package</a> |
| 363 your extension into a <code jstcache="0">.crx</code> file |
| 364 so you can share it with your friends |
| 365 </li> |
| 366 </ul> |
| 367 </div> |
| 368 |
| 369 <!-- API PAGE --> |
| 370 <div class="apiPage" jsselect="apiDefinition" jstcache="3" style="displa
y: none; "> |
| 371 <a name="apiReference" jstcache="0"></a> |
| 372 <h2 jscontent="'API reference: ' + getModuleName()" jstcache="4">API ref
erence: chrome.apiname </h2> |
| 373 |
| 374 <!-- PROPERTIES --> |
| 375 <div jsdisplay="$this.properties" class="apiGroup" jstcache="5"> |
| 376 <a name="properties" jstcache="0"></a> |
| 377 <h3 id="properties" jstcache="0">Properties</h3> |
| 378 |
| 379 <div jsselect="getPropertyListFromObject($this)" jstcache="10"> |
| 380 <a jsvalues=".name:'property-' + name" jstcache="15"></a> |
| 381 <h4 jscontent="name" jstcache="16">getLastError</h4> |
| 382 <div class="summary" jstcache="0"> |
| 383 <!-- Note: intentionally longer 80 columns --> |
| 384 <span jscontent="getModuleName() + '.'" jstcache="23">chrome.ext
ension</span><span jscontent="$this.name" jstcache="24">lastError</span> |
| 385 </div> |
| 386 <div transclude="valueTemplate" jstcache="17"> |
| 387 </div> |
| 388 </div> |
| 389 |
| 390 </div> <!-- /apiGroup --> |
| 391 |
| 392 <!-- METHODS --> |
| 393 <div jsdisplay="functions && functions.length > 0" class="a
piGroup" id="methods" jstcache="6"> |
| 394 <a name="methods" jstcache="0"></a> |
| 395 <h3 jstcache="0">Methods</h3> |
| 396 |
| 397 <!-- iterates over all functions --> |
| 398 <div class="apiItem" jsselect="functions.sort(sortByName)" jstcache=
"11"> |
| 399 <a jsvalues=".name:'method-' + name" jstcache="18"></a> <!-- metho
d-anchor --> |
| 400 <h4 jscontent="name" jstcache="16">method name</h4> |
| 401 |
| 402 <div class="summary" jstcache="0"><span jsdisplay="returns" jscont
ent="getTypeName(returns)" jstcache="25">void</span> |
| 403 <!-- Note: intentionally longer 80 columns --> |
| 404 <span jscontent="getFullyQualifiedFunctionName($this)" jstcach
e="26">chrome.module.methodName</span>(<span jsselect="parameters" jsvalues="cla
ss:optional ? 'optional' : ''" jstcache="27"><span jsdisplay="$index" jstcache="
33">, </span><span jscontent="getTypeName($this)" jstcache="34"></span> |
| 405 <var jstcache="0"><span jscontent="name" jstcache="16"></s
pan></var></span>)</div> |
| 406 |
| 407 <div class="description" jstcache="0"> |
| 408 <p class="todo" jsdisplay="!description" jstcache="28">Undocumen
ted.</p> |
| 409 <p jsdisplay="description" jsvalues=".innerHTML:description" jst
cache="29"> |
| 410 A description from the json schema def of the function goes he
re. |
| 411 </p> |
| 412 |
| 413 <!-- PARAMETERS --> |
| 414 <h4 jstcache="0">Parameters</h4> |
| 415 <dl jstcache="0"> |
| 416 <div jsselect="parameters" jstcache="35"> |
| 417 |
| 418 <!-- VALUE: This is a subtemplate that is used elsewhere |
| 419 via jsTemplate *transclude* --> |
| 420 <div id="valueTemplate" jstcache="0"> |
| 421 <dt jstcache="0"> |
| 422 <var jsdisplay="$this.name" jscontent="$this.name" jstca
che="46">paramName</var> |
| 423 <em jstcache="0"> |
| 424 |
| 425 <!-- TYPE --> |
| 426 <div style="display:inline" jstcache="0"> |
| 427 ( |
| 428 <span class="optional" jsdisplay="optional" jstc
ache="47">optional</span> |
| 429 <span id="typeTemplate" jstcache="0"> |
| 430 <span jsdisplay="getTypeRef($this)" jstcache="
48"> |
| 431 <a jsvalues=".href: getTypeRefPage($this) +
'#type-' + getTypeRef($this)" jscontent="getTypeRef($this)" jstcache="50"> Type<
/a> |
| 432 </span> |
| 433 <span jsdisplay="!getTypeRef($this)" jstcache=
"49"> |
| 434 <span jsdisplay="isArray($this)" jstcache="5
1"> |
| 435 array of <span jsselect="items" jstcache="
53"><span transclude="typeTemplate" jstcache="54"></span></span> |
| 436 </span> |
| 437 <span jsdisplay="!isArray($this)" jscontent=
"getTypeName($this)" jstcache="52">paramType</span> |
| 438 </span> |
| 439 </span> |
| 440 ) |
| 441 </div> |
| 442 |
| 443 </em> |
| 444 </dt> |
| 445 <dd class="todo" jsdisplay="!$this.description" jstcache="
39"> |
| 446 Undocumented. |
| 447 </dd> |
| 448 <dd jsdisplay="$this.description" jsvalues=".innerHTML:$th
is.description" jstcache="40"> |
| 449 Description of this parameter from the json schema. |
| 450 </dd> |
| 451 |
| 452 <!-- OBJECT PROPERTIES --> |
| 453 <dd jsdisplay="shouldExpandObject($this)" jstcache="41"> |
| 454 <dl jstcache="0"> |
| 455 <div jsselect="getPropertyListFromObject($this)" jstca
che="10"> |
| 456 <div transclude="valueTemplate" jstcache="17"> |
| 457 </div> |
| 458 </div> |
| 459 </dl> |
| 460 </dd> |
| 461 </div> <!-- /VALUE --> |
| 462 |
| 463 </div> |
| 464 </dl> |
| 465 |
| 466 <!-- RETURNS --> |
| 467 <h4 jsdisplay="returns" jstcache="30">Returns</h4> |
| 468 <dl jstcache="0"> |
| 469 <div jsselect="returns" jstcache="36"> |
| 470 <div transclude="valueTemplate" jstcache="17"> |
| 471 </div> |
| 472 </div> |
| 473 </dl> |
| 474 |
| 475 <!-- CALLBACK --> |
| 476 <div jsdisplay="hasCallback(parameters)" jstcache="31"> |
| 477 <div jsselect="getCallbackParameters(parameters)" jstcache="37
"> |
| 478 <h4 jstcache="0">Callback function</h4> |
| 479 <p jstcache="0"> |
| 480 If you specify the <em jstcache="0">callback</em> parameter, |
| 481 it should specify a function that looks like this: |
| 482 </p> |
| 483 |
| 484 <!-- Note: intentionally longer 80 columns --> |
| 485 <pre jstcache="0">function(<span jscontent="getSignatureString
(parameters)" jstcache="32">Type param1, Type param2</span>) <span class="subdue
d" jstcache="0">{...}</span>);</pre> |
| 486 <dl jstcache="0"> |
| 487 <div jsselect="parameters" jstcache="35"> |
| 488 <div transclude="valueTemplate" jstcache="17"> |
| 489 </div> |
| 490 </div> |
| 491 </dl> |
| 492 </div> |
| 493 </div> |
| 494 |
| 495 </div> <!-- /description --> |
| 496 |
| 497 </div> <!-- /apiItem --> |
| 498 |
| 499 </div> <!-- /apiGroup --> |
| 500 |
| 501 <!-- EVENTS --> |
| 502 <div jsdisplay="events && events.length > 0" class="apiGrou
p" jstcache="7"> |
| 503 <a name="events" jstcache="0"></a> |
| 504 <h3 id="events" jstcache="0">Events</h3> |
| 505 |
| 506 <!-- iterates over all events --> |
| 507 <div jsselect="events.sort(sortByName)" class="apiItem" jstcache="12
"> |
| 508 <a jsvalues=".name:'event-' + name" jstcache="19"></a> |
| 509 <h4 jscontent="name" jstcache="16">event name</h4> |
| 510 |
| 511 <div class="summary" jstcache="0"> |
| 512 <!-- Note: intentionally longer 80 columns --> |
| 513 <span jscontent="getModuleName() + '.'" class="subdued" jstcache
="23">chrome.bookmarks</span><span jscontent="name" jstcache="16">onEvent</span>
<span class="subdued" jstcache="0">.addListener</span>(function(<span jscontent=
"getSignatureString(parameters)" jstcache="32">Type param1, Type param2</span>)
<span class="subdued" jstcache="0">{...}</span>); |
| 514 </div> |
| 515 |
| 516 <div class="description" jstcache="0"> |
| 517 <p class="todo" jsdisplay="!description" jstcache="28">Undocumen
ted.</p> |
| 518 <p jsdisplay="description" jsvalues=".innerHTML:description" jst
cache="29"> |
| 519 A description from the json schema def of the event goes here. |
| 520 </p> |
| 521 |
| 522 <!-- PARAMETERS --> |
| 523 <h4 jstcache="0">Parameters</h4> |
| 524 <dl jstcache="0"> |
| 525 <div jsselect="parameters" jstcache="35"> |
| 526 <div transclude="valueTemplate" jstcache="17"> |
| 527 </div> |
| 528 </div> |
| 529 </dl> |
| 530 |
| 531 </div> <!-- /decription --> |
| 532 |
| 533 </div> <!-- /apiItem --> |
| 534 |
| 535 </div> <!-- /apiGroup --> |
| 536 |
| 537 <!-- TYPES --> |
| 538 <div jsdisplay="types && types.length > 0" class="apiGroup"
jstcache="8"> |
| 539 <a name="types.sort(sortByName)" jstcache="0"></a> |
| 540 <h3 id="types" jstcache="0">Types</h3> |
| 541 |
| 542 <!-- iterates over all types --> |
| 543 <div jsselect="types" class="apiItem" jstcache="13"> |
| 544 <a jsvalues=".name:'type-' + id" jstcache="20"></a> |
| 545 <h4 jscontent="id" jstcache="21">type name</h4> |
| 546 |
| 547 <div transclude="valueTemplate" jstcache="17"> |
| 548 </div> |
| 549 |
| 550 </div> <!-- /apiItem --> |
| 551 |
| 552 </div> <!-- /apiGroup --> |
| 553 |
| 554 </div> <!-- /apiPage --> |
| 555 </div> <!-- /mainColumn --> |
| 556 </div> <!-- /pageContent --> |
| 557 <div id="pageFooter" --="" jstcache="0"> |
| 558 <p jstcache="0"> |
| 559 Except as otherwise <a href="http://code.google.com/policies.html#restrictions
" jstcache="0">noted</a>, |
| 560 the content of this page is licensed under the <a rel="license" href="http://c
reativecommons.org/licenses/by/3.0/" jstcache="0">Creative Commons |
| 561 Attribution 3.0 License</a>, and code samples are licensed under the |
| 562 <a rel="license" href="http://code.google.com/google_bsd_license.html" jstcach
e="0">BSD License</a>. |
| 563 </p> |
| 564 <p jstcache="0"> |
| 565 ©2009 Google |
| 566 </p> |
| 567 </div> <!-- /pageFooter --> |
| 568 </div> <!-- /container --> |
| 569 </body></html> |
| 570 #EOF |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 179068:
Extension Doc Changes (no building or testable changes): minor changes for tab & windows doc (Closed)
