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 mechanism. 2) The <body> tag *must* retain id="body" 3) All <body>.innerHTML is genereated 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>.innerHTML is also generated by an offline step so that this page may easily be indexed by search engines. TODO(rafaelw): Abstract this into a "pageshell" that becomes the single version of page template shell and the "instance" pages (bookmarks.html, etc...) can be generated with a build step. --><!-- <html> must retain id="template --><html xmlns="http://www.w3.org/1999/xhtml" jstcache="0"><!-- <head> data 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</title> <link href="css/ApiRefStyles.css" rel="stylesheet" type="text/css" jstcache="0"> <script type="text/javascript" src="../../../third_party/jstemplate/jstemplate_compiled.js" jstcache="0"> </script> <script type="text/javascript" src="js/api_page_generator.js" jstcache="0"></script> <script type="text/javascript" src="js/bootstrap.js" jstcache="0"></script> </head><!-- <body> content is completely 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 HEADER --> <div id="pageHeader" jstcache="0"> <div id="searchbox" jstcache="0"> <form action="http://www.google.com/cse" id="cse-search-box" jstcache="0"> <div jstcache="0"> <input type="hidden" name="cx" value="002967670403910741006:61_cvzfqtno" jstcache="0"> <input type="hidden" name="ie" value="UTF-8" jstcache="0"> <input type="text" name="q" size="31" jstcache="0"> <input type="submit" name="sa" value="Search" jstcache="0"> </div> </form> <script type="text/javascript" src="http://www.google.com/jsapi" jstcache="0"></script> <script type="text/javascript" jstcache="0">google.load("elements", "1", {packages: "transliteration"});</script> <script type="text/javascript" src="http://www.google.com/coop/cse/t13n?form=cse-search-box&t13n_langs=en" jstcache="0"></script> <script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en" jstcache="0"></script> </div> <div id="pageTitle" jstcache="0"> <h1 jscontent="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 Started </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">Developer's Guide</div></a> <ul jstcache="0"> <li jstcache="0"><a href="toolstrip.html" 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_scripts.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 jstcache="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 jstcache="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> <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">Other APIs</li> </ul> </li> <li jstcache="0">Samples <ul jstcache="0"> <li jstcache="0">[sample 1]</li> <li jstcache="0">[sample 2]</li> </ul> </li> </ul> </div> <div id="mainColumn" jstcache="0"> <!-- TABLE OF CONTENTS --> <div id="toc" jsdisplay="showPageTOC()" jstcache="2"> <p jstcache="0">Contents</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" 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="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 code to the 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="*3"> <a jscontent="name" jsvalues=".href:'#' + href" jstcache="14" href="#H2-3">Summary</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> <div jsselect="apiDefinition" jstcache="3" style="display: none; "> <li jstcache="0"> <a href="#apiReference" jscontent="'API Reference: ' + getModuleName()" jstcache="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="name" 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 jstcache="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="events" jstcache="12"> <a jscontent="name" jsvalues=".href:'#event-' + name" href="#event-anchor" jstcache="44">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="45">id</a> </li> </ol> </li> </ol> </li> </div> </ol> </div> <!-- /TABLE OF CONTENTS --> <!-- STATIC 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 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> <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, you 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">Create a separate profile</a> for testing <em jstcache="0">(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> <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 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 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 anywhere. </li> <li jstcache="0"> Inside your extension's folder, create a text file called <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_toolstrip.html" ] }</pre> </li> <li jstcache="0"> In the same folder, create a text file called <strong jstcache="0"><code jstcache="0">my_toolstrip.html</code></strong>, 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 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 jstcache="0">c:\myext</code>, your shortcut might look something like this: <pre jstcache="0">chrome.exe <span class="newCode" jstcache="0">--load-extension="c:\myext"</span></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 testing profile. </li> <li jstcache="0">Double-click the shortcut to start the browser.</li> </ol> <p jstcache="0"> <b jstcache="0">Note:</b> To run already-packaged extensions the browser must be started with the <code jstcache="0">--enable-extensions</code> or <code jstcache="0">--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" jstcache="0">Creating and Using Profiles</a>. </p> </li> </ol> <p jstcache="0"> You should see the UI for your extension at the bottom left of the browser, looking something like this: </p> <table class="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="" jstcache="0"></td> </tr> <tr jstcache="0"> <td width="33%" jstcache="0"> default appearance</td> <td width="33%" jstcache="0"> initial onhover appearance</td> <td width="33%" jstcache="0"> final onhover appearance</td> </tr> </tbody> </table> <p jstcache="0"> 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 jstcache="0"> [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> <a name="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.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 of 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 jstcache="0"> 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" 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">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 it), 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="getModuleName() + ' 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">Properties</h3> <div jsselect="getPropertyListFromObject($this)" jstcache="10"> <a jsvalues=".name:'property-' + name" jstcache="15"></a> <h4 jscontent="name" jstcache="16">getLastError</h4> <div class="summary" jstcache="0"> <!-- Note: intentionally longer 80 columns --> <span jscontent="getModuleName() + '.'" jstcache="24">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 && functions.length > 0" class="apiGroup" id="methods" jstcache="6"> <a name="methods" jstcache="0"></a> <h3 jstcache="0">Methods</h3> <!-- iterates 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" jstcache="0"><span jsdisplay="returns" jscontent="getTypeName(returns)" jstcache="26">void</span> <!-- Note: intentionally longer 80 columns --> <span jscontent="getFullyQualifiedFunctionName($this)" jstcache="27">chrome.module.methodName</span>(<span jsselect="parameters" jsvalues="class:optional ? 'optional' : ''" jstcache="28"><span jsdisplay="$index" jstcache="34">, </span><span jscontent="getTypeName($this)" jstcache="35"></span> <var jstcache="0"><span jscontent="name" jstcache="16"></span></var></span>)</div> <div class="description" jstcache="0"> <p class="todo" jsdisplay="!description" jstcache="29">Undocumented.</p> <p jsdisplay="description" jsvalues=".innerHTML:description" jstcache="30"> 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" jstcache="36"> <!-- VALUE: This is a subtemplate that is used elsewhere via jsTemplate *transclude* --> <div id="valueTemplate" jstcache="0"> <dt jstcache="0"> <var jsdisplay="$this.name" jscontent="$this.name" jstcache="46">paramName</var> <em jstcache="0"> <!-- TYPE --> <div style="display:inline" jstcache="0"> ( <span class="optional" jsdisplay="optional" jstcache="47">optional</span> <span id="typeTemplate" jstcache="0"> <span jsdisplay="getTypeRef($this)" jstcache="48"> <a jsvalues=".href: getTypeRefPage($this) + '#type-' + getTypeRef($this)" jscontent="getTypeRef($this)" jstcache="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> </span> <span jsdisplay="!isArray($this)" jscontent="getTypeName($this)" jstcache="52">paramType</span> </span> </span> ) </div> </em> </dt> <dd class="todo" jsdisplay="!$this.description" jstcache="39"> Undocumented. </dd> <dd jsdisplay="$this.description" jsvalues=".innerHTML:$this.description" jstcache="40"> Description of this parameter from the json schema. </dd> <!-- OBJECT PROPERTIES --> <dd jsdisplay="shouldExpandObject($this)" jstcache="41"> <dl jstcache="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="31">Returns</h4> <dl jstcache="0"> <div jsselect="returns" jstcache="37"> <div transclude="valueTemplate" jstcache="17"> </div> </div> </dl> <!-- CALLBACK --> <div jsdisplay="hasCallback(parameters)" jstcache="32"> <div jsselect="getCallbackParameters(parameters)" jstcache="38"> <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="getSignatureString(parameters)" jstcache="33">Type param1, Type param2</span>) <span class="subdued" jstcache="0">{...}</span>);</pre> <dl jstcache="0"> <div jsselect="parameters" jstcache="36"> <div transclude="valueTemplate" jstcache="17"> </div> </div> </dl> </div> </div> </div> <!-- /description --> </div> <!-- /apiItem --> </div> <!-- /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 --> <span jscontent="getModuleName() + '.'" class="subdued" jstcache="24">chrome.bookmarks</span><span jscontent="name" jstcache="16">onEvent</span><span class="subdued" jstcache="0">.addListener</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" jsvalues=".innerHTML:description" jstcache="30"> A description from the json schema def 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="types" jstcache="0"></a> <h3 id="types" jstcache="0">Types</h3> <!-- iterates over all types --> <div jsselect="types" class="apiItem" jstcache="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>
|
