diff options
Diffstat (limited to 'chrome/common/extensions/docs/a11y.html')
| -rw-r--r-- | chrome/common/extensions/docs/a11y.html | 1002 |
1 files changed, 1002 insertions, 0 deletions
diff --git a/chrome/common/extensions/docs/a11y.html b/chrome/common/extensions/docs/a11y.html new file mode 100644 index 0000000..92c6f6b --- /dev/null +++ b/chrome/common/extensions/docs/a11y.html @@ -0,0 +1,1002 @@ +<!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. + 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. +--><html xmlns="http://www.w3.org/1999/xhtml"><head> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <link href="css/ApiRefStyles.css" rel="stylesheet" type="text/css"> + <link href="css/print.css" rel="stylesheet" type="text/css" media="print"> + <script type="text/javascript" src="../../../third_party/jstemplate/jstemplate_compiled.js"> + </script> + <script type="text/javascript" src="js/api_page_generator.js"></script> + <script type="text/javascript" src="js/bootstrap.js"></script> + <title>Accessibility (a11y) - Google Chrome Extensions - Google Code</title></head> + <body> <div id="gc-container" class="labs"> + <div id="devModeWarning"> + You are viewing extension docs in chrome via the 'file:' scheme: are you expecting to see local changes when you refresh? You'll need run chrome with --allow-file-access-from-files. + </div> + <!-- SUBTEMPLATES: DO NOT MOVE FROM THIS LOCATION --> + <!-- In particular, sub-templates that recurse, must be used by allowing + jstemplate to make a copy of the template in this section which + are not operated on by way of the jsskip="true" --> + <div style="display:none"> + + <!-- VALUE --> + <div id="valueTemplate"> + <dt> + <var>paramName</var> + <em> + + <!-- TYPE --> + <div style="display:inline"> + ( + <span class="optional">optional</span> + <span class="enum">enumerated</span> + <span id="typeTemplate"> + <span> + <a> Type</a> + </span> + <span> + <span> + array of <span><span></span></span> + </span> + <span>paramType</span> + <span></span> + </span> + </span> + ) + </div> + + </em> + </dt> + <dd class="todo"> + Undocumented. + </dd> + <dd> + Description of this parameter from the json schema. + </dd> + <dd> + This parameter was added in version + <b><span></span></b>. + You must omit this parameter in earlier versions, + and you may omit it in any version. If you require this + parameter, the manifest key + <a href="manifest.html#minimum_chrome_version">minimum_chrome_version</a> + can ensure that your extension won't be run in an earlier browser version. + </dd> + + <!-- OBJECT PROPERTIES --> + <dd> + <dl> + <div> + <div> + </div> + </div> + </dl> + </dd> + + <!-- FUNCTION PARAMETERS --> + <dd> + <div></div> + </dd> + + </div> <!-- /VALUE --> + + <div id="functionParametersTemplate"> + <h5>Parameters</h5> + <dl> + <div> + <div> + </div> + </div> + </dl> + </div> + </div> <!-- /SUBTEMPLATES --> + + <a id="top"></a> + <div id="skipto"> + <a href="#gc-pagecontent">Skip to page content</a> + <a href="#gc-toc">Skip to main navigation</a> + </div> + <!-- API HEADER --> + <table id="header" width="100%" cellspacing="0" border="0"> + <tbody><tr> + <td valign="middle"><a href="http://code.google.com/"><img src="images/code_labs_logo.gif" height="43" width="161" alt="Google Code Labs" style="border:0; margin:0;"></a></td> + <td valign="middle" width="100%" style="padding-left:0.6em;"> + <form action="http://www.google.com/cse" id="cse" style="margin-top:0.5em"> + <div id="gsc-search-box"> + <input type="hidden" name="cx" value="002967670403910741006:61_cvzfqtno"> + <input type="hidden" name="ie" value="UTF-8"> + <input type="text" name="q" value="" size="55"> + <input class="gsc-search-button" type="submit" name="sa" value="Search"> + <br> + <span class="greytext">e.g. "page action" or "tabs"</span> + </div> + </form> + + <script type="text/javascript" src="http://www.google.com/jsapi"></script> + <script type="text/javascript">google.load("elements", "1", {packages: "transliteration"});</script> + <script type="text/javascript" src="http://www.google.com/coop/cse/t13n?form=cse&t13n_langs=en"></script> + <script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse&lang=en"></script> + </td> + </tr> + </tbody></table> + + <div id="codesiteContent" class=""> + + <a id="gc-topnav-anchor"></a> + <div id="gc-topnav"> + <h1>Google Chrome Extensions (<a href="http://code.google.com/labs/">Labs</a>)</h1> + <ul id="home" class="gc-topnav-tabs"> + <li id="home_link"> + <a href="index.html" title="Google Chrome Extensions home page">Home</a> + </li> + <li id="docs_link"> + <a href="docs.html" title="Official Google Chrome Extensions documentation">Docs</a> + </li> + <li id="faq_link"> + <a href="faq.html" title="Answers to frequently asked questions about Google Chrome Extensions">FAQ</a> + </li> + <li id="samples_link"> + <a href="samples.html" title="Sample extensions (with source code)">Samples</a> + </li> + <li id="group_link"> + <a href="http://groups.google.com/a/chromium.org/group/chromium-extensions" title="Google Chrome Extensions developer forum">Group</a> + </li> + </ul> + </div> <!-- end gc-topnav --> + + <div class="g-section g-tpl-170"> + <!-- SIDENAV --> + <div class="g-unit g-first" id="gc-toc"> + <ul> + <li><a href="getstarted.html">Getting Started</a></li> + <li><a href="overview.html">Overview</a></li> + <li><a href="whats_new.html">What's New?</a></li> + <li><h2><a href="devguide.html">Developer's Guide</a></h2> + <ul> + <li>Browser UI + <ul> + <li><a href="browserAction.html">Browser Actions</a></li> + <li><a href="contextMenus.html">Context Menus</a></li> + <li><a href="notifications.html">Desktop Notifications</a></li> + <li><a href="options.html">Options Pages</a></li> + <li><a href="override.html">Override Pages</a></li> + <li><a href="pageAction.html">Page Actions</a></li> + <li><a href="themes.html">Themes</a></li> + </ul> + </li> + <li>Browser Interaction + <ul> + <li><a href="bookmarks.html">Bookmarks</a></li> + <li><a href="cookies.html">Cookies</a></li> + <li><a href="events.html">Events</a></li> + <li><a href="history.html">History</a></li> + <li><a href="tabs.html">Tabs</a></li> + <li><a href="windows.html">Windows</a></li> + </ul> + </li> + <li>Implementation + <ul> + <li class="leftNavSelected">Accessibility</li> + <li><a href="background_pages.html">Background Pages</a></li> + <li><a href="content_scripts.html">Content Scripts</a></li> + <li><a href="xhr.html">Cross-Origin XHR</a></li> + <li><a href="idle.html">Idle</a></li> + <li><a href="i18n.html">Internationalization</a></li> + <li><a href="messaging.html">Message Passing</a></li> + <li><a href="npapi.html">NPAPI Plugins</a></li> + </ul> + </li> + <li>Finishing + <ul> + <li><a href="hosting.html">Hosting</a></li> + <li><a href="external_extensions.html">Other Deployment Options</a></li> + </ul> + </li> + </ul> + </li> + <li><h2><a href="tutorials.html">Tutorials</a></h2> + <ul> + <li><a href="tut_debugging.html">Debugging</a></li> + <li><a href="tut_analytics.html">Google Analytics</a></li> + <li><a href="tut_oauth.html">OAuth</a></li> + </ul> + </li> + <li><h2>Reference</h2> + <ul> + <li>Formats + <ul> + <li><a href="manifest.html">Manifest Files</a></li> + <li><a href="match_patterns.html">Match Patterns</a></li> + <!-- <li>Packages (.crx)</li> --> + </ul> + </li> + <li><a href="api_index.html">chrome.* APIs</a></li> + <li><a href="api_other.html">Other APIs</a></li> + </ul> + </li> + <li><h2><a href="samples.html">Samples</a></h2></li> + </ul> + </div> + + <div class="g-unit" id="gc-pagecontent"> + <div id="pageTitle"> + <h1 class="page_title">Accessibility (a11y)</h1> + </div> + <!-- TABLE OF CONTENTS --> + <div id="toc"> + <h2>Contents</h2> + <ol> + <li> + <a href="#controls">Use accessible UI controls</a> + <ol> + <li> + <a href="#htmlcontrols">Standard controls</a> + </li><li> + <a href="#aria">ARIA in custom controls</a> + </li><li> + <a href="#focus">Focus in custom controls</a> + </li> + </ol> + </li><li> + <a href="#keyboard"> Support keyboard access </a> + <ol> + <li> + <a href="#navigation"> Navigation </a> + </li><li> + <a href="#shortcuts"> Shortcuts </a> + </li> + </ol> + </li><li> + <a href="#more"> Provide accessible content </a> + <ol> + <li> + <a href="#text">Text</a> + </li><li> + <a href="#colors">Colors</a> + </li><li> + <a href="#sound">Sound</a> + </li><li> + <a href="#images">Images</a> + </li> + </ol> + </li><li> + <a href="#examples">Examples</a> + <ol> + <li style="display: none; "> + <a>h3Name</a> + </li> + </ol> + </li> + <li style="display: none; "> + <a href="#apiReference">API reference</a> + <ol> + <li> + <a href="#properties">Properties</a> + <ol> + <li> + <a href="#property-anchor">propertyName</a> + </li> + </ol> + </li> + <li> + <a href="#methods">Methods</a> + <ol> + <li> + <a href="#method-anchor">methodName</a> + </li> + </ol> + </li> + <li> + <a href="#events">Events</a> + <ol> + <li> + <a href="#event-anchor">eventName</a> + </li> + </ol> + </li> + <li> + <a href="#types">Types</a> + <ol> + <li> + <a href="#id-anchor">id</a> + </li> + </ol> + </li> + </ol> + </li> + </ol> + </div> + <!-- /TABLE OF CONTENTS --> + + <!-- Standard content lead-in for experimental API pages --> + <p id="classSummary" style="display: none; "> + For information on how to use experimental APIs, see the <a href="experimental.html">chrome.experimental.* APIs</a> page. + </p> + + <!-- STATIC CONTENT PLACEHOLDER --> + <div id="static"><div id="pageData-name" class="pageData">Accessibility (a11y)</div> +<div id="pageData-showTOC" class="pageData">true</div> + +<p> +When you design an extension, +try to make it as accessible as possible +to people with disabilities such as +visual impairment, hearing loss, and limited dexterity. +</p> + +<p> +Everyone — not just people with special needs — +can benefit from the alternative access modes +that accessible extensions provide. +For example, keyboard shortcuts are important +for blind people and people with limited dexterity, +but they also help power users get things done +more quickly without using a mouse. +Captions and transcripts give deaf people access to audio content, +but they are also useful to language learners. +</p> + +<p> +People can interact with your extension in a variety of ways. +They might use a standard monitor, keyboard, and mouse, +or they might use a screen magnifier and just a keyboard. +Another possibility is a <em>screen reader</em>, +an assistive application tool that interprets +what's displayed onscreen +for a blind or visually impaired user. +A screen reader might speak out loud or produce Braille output. +</p> + +<p> +Although you can't predict what tools people will use, +by following a few simple guidelines +you can write an extension that is +more likely to be accessible to more people. +The guidelines on this page aren't going to +make your extension accessible for absolutely everyone, +but they're a good starting point. +</p> + + +<h2 id="controls">Use accessible UI controls</h2> + +<p> +First, use UI controls that support accessibility. +The easiest way to get an accessible control is to use a +standard HTML control. +If you need to build a custom control, +keep in mind that it's much easier +to make the control accessible from the beginning +than to go back and add accessibility support later. +</p> + +<h3 id="htmlcontrols">Standard controls</h3> + +<p> +Try to use standard HTML UI controls whenever possible. +Standard HTML controls (shown in the following figure) +are keyboard accessible, scale easily, +and are generally understood by screen readers. +</p> + +<img src="images/a11y/standard-html-controls.png" width="550" height="350" alt="Screenshots and code for button, checkbox, radio, text, select/option, and link"> + + +<h3 id="aria">ARIA in custom controls</h3> + +<p> +ARIA is a specification for making UI controls accessible to screen readers +by means of a standard set of DOM attributes. +These attributes provide clues to the screen reader +about the function and current state of controls on a web page. +ARIA is a +<a href=" http://www.w3.org/WAI/intro/aria">work in progress at the W3C</a>. +</p> + +<p> +Adding ARIA support to custom controls in your extension +involves modifying DOM elements to add attributes +Google Chrome uses +to raise events during user interaction. +Screen readers respond to these events +and describe the function of the control. +The DOM attributes specified by ARIA are classified into +<em>roles</em>, <em>states</em>, and <em>properties</em>. +</p> + +<p> +The ARIA attribute <em>role</em> +is an indication of the control type +and describes the way the control should behave. +It is expressed with the DOM attribute <code>role</code>, +with a value set to one of the pre-defined ARIA role strings. +Because ARIA roles are static, +the role attribute should not change its value. +</p> + +<p> +The <a href="http://www.w3.org/WAI/PF/aria/roles">ARIA Role Specification</a> +holds detailed information on how to pick the correct role. +For example, if your extension includes a toolbar, +set the <code>role</code> attribute of the toolbar's DOM element as follows: +</p> + +<pre><div role="toolbar"> +</pre> + +<p> +ARIA attributes are also used to describe +the current state and properties of controls of a particular role. +A <em>state</em> is dynamic and should be updated during user interaction. +For example, a control with the role "checkbox" +could be in the states "checked" or "unchecked". +A <em>property</em> is not generally dynamic, +but is similar to a state +in that it expresses specific information about a control. +For more information on ARIA states and properties, +refer to the +<a href="http://www.w3.org/TR/wai-aria/states_and_properties">W3C States and Properties specification</a>. +</p> + + +<p class="note"> +<b>Note:</b> +You don't have to use +all of the states and properties available for a particular role. +</p> + +<p> +Here's an example of adding +the ARIA property <code>aria-activedescendant</code> +to the example toolbar control: +</p> + +<pre><div role="toolbar" tabindex="0" aria-activedescendant="button1"> +</pre> + +<p> +The +<a href="http://www.w3.org/WAI/PF/aria/states_and_properties#aria-activedescendant"><code>aria-activedescendant</code></a> +property specifies which child of the toolbar receives focus +when the toolbar receives focus. +In this example, the toolbar's first button +(which has the <code>id</code> "button1") +is the child that gets focus. +The code <code>tabindex="0"</code> +specifies that the toolbar +receives focus in document order. +</p> + +<p> +Here's the complete specification for the example toolbar: +</p> + +<pre><div role="toolbar" tabindex="0" aria-activedescendant="button1"> + <img src="buttoncut.png" role="button" alt="cut" id="button1"> + <img src="buttoncopy.png" role="button" alt="copy" id="button2"> + <img src="buttonpaste.png" role="button" alt="paste" id="button3"> +</div> +</pre> + +<p> +Once ARIA roles, states, and properties are added to the DOM of a control, +Google Chrome raises the appropriate events to the screen reader. +Because ARIA support is still a work in progress, +Google Chrome might not raise an event for every ARIA property, +and screen readers might not recognize all of the events being raised. +You can find more information on ARIA support in Google Chrome in the +<a href="http://www.chromium.org/developers/design-documents/accessibility#TOC-WAI-ARIA-Support">Chromium Accessibility Design Document</a>. +</p> + +<p> +For a quick tutorial on adding ARIA controls to custom controls, see +<a href="http://www.w3.org/2010/Talks/www2010-dsr-diy-aria/">Dave Raggett's presentation from WWW2010</a>. + +</p><h3 id="focus">Focus in custom controls</h3> + +<p> +Make sure that operation and navigation controls of your extension +can receive keyboard focus. +Operation controls might include +buttons, trees, and list boxes. +Navigation controls might include tabs and menu bars. +</p> + +<p> +By default, the only elements in the HTML DOM +that can receive keyboard focus +are anchors, buttons, and form controls. +However, setting the HTML attribute <code>tabIndex</code> to <code>0</code> +places DOM elements in the default tab sequence, +enabling them to receive keyboard focus. +For example: +</p> + +<pre><em>element</em>.tabIndex = 0 +</pre> + +<p> +Setting <code>tabIndex = -1</code> removes the element from the tab sequence +but still allows the element to receive keyboard focus programmatically. +Here's an example of setting keyboard focus: +</p> + +<pre><em>element</em>.focus(); +</pre> + +<p> +Ensuring that your custom UI controls include keyboard support +is important not only for users who don't use the mouse +but also because screen readers use keyboard focus +to determine which control to describe. +</p> + +<h2 id="keyboard"> Support keyboard access </h2> + +<p> +People should be able to use your extension +even if they can't or don't want to use a mouse. +</p> + +<h3 id="navigation"> Navigation </h3> + +<p> +Check that the user can navigate between +the different parts of your extension +without using the mouse. +Also check that any popups on page actions or browser actions +are keyboard navigable. +</p> + +<p class="note"> +<b>Note:</b> +We're improving keyboard accessibility to Google Chrome's interface; +keyboard navigation to the icons of page actions and browser actions +is expected in Google Chrome 6. +For details, see +<a href="#builtin">Built-in toolbar navigation</a>. +</p> + +<p> +Make sure that it's easy to see +which part of the interface has keyboard focus. +Usually a focus outline moves around the interface, +but if you’re using CSS heavily this outline might be suppressed +or the contrast might be reduced. +Two examples of focus outline follow. +</p> + +<img src="images/a11y/focus-outline-2.png" width="200" height="75" alt="A focus outline on a Search button"> +<br> +<img src="images/a11y/focus-outline.png" width="400" height="40" alt="A focus outline on one of a series of links"> + +<h4 id="builtin"> Built-in toolbar navigation </h4> + +<p> +Here are the keyboard shortcuts that we expect to be in Google Chrome 6. +You can try them out now in the Dev channel. +</p> + +<p> +</p><table> + <tbody><tr> + <td> <b>Alt+Shift+T</b> </td> + <td> Focus on the first tool in the main toolbar. </td></tr> + + <tr><td> <b>Tab</b>, <b>Shift+Tab</b>, <b>Home</b>, <b>End</b> </td> + <td> Move around in the toolbar, + including focusing on page actions and browser actions. </td></tr> + + <tr><td> <b>Left arrow</b>, <b>Right arrow</b> </td> + <td> Move around in the toolbar, + unless you're in an edit box like the location bar, + where those keys are used for text editing. </td></tr> + + <tr><td> <b>Space</b>, <b>Enter</b> </td> + <td> Activate toolbar buttons, + including page actions and browser actions. </td></tr> + + <tr><td> <b>Context menu key</b>, <b>Shift+F10</b> </td> + <td> Open a toolbar button's context menu. </td></tr> + + <tr><td> <b>Escape</b> </td> + <td> Return focus from the toolbar to the previous location. </td></tr> + + <tr><td> <b>F6</b>, <b>Shift+F6</b> </td> + <td> Switch focus to the next keyboard-accessible pane, + where panes include the + main web content, + toolbar, + and bookmarks bar (if visible). </td></tr> + +</tbody></table> +<p></p> + + +<h3 id="shortcuts"> Shortcuts </h3> + +<p> +Although the most common keyboard navigation strategy involves +using the Tab key to move focus through the extension interface, +that's not always the easiest or most efficient way +to use the interface. +You can make keyboard navigation easier +by providing explicit keyboard shortcuts. +</p> + +<p> +To implement shortcuts, +connect keyboard event listeners to your controls. +A good reference is the DHTML Style Guide Working Group’s +<a href="http://dev.aol.com/dhtml_style_guide">guidelines for keyboard shortcuts</a>. +</p> + +<p> +A good way to ensure discoverability of keyboard shortcuts +is to list them somewhere. +Your extension’s +<a href="options.html">Options page</a> +might be a good place to do this. +</p> + +<p> +For the example toolbar, +a simple JavaScript keyboard handler could look like the following. +Note how the ARIA property <code>aria-activedescendant</code> +is updated in response to user input +to reflect the current active toolbar button. +</p> + +<pre><head> +<script> + function optionKeyEvent(event) { + var tb = event.target; + var buttonid; + + ENTER_KEYCODE = 13; + RIGHT_KEYCODE = 39; + LEFT_KEYCODE = 37; + // Partial sample code for processing arrow keys. + if (event.type == "keydown") { + // Implement circular keyboard navigation within the toolbar buttons + if (event.keyCode == ENTER_KEYCODE) { + ExecuteButtonAction(getCurrentButtonID()); + <em>// getCurrentButtonID defined elsewhere </em> + } else if (event.keyCode == event.RIGHT_KEYCODE) { + // Change the active toolbar button to the one to the right (circular). + var buttonid = getNextButtonID(); + <em>// getNextButtonID defined elsewhere </em> + tb.setAttribute("aria-activedescendant", buttonid); + } else if (event.keyCode == event.LEFT_KEYCODE) { + // Change the active toolbar button to the one to the left (circular). + var buttonid = getPrevButtonID(); + <em>// getPrevButtonID defined elsewhere </em> + tb.setAttribute("aria-activedescendant", buttonid); + } else { + return true; + } + return false; + } +} +</script> + +<div role="toolbar" tabindex="0" aria-activedescendant="button1" id="tb1" + onkeydown="return optionKeyEvent(event);" + onkeypress="return optionKeyEvent(event);"> + <img src="buttoncut" role="button" alt="cut" id="button1"> + <img src="buttoncopy" role="button" alt="copy" id="button1"> + <img src="buttonpaste" role="button" alt="paste" id="button1"> +</div> +</pre> + + +<h2 id="more"> Provide accessible content </h2> + + +<p> +The remaining guidelines might be familiar +because they reflect good practices for all web content, +not just extensions. +</p> + +<h3 id="text">Text</h3> + +<p> +Evaluate your use of text in your extension. +Many people might find it helpful +if you provide a way to increase the text size within your extension. +If you are using keyboard shortcuts, +make sure that they don't interfere with +the zoom shortcuts built into Google Chrome. +</p> + +<p> +As an indicator of the flexibility of your UI, +apply the <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-scale">200% test</a>. +If you increase the text size or page zoom 200%, +is your extension still usable? +</p> + +<p> +Also, avoid baking text into images: +users cannot modify the size of text displayed as an image, +and screenreaders cannot interpret images. +Consider using a web font instead, +such as one of the fonts collected in the +<a href="http://code.google.com/apis/webfonts/">Google Font API</a>. +Text styled in a web font is searchable, +scales to different sizes, +and is accessible to people using screen readers. +</p> + +<h3 id="colors">Colors</h3> + +<p> +Check that there is sufficient contrast between +background color and foreground/text color in your extension. +<a href="http://snook.ca/technical/colour_contrast/colour.html">This contrast checking tool</a> +checks whether your background and foreground colors +provide appropriate contrast. +If you’re developing in a Windows environment, +you can also enable High Contrast Mode +to check the contrast of your extension. +When evaluating contrast, +verify that every part of your extension that relies on +color or graphics to convey information is clearly visible. +For specific images, you can use a tool such as the +<a href="http://www.vischeck.com/vischeck/">Vischeck simulation tool</a> +to see what an image looks like in various forms of color deficiency. +</p> + +<p> +You might consider offering different color themes, +or giving the user the ability to customize the color scheme +for better contrast. +</p> + +<h3 id="sound">Sound</h3> + +<p> +If your extension relies upon sound or video to convey information, +ensure that captions or a transcript are available. +See the +<a href="http://www.dcmp.org/ciy/">Described and Captioned Media Program guidelines</a> +for more information on captions. +</p> + +<h3 id="images">Images</h3> + +<p> +Provide informative alt text for your images. +For example: +</p> + +<pre><img src="img.jpg" alt="The logo for the extension"> +</pre> + +<p> +Use the alt text to state the purpose of the image +rather than as a literal description of the contents of an image. +Spacer images or purely decorative images +should have blank ("") alt text +or be removed from the HTML entirely and placed in the CSS. +</p> + +<p> +If you must use text in an image, +include the image text in the alt text. +A good resource to refer to is the +<a href="http://www.webaim.org/techniques/alttext/">WebAIM article on appropriate alt text</a>. + +</p><h2 id="examples">Examples</h2> + +<p> +For an example that implements keyboard navigation and ARIA properties, see +<a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/extensions/news_a11y/">examples/extensions/news_a11y</a> +(compare it to +<a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/extensions/news/">examples/extensions/news</a>). +For more examples and for help in viewing the source code, +see <a href="samples.html">Samples</a>. + +</p></div> + + <!-- API PAGE --> + <div class="apiPage" style="display: none; "> + <a name="apiReference"></a> + <h2>API reference: chrome.apiname </h2> + + <!-- PROPERTIES --> + <div class="apiGroup"> + <a name="properties"></a> + <h3 id="properties">Properties</h3> + + <div> + <a></a> + <h4>getLastError</h4> + <div class="summary"> + <!-- Note: intentionally longer 80 columns --> + <span>chrome.extension</span><span>lastError</span> + </div> + <div> + </div> + </div> + + </div> <!-- /apiGroup --> + + <!-- METHODS --> + <div class="apiGroup" id="methods"> + <a name="methods"></a> + <h3>Methods</h3> + + <!-- iterates over all functions --> + <div class="apiItem"> + <a></a> <!-- method-anchor --> + <h4>method name</h4> + + <div class="summary"><span>void</span> + <!-- Note: intentionally longer 80 columns --> + <span>chrome.module.methodName</span>(<span><span>, </span><span></span> + <var><span></span></var></span>)</div> + + <div class="description"> + <p class="todo">Undocumented.</p> + <p> + A description from the json schema def of the function goes here. + </p> + + <!-- PARAMETERS --> + <h4>Parameters</h4> + <dl> + <div> + <div> + </div> + </div> + </dl> + + <!-- RETURNS --> + <h4>Returns</h4> + <dl> + <div> + <div> + </div> + </div> + </dl> + + <!-- CALLBACK --> + <div> + <div> + <h4>Callback function</h4> + <p> + The callback <em>parameter</em> should specify a function + that looks like this: + </p> + <p> + If you specify the <em>callback</em> parameter, it should + specify a function that looks like this: + </p> + + <!-- Note: intentionally longer 80 columns --> + <pre>function(<span>Type param1, Type param2</span>) <span class="subdued">{...}</span>;</pre> + <dl> + <div> + <div> + </div> + </div> + </dl> + </div> + </div> + + <!-- MIN_VERSION --> + <p> + This function was added in version <b><span></span></b>. + If you require this function, the manifest key + <a href="manifest.html#minimum_chrome_version">minimum_chrome_version</a> + can ensure that your extension won't be run in an earlier browser version. + </p> + </div> <!-- /description --> + + </div> <!-- /apiItem --> + + </div> <!-- /apiGroup --> + + <!-- EVENTS --> + <div class="apiGroup"> + <a name="events"></a> + <h3 id="events">Events</h3> + + <!-- iterates over all events --> + <div class="apiItem"> + <a></a> + <h4>event name</h4> + + <div class="summary"> + <!-- Note: intentionally longer 80 columns --> + <span class="subdued">chrome.bookmarks</span><span>onEvent</span><span class="subdued">.addListener</span>(function(<span>Type param1, Type param2</span>) <span class="subdued">{...}</span>); + </div> + + <div class="description"> + <p class="todo">Undocumented.</p> + <p> + A description from the json schema def of the event goes here. + </p> + + <!-- PARAMETERS --> + <h4>Parameters</h4> + <dl> + <div> + <div> + </div> + </div> + </dl> + + </div> <!-- /decription --> + + </div> <!-- /apiItem --> + + </div> <!-- /apiGroup --> + + <!-- TYPES --> + <div class="apiGroup"> + <a name="types"></a> + <h3 id="types">Types</h3> + + <!-- iterates over all types --> + <div class="apiItem"> + <a></a> + <h4>type name</h4> + + <div> + </div> + + </div> <!-- /apiItem --> + + </div> <!-- /apiGroup --> + + </div> <!-- /apiPage --> + </div> <!-- /gc-pagecontent --> + </div> <!-- /g-section --> + </div> <!-- /codesiteContent --> + <div id="gc-footer" --=""> + <div class="text"> + <p> + Except as otherwise <a href="http://code.google.com/policies.html#restrictions">noted</a>, + the content of this page is licensed under the <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons + Attribution 3.0 License</a>, and code samples are licensed under the + <a rel="license" href="http://code.google.com/google_bsd_license.html">BSD License</a>. + </p> + <p> + ©2010 Google + </p> + +<!-- begin analytics --> +<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script> +<script src="http://www.google-analytics.com/ga.js" type="text/javascript"></script> + +<script type="text/javascript"> + // chrome doc tracking + try { + var engdocs = _gat._getTracker("YT-10763712-2"); + engdocs._trackPageview(); + } catch(err) {} + + // code.google.com site-wide tracking + try { + _uacct="UA-18071-1"; + _uanchor=1; + _uff=0; + urchinTracker(); + } + catch(e) {/* urchinTracker not available. */} +</script> +<!-- end analytics --> + </div> + </div> <!-- /gc-footer --> + </div> <!-- /gc-container --> +</body></html> |