chrome/common/extensions/docs/background_pages.html - Issue 179068: Extension Doc Changes (no building or testable changes): minor changes for tab & windows doc

Side by Side Diff: chrome/common/extensions/docs/background_pages.html

Issue 179068: Extension Doc Changes (no building or testable changes): minor changes for tab & windows doc (Closed)

Patch Set: touch grd. rendered docs Created 11 years, 3 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

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">Background Pages</title> <lin k href="css/ApiRefStyles.css" rel="stylesheet" type="text/css" jstcache="0"> <sc ript type="text/javascript" src="../../../third_party/jstemplate/jstemplate_comp iled.js" jstcache="0"> </script> <script type="text/javascript" src="js/api_page _generator.js" jstcache="0"></script> <script type="text/javascript" src="js/boo tstrap.js" jstcache="0"></script> </head><!-- <body> content is completely gener ated. 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 --> <d iv 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" jstcac he="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="Sea rch" jstcache="0"> </div> </form> <script type="text/javascript" src="http://www .google.com/jsapi" jstcache="0"></script> <script type="text/javascript" jstcach e="0">google.load("elements", "1", {packages: "transliteration"});</script> <scr ipt type="text/javascript" src="http://www.google.com/coop/cse/t13n?form=cse-sea rch-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" jstc ache="0"></script> </div> <div id="pageTitle" jstcache="0"> <h1 jscontent="getPa geTitle()" jstcache="1">Background Pages</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"> <a href="getstarted.html" jstcache="0">Getting Start ed</a></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">De veloper'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.htm l" jstcache="0">Page Actions</a></li> <li jstcache="0" class="leftNavSelected">B ackground Pages</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="n papi.html" jstcache="0">NPAPI Plugins</a></li> <li jstcache="0"><a href="packagi ng.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">T utorials</div></a> <ul jstcache="0"> <li jstcache="0"><a href="tut_debugging.htm l" jstcache="0">Debugging</a></li> </ul> </li> <li jstcache="0">Reference <ul js tcache="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 Pat terns</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 jstcac he="0"><a href="http://dev.chromium.org/developers/design-documents/extensions/s amples" jstcache="0">Samples</a></li> </ul> </div> <div id="mainColumn" jstcache ="0"> <!-- TABLE OF CONTENTS --> <div id="toc" jsdisplay="showPageTOC()" jstcach e="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">Manifest</a> <ol jstcache="0"> <li jsselect="$this.c hildren" jstcache="22" jsinstance="0" style="display: none; "> <a jscontent="na me" jsvalues=".href:'#' + href" jstcache="14">h3Name</a> </li> </ol> </li><li js select="getStaticTOC()" jstcache="9" jsinstance="1"> <a jscontent="name" jsvalue s=".href:'#' + href" jstcache="14" href="#H2-1">Details</a> <ol jstcache="0"> <l i 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 jsco ntent="name" jsvalues=".href:'#' + href" jstcache="14" href="#H2-2">Example</a> <ol jstcache="0"> <li jsselect="$this.children" jstcache="22" jsinstance="0" st yle="display: none; "> <a jscontent="name" jsvalues=".href:'#' + href" jstcache= "14">h3Name</a> </li> </ol> </li> <div jsselect="apiDefinition" jstcache="3" sty le="display: none; "> <li jstcache="0"> <a href="#apiReference" jscontent="'API reference: ' + getModuleName()" jstcache="4">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($thi s)" jstcache="10"> <a jscontent="name" jsvalues=".href:'#property-' + name" href ="#property-anchor" jstcache="41">propertyName</a> </li> </ol> </li> <li jsdispl ay="functions && functions.length > 0" jstcache="6"> <a href="#method s" jstcache="0">Methods</a> <ol jstcache="0"> <li jsselect="functions" jstcache= "11"> <a jscontent="name" jsvalues=".href:'#method-' + name" href="#method-ancho r" jstcache="42">methodName</a> </li> </ol> </li> <li jsdisplay="events &&am p; events.length > 0" jstcache="7"> <a href="#events" jstcache="0">Events</a> <ol jstcache="0"> <li jsselect="events" jstcache="12"> <a jscontent="name" jsva lues=".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="type s" jstcache="13"> <a jscontent="id" jsvalues=".href:'#type-' + id" href="#id-anc hor" jstcache="44">id</a> </li> </ol> </li> </ol> </li> </div> </ol> </div> <!-- /TABLE OF CONTENTS --> <!-- STATIC CONTENT PLACEHOLDER --> <div id="static" jst cache="0"><div id="pageData-title" class="pageData" jstcache="0">Background Page s</div> <div id="pageData-showTOC" class="pageData" jstcache="0">true</div> <p j stcache="0"> A common need for extensions is to have a single long-running scrip t to manage some task or state. Toolstrips don't quite fit this need, because mu ltiple toolstrips can be active at any one time (one per browser window). Backgr ound pages to the rescue. </p> <p jstcache="0"> The background page is similar t o a toolstrip, in that it is an HTML page that runs in the extension process. Th e difference is that the background page exists for the lifetime of your extensi on, and only one instance of it at a time is active.</p> <a name="H2-0" jstcache ="0"></a><h2 id="manifest" jstcache="0">Manifest</h2> <p jstcache="0"> Register your background page in the extension manifest, like this: </p> <pre jstcache="0 ">{ "name": "My First Extension", "version": "1.0", "description": "The first ex tension that I made.", <b jstcache="0">"background_page": "background.html",</b> "toolstrips": ["toolstrip.html"] }</pre> <a name="H2-1" jstcache="0"></a><h2 js tcache="0">Details</h2> <p jstcache="0"> Your toolstrip will likely contain only the necessary code to display the toolstrip UI, with all your extension logic c ontained in the background page. You can communicate between your various pages using direct script calls, similar to how frames can communicate. The chrome.ext ension.getViews() function returns a list of window objects for every active pag e belonging to your extension. </p> <a name="H2-2" jstcache="0"></a><h2 jstcache ="0">Example</h2> <pre jstcache="0">background_page.html (snippet): function upd ateUI(checked) { var views = chrome.extension.getViews(); for (var i in views) { if (views[i].enableCheckbox) views[i].enableCheckbox(checked); } } toolstrip.ht ml (snippet): function enableCheckbox(checked) { var elm = document.getElementBy Id('checkbox'); elm.checked = checked; }</pre> </div> <!-- API PAGE --> <div cla ss="apiPage" jsselect="apiDefinition" jstcache="3" style="display: none; "> <a n ame="apiReference" jstcache="0"></a> <h2 jscontent="'API reference: ' + getModul eName()" jstcache="4">API reference: chrome.apiname </h2> <!-- PROPERTIES --> <d iv jsdisplay="$this.properties" class="apiGroup" jstcache="5"> <a name="properti es" jstcache="0"></a> <h3 id="properties" jstcache="0">Properties</h3> <div jsse lect="getPropertyListFromObject($this)" jstcache="10"> <a jsvalues=".name:'prope rty-' + name" jstcache="15"></a> <h4 jscontent="name" jstcache="16">getLastError </h4> <div class="summary" jstcache="0"> <!-- Note: intentionally longer 80 colu mns --> <span jscontent="getModuleName() + '.'" jstcache="23">chrome.extension</ span><span jscontent="$this.name" jstcache="24">lastError</span> </div> <div tra nsclude="valueTemplate" jstcache="17"> </div> </div> </div> <!-- /apiGroup --> < !-- METHODS --> <div jsdisplay="functions && functions.length > 0" cl ass="apiGroup" id="methods" jstcache="6"> <a name="methods" jstcache="0"></a> <h 3 jstcache="0">Methods</h3> <!-- iterates over all functions --> <div class="api Item" jsselect="functions" jstcache="11"> <a jsvalues=".name:'method-' + name" j stcache="18"></a> <!-- method-anchor --> <h4 jscontent="name" jstcache="16">meth od name</h4> <div class="summary" jstcache="0"><span jsdisplay="returns" jsconte nt="getTypeName(returns)" jstcache="25">void</span> <!-- Note: intentionally lon ger 80 columns --> <span jscontent="getFullyQualifiedFunctionName($this)" jstcac he="26">chrome.module.methodName</span>(<span jsselect="parameters" jsvalues="cl ass:optional ? 'optional' : ''" jstcache="27"><span jsdisplay="$index" jstcache= "33">, </span><span jscontent="getTypeName($this)" jstcache="34"></span> <var js tcache="0"><span jscontent="name" jstcache="16"></span></var></span>)</div> <div class="description" jstcache="0"> <p class="todo" jsdisplay="!description" jstc ache="28">Undocumented.</p> <p jsdisplay="description" jsvalues=".innerHTML:desc ription" jstcache="29"> A description from the json schema def of the function g oes here. </p> <!-- PARAMETERS --> <h4 jstcache="0">Parameters</h4> <dl jstcache ="0"> <div jsselect="parameters" jstcache="35"> <!-- VALUE: This is a subtemplat e that is used elsewhere via jsTemplate transclude --> <div id="valueTemplate" jstcache="0"> <dt jstcache="0"> <var jsdisplay="$this.name" jscontent="$this.na me" jstcache="45">paramName</var> <em jstcache="0"> <!-- TYPE --> <div style="di splay:inline" jstcache="0"> ( <span class="optional" jsdisplay="optional" jstcac he="46">optional</span> <span id="typeTemplate" jstcache="0"> <span jsdisplay="g etTypeRef($this)" jstcache="47"> <a jsvalues=".href: getTypeRefPage($this) + '#t ype-' + getTypeRef($this)" jscontent="getTypeRef($this)" jstcache="49"> Type</a> </span> <span jsdisplay="!getTypeRef($this)" jstcache="48"> <span jsdisplay="is Array($this)" jstcache="50"> array of <span jsselect="items" jstcache="52"><span transclude="typeTemplate" jstcache="53"></span></span> </span> <span jsdisplay= "!isArray($this)" jscontent="getTypeName($this)" jstcache="51">paramType</span> </span> </span> ) </div> </em> </dt> <dd class="todo" jsdisplay="!$this.descript ion" jstcache="38"> Undocumented. </dd> <dd jsdisplay="$this.description" jsvalu es=".innerHTML:$this.description" jstcache="39"> Description of this parameter f rom the json schema. </dd> <!-- OBJECT PROPERTIES --> <dd jsdisplay="shouldExpan dObject($this)" jstcache="40"> <dl jstcache="0"> <div jsselect="getPropertyListF romObject($this)" jstcache="10"> <div transclude="valueTemplate" jstcache="17"> </div> </div> </dl> </dd> </div> <!-- /VALUE --> </div> </dl> <!-- RETURNS --> < h4 jsdisplay="returns" jstcache="30">Returns</h4> <dl jstcache="0"> <div jsselec t="returns" jstcache="36"> <div transclude="valueTemplate" jstcache="17"> </div> </div> </dl> <!-- CALLBACK --> <div jsdisplay="hasCallback(parameters)" jstcac he="31"> <div jsselect="getCallbackParameters(parameters)" jstcache="37"> <h4 js tcache="0">Callback function</h4> <p jstcache="0"> If you specify the <em jstcac he="0">callback</em> parameter, it should specify a function that looks like thi s: </p> <!-- Note: intentionally longer 80 columns --> <pre jstcache="0">functio n(<span jscontent="getSignatureString(parameters)" jstcache="32">Type param1, Ty pe param2</span>) <span class="subdued" jstcache="0">{...}</span>);</pre> <dl js tcache="0"> <div jsselect="parameters" jstcache="35"> <div transclude="valueTemp late" jstcache="17"> </div> </div> </dl> </div> </div> </div> <!-- /description --> </div> <!-- /apiItem --> </div> <!-- /apiGroup --> <!-- EVENTS --> <div jsdi splay="events && events.length > 0" class="apiGroup" jstcache="7"> <a name="events" jstcache="0"></a> <h3 id="events" jstcache="0">Events</h3> <!-- i terates over all events --> <div jsselect="events" class="apiItem" jstcache="12" > <a jsvalues=".name:'event-' + name" jstcache="19"></a> <h4 jscontent="name" js tcache="16">event name</h4> <div class="summary" jstcache="0"> <!-- Note: intent ionally longer 80 columns --> <span jscontent="getModuleName() + '.'" class="sub dued" jstcache="23">chrome.bookmarks</span><span jscontent="name" jstcache="16"> onEvent</span><span class="subdued" jstcache="0">.addListener</span>(function(<s pan jscontent="getSignatureString(parameters)" jstcache="32">Type param1, Type p aram2</span>) <span class="subdued" jstcache="0">{...}</span>); </div> <div clas s="description" jstcache="0"> <p class="todo" jsdisplay="!description" jstcache= "28">Undocumented.</p> <p jsdisplay="description" jsvalues=".innerHTML:descripti on" jstcache="29"> A description from the json schema def of the event goes here . </p> <!-- PARAMETERS --> <h4 jstcache="0">Parameters</h4> <dl jstcache="0"> <d iv jsselect="parameters" jstcache="35"> <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 jss elect="types" class="apiItem" jstcache="13"> <a jsvalues=".name:'type-' + id" js tcache="20"></a> <h4 jscontent="id" jstcache="21">type name</h4> <div transclude ="valueTemplate" jstcache="17"> </div> </div> <!-- /apiItem --> </div> <!-- /api Group --> </div> <!-- /apiPage --> </div> <!-- /mainColumn --> </div> <!-- /page Content --> <div id="pageFooter" --="" jstcache="0"> <p jstcache="0"> Except as otherwise <a href="http://code.google.com/policies.html#restrictions" jstcache=" 0">noted</a>, the content of this page is licensed under the <a rel="license" hr ef="http://creativecommons.org/licenses/by/3.0/" jstcache="0">Creative Commons A ttribution 3.0 License</a>, and code samples are licensed under the <a rel="lice nse" href="http://code.google.com/google_bsd_license.html" jstcache="0">BSD Lice nse</a>. </p> <p jstcache="0"> ©2009 Google </p> </div> <!-- /pageFooter --> </d iv> <!-- /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">Background Pages</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">Background Pages</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"> <a href="getstarted.html" jstcache="0">Getting Start ed</a></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" class="leftNavSelected">Background Pages</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 ="#manifest">Manifest</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 ="#H2-1">Details</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 ="#H2-2">Example</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>

	120 <div jsselect="apiDefinition" jstcache="3" style="display: none; ">

	121 <li jstcache="0">

	122 <a href="#apiReference" jscontent="'API reference: ' + getModule Name()" jstcache="4">API reference</a>

	123 <ol jstcache="0">

	124 <li jsdisplay="$this.properties" jstcache="5">

	125 <a href="#properties" jstcache="0">Properties</a>

	126 <ol jstcache="0">

	127 <li jsselect="getPropertyListFromObject($this)" jstcache=" 10">

	128 <a jscontent="name" jsvalues=".href:'#property-' + name" href="#property-anchor" jstcache="42">propertyName</a>

	129 </li>

	130 </ol>

	131 </li>

	132 <li jsdisplay="functions && functions.length > 0" j stcache="6">

	133 <a href="#methods" jstcache="0">Methods</a>

	134 <ol jstcache="0">

	135 <li jsselect="functions.sort(sortByName)" jstcache="11">

	136 <a jscontent="name" jsvalues=".href:'#method-' + name" h ref="#method-anchor" jstcache="43">methodName</a>

	137 </li>

	138 </ol>

	139 </li>

	140 <li jsdisplay="events && events.length > 0" jstcach e="7">

	141 <a href="#events" jstcache="0">Events</a>

	142 <ol jstcache="0">

	143 <li jsselect="events.sort(sortByName)" jstcache="12">

	144 <a jscontent="name" jsvalues=".href:'#event-' + name" hr ef="#event-anchor" jstcache="44">eventName</a>

	145 </li>

	146 </ol>

	147 </li>

	148 <li jsdisplay="types && types.length > 0" jstcache= "8">

	149 <a href="#types" jstcache="0">Types</a>

	150 <ol jstcache="0">

	151 <li jsselect="types.sort(sortByName)" jstcache="38">

	152 <a jscontent="id" jsvalues=".href:'#type-' + id" href="# id-anchor" jstcache="45">id</a>

	153 </li>

	154 </ol>

	155 </li>

	156 </ol>

	157 </li>

	158 </div>

	159 </ol>

	160 </div>

	161 <!-- /TABLE OF CONTENTS -->

	162

	163 <!-- STATIC CONTENT PLACEHOLDER -->

	164 <div id="static" jstcache="0"><div id="pageData-title" class="pageData" jstcache="0">Background Pages</div>

	165 <div id="pageData-showTOC" class="pageData" jstcache="0">true</div>

	166

	167 <p jstcache="0">

	168 A common need for extensions is to have

	169 a single long-running script to manage some task or state.

	170 Toolstrips don't quite fit this need,

	171 because multiple toolstrips can be active at any one time

	172 (one per browser window).

	173 Background pages to the rescue.

	174 </p>

	175

	176 <p jstcache="0">

	177 The background page is similar to a toolstrip,

	178 in that it is an HTML page that runs in the extension process.

	179 The difference is that the background page exists

	180 for the lifetime of your extension,

	181 and only one instance of it at a time is active.</p>

	182

	183 <h2 id="manifest" jstcache="0">Manifest</h2>

	184

	185 <p jstcache="0">

	186 Register your background page in the extension manifest, like this:

	187 </p>

	188

	189 <pre jstcache="0">{

	190 "name": "My First Extension",

	191 "version": "1.0",

	192 "description": "The first extension that I made.",

	193 <b jstcache="0">"background_page": "background.html",</b>

	194 "toolstrips": ["toolstrip.html"]

	195 }</pre>

	196

	197 <a name="H2-1" jstcache="0"></a><h2 jstcache="0">Details</h2>

	198

	199 <p jstcache="0">

	200 Your toolstrip will likely contain

	201 only the necessary code to display the toolstrip UI,

	202 with all your extension logic contained in the background page.

	203 You can communicate between your various pages using direct script calls,

	204 similar to how frames can communicate.

	205 The chrome.extension.getViews() function

	206 returns a list of window objects

	207 for every active page belonging to your extension.

	208 </p>

	209

	210 <a name="H2-2" jstcache="0"></a><h2 jstcache="0">Example</h2>

	211

	212 <pre jstcache="0">background_page.html (snippet):

	213 function updateUI(checked) {

	214 var views = chrome.extension.getViews();

	215 for (var i in views) {

	216 if (views[i].enableCheckbox)

	217 views[i].enableCheckbox(checked);

	218 }

	219 }

	220

	221 toolstrip.html (snippet):

	222 function enableCheckbox(checked) {

	223 var elm = document.getElementById('checkbox');

	224 elm.checked = checked;

	225 }</pre>

	226 </div>

	227

	228 <!-- API PAGE -->

	229 <div class="apiPage" jsselect="apiDefinition" jstcache="3" style="displa y: none; ">

	230 <a name="apiReference" jstcache="0"></a>

	231 <h2 jscontent="'API reference: ' + getModuleName()" jstcache="4">API ref erence: chrome.apiname </h2>

	232

	233 <!-- PROPERTIES -->

	234 <div jsdisplay="$this.properties" class="apiGroup" jstcache="5">

	235 <a name="properties" jstcache="0"></a>

	236 <h3 id="properties" jstcache="0">Properties</h3>

	237

	238 <div jsselect="getPropertyListFromObject($this)" jstcache="10">

	239 <a jsvalues=".name:'property-' + name" jstcache="15"></a>

	240 <h4 jscontent="name" jstcache="16">getLastError</h4>

	241 <div class="summary" jstcache="0">

	242 <!-- Note: intentionally longer 80 columns -->

	243 <span jscontent="getModuleName() + '.'" jstcache="23">chrome.ext ension</span><span jscontent="$this.name" jstcache="24">lastError</span>

	244 </div>

	245 <div transclude="valueTemplate" jstcache="17">

	246 </div>

	247 </div>

	248

	249 </div> <!-- /apiGroup -->

	250

	251 <!-- METHODS -->

	252 <div jsdisplay="functions && functions.length > 0" class="a piGroup" id="methods" jstcache="6">

	253 <a name="methods" jstcache="0"></a>

	254 <h3 jstcache="0">Methods</h3>

	255

	256 <!-- iterates over all functions -->

	257 <div class="apiItem" jsselect="functions.sort(sortByName)" jstcache= "11">

	258 <a jsvalues=".name:'method-' + name" jstcache="18"></a> <!-- metho d-anchor -->

	259 <h4 jscontent="name" jstcache="16">method name</h4>

	260

	261 <div class="summary" jstcache="0"><span jsdisplay="returns" jscont ent="getTypeName(returns)" jstcache="25">void</span>

	262 <!-- Note: intentionally longer 80 columns -->

	263 <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>

	264 <var jstcache="0"><span jscontent="name" jstcache="16"></s pan></var></span>)</div>

	265

	266 <div class="description" jstcache="0">

	267 <p class="todo" jsdisplay="!description" jstcache="28">Undocumen ted.</p>

	268 <p jsdisplay="description" jsvalues=".innerHTML:description" jst cache="29">

	269 A description from the json schema def of the function goes he re.

	270 </p>

	271

	272 <!-- PARAMETERS -->

	273 <h4 jstcache="0">Parameters</h4>

	274 <dl jstcache="0">

	275 <div jsselect="parameters" jstcache="35">

	276

	277 <!-- VALUE: This is a subtemplate that is used elsewhere

	278 via jsTemplate transclude -->

	279 <div id="valueTemplate" jstcache="0">

	280 <dt jstcache="0">

	281 <var jsdisplay="$this.name" jscontent="$this.name" jstca che="46">paramName</var>

	282 <em jstcache="0">

	283

	284 <!-- TYPE -->

	285 <div style="display:inline" jstcache="0">

	286 (

	287 <span class="optional" jsdisplay="optional" jstc ache="47">optional</span>

	288 <span id="typeTemplate" jstcache="0">

	289 <span jsdisplay="getTypeRef($this)" jstcache=" 48">

	290 <a jsvalues=".href: getTypeRefPage($this) + '#type-' + getTypeRef($this)" jscontent="getTypeRef($this)" jstcache="50"> Type< /a>

	291 </span>

	292 <span jsdisplay="!getTypeRef($this)" jstcache= "49">

	293 <span jsdisplay="isArray($this)" jstcache="5 1">

	294 array of <span jsselect="items" jstcache=" 53"><span transclude="typeTemplate" jstcache="54"></span></span>

	295 </span>

	296 <span jsdisplay="!isArray($this)" jscontent= "getTypeName($this)" jstcache="52">paramType</span>

	297 </span>

	298 </span>

	299 )

	300 </div>

	301

	302 </em>

	303 </dt>

	304 <dd class="todo" jsdisplay="!$this.description" jstcache=" 39">

	305 Undocumented.

	306 </dd>

	307 <dd jsdisplay="$this.description" jsvalues=".innerHTML:$th is.description" jstcache="40">

	308 Description of this parameter from the json schema.

	309 </dd>

	310

	311 <!-- OBJECT PROPERTIES -->

	312 <dd jsdisplay="shouldExpandObject($this)" jstcache="41">

	313 <dl jstcache="0">

	314 <div jsselect="getPropertyListFromObject($this)" jstca che="10">

	315 <div transclude="valueTemplate" jstcache="17">

	316 </div>

	317 </div>

	318 </dl>

	319 </dd>

	320 </div> <!-- /VALUE -->

	321

	322 </div>

	323 </dl>

	324

	325 <!-- RETURNS -->

	326 <h4 jsdisplay="returns" jstcache="30">Returns</h4>

	327 <dl jstcache="0">

	328 <div jsselect="returns" jstcache="36">

	329 <div transclude="valueTemplate" jstcache="17">

	330 </div>

	331 </div>

	332 </dl>

	333

	334 <!-- CALLBACK -->

	335 <div jsdisplay="hasCallback(parameters)" jstcache="31">

	336 <div jsselect="getCallbackParameters(parameters)" jstcache="37 ">

	337 <h4 jstcache="0">Callback function</h4>

	338 <p jstcache="0">

	339 If you specify the <em jstcache="0">callback</em> parameter,

	340 it should specify a function that looks like this:

	341 </p>

	342

	343 <!-- Note: intentionally longer 80 columns -->

	344 <pre jstcache="0">function(<span jscontent="getSignatureString (parameters)" jstcache="32">Type param1, Type param2</span>) <span class="subdue d" jstcache="0">{...}</span>);</pre>

	345 <dl jstcache="0">

	346 <div jsselect="parameters" jstcache="35">

	347 <div transclude="valueTemplate" jstcache="17">

	348 </div>

	349 </div>

	350 </dl>

	351 </div>

	352 </div>

	353

	354 </div> <!-- /description -->

	355

	356 </div> <!-- /apiItem -->

	357

	358 </div> <!-- /apiGroup -->

	359

	360 <!-- EVENTS -->

	361 <div jsdisplay="events && events.length > 0" class="apiGrou p" jstcache="7">

	362 <a name="events" jstcache="0"></a>

	363 <h3 id="events" jstcache="0">Events</h3>

	364

	365 <!-- iterates over all events -->

	366 <div jsselect="events.sort(sortByName)" class="apiItem" jstcache="12 ">

	367 <a jsvalues=".name:'event-' + name" jstcache="19"></a>

	368 <h4 jscontent="name" jstcache="16">event name</h4>

	369

	370 <div class="summary" jstcache="0">

	371 <!-- Note: intentionally longer 80 columns -->

	372 <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>);

	373 </div>

	374

	375 <div class="description" jstcache="0">

	376 <p class="todo" jsdisplay="!description" jstcache="28">Undocumen ted.</p>

	377 <p jsdisplay="description" jsvalues=".innerHTML:description" jst cache="29">

	378 A description from the json schema def of the event goes here.

	379 </p>

	380

	381 <!-- PARAMETERS -->

	382 <h4 jstcache="0">Parameters</h4>

	383 <dl jstcache="0">

	384 <div jsselect="parameters" jstcache="35">

	385 <div transclude="valueTemplate" jstcache="17">

	386 </div>

	387 </div>

	388 </dl>

	389

	390 </div> <!-- /decription -->

	391

	392 </div> <!-- /apiItem -->

	393

	394 </div> <!-- /apiGroup -->

	395

	396 <!-- TYPES -->

	397 <div jsdisplay="types && types.length > 0" class="apiGroup" jstcache="8">

	398 <a name="types.sort(sortByName)" jstcache="0"></a>

	399 <h3 id="types" jstcache="0">Types</h3>

	400

	401 <!-- iterates over all types -->

	402 <div jsselect="types" class="apiItem" jstcache="13">

	403 <a jsvalues=".name:'type-' + id" jstcache="20"></a>

	404 <h4 jscontent="id" jstcache="21">type name</h4>

	405

	406 <div transclude="valueTemplate" jstcache="17">

	407 </div>

	408

	409 </div> <!-- /apiItem -->

	410

	411 </div> <!-- /apiGroup -->

	412

	413 </div> <!-- /apiPage -->

	414 </div> <!-- /mainColumn -->

	415 </div> <!-- /pageContent -->

	416 <div id="pageFooter" --="" jstcache="0">

	417 <p jstcache="0">

	418 Except as otherwise <a href="http://code.google.com/policies.html#restrictions " jstcache="0">noted</a>,

	419 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

	420 Attribution 3.0 License</a>, and code samples are licensed under the

	421 <a rel="license" href="http://code.google.com/google_bsd_license.html" jstcach e="0">BSD License</a>.

	422 </p>

	423 <p jstcache="0">

	424 ©2009 Google

	425 </p>

	426 </div> <!-- /pageFooter -->

	427 </div> <!-- /container -->

	428 </body></html>

	429 #EOF

OLD	NEW

« chrome/common/extensions/docs/api_index.html ('K') | « chrome/common/extensions/docs/api_other.html ('k') | chrome/common/extensions/docs/build/build.py » ('j') | no next file with comments »