themes.html revision 3f50c38dc070f4bb515c1b64450dae14f316474e
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 3) All <body>.innerHTML is genereated as an rendering step. If viewed in a 6 browser, it will be re-generated from the template, json schema and 7 authored overview content. 8 4) The <body>.innerHTML is also generated by an offline step so that this 9 page may easily be indexed by search engines. 10--><html xmlns="http://www.w3.org/1999/xhtml"><head> 11 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 12 <link href="css/ApiRefStyles.css" rel="stylesheet" type="text/css"> 13 <link href="css/print.css" rel="stylesheet" type="text/css" media="print"> 14 <script type="text/javascript" src="/third_party/jstemplate/jstemplate_compiled.js"> 15 </script> 16 <script type="text/javascript" src="js/api_page_generator.js"></script> 17 <script type="text/javascript" src="js/bootstrap.js"></script> 18 <script type="text/javascript" src="js/sidebar.js"></script> 19 <title>Themes - Google Chrome Extensions - Google Code</title></head> 20 <body> <div id="gc-container" class="labs"> 21 <div id="devModeWarning"> 22 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. 23 </div> 24 <!-- SUBTEMPLATES: DO NOT MOVE FROM THIS LOCATION --> 25 <!-- In particular, sub-templates that recurse, must be used by allowing 26 jstemplate to make a copy of the template in this section which 27 are not operated on by way of the jsskip="true" --> 28 <div style="display:none"> 29 30 <!-- VALUE --> 31 <div id="valueTemplate"> 32 <dt> 33 <var>paramName</var> 34 <em> 35 36 <!-- TYPE --> 37 <div style="display:inline"> 38 ( 39 <span class="optional">optional</span> 40 <span class="enum">enumerated</span> 41 <span id="typeTemplate"> 42 <span> 43 <a> Type</a> 44 </span> 45 <span> 46 <span> 47 array of <span><span></span></span> 48 </span> 49 <span>paramType</span> 50 <span></span> 51 </span> 52 </span> 53 ) 54 </div> 55 56 </em> 57 </dt> 58 <dd class="todo"> 59 Undocumented. 60 </dd> 61 <dd> 62 Description of this parameter from the json schema. 63 </dd> 64 <dd> 65 This parameter was added in version 66 <b><span></span></b>. 67 You must omit this parameter in earlier versions, 68 and you may omit it in any version. If you require this 69 parameter, the manifest key 70 <a href="manifest.html#minimum_chrome_version">minimum_chrome_version</a> 71 can ensure that your extension won't be run in an earlier browser version. 72 </dd> 73 74 <!-- OBJECT PROPERTIES --> 75 <dd> 76 <dl> 77 <div> 78 <div> 79 </div> 80 </div> 81 </dl> 82 </dd> 83 84 <!-- FUNCTION PARAMETERS --> 85 <dd> 86 <div></div> 87 </dd> 88 89 </div> <!-- /VALUE --> 90 91 <div id="functionParametersTemplate"> 92 <h5>Parameters</h5> 93 <dl> 94 <div> 95 <div> 96 </div> 97 </div> 98 </dl> 99 </div> 100 </div> <!-- /SUBTEMPLATES --> 101 102 <a id="top"></a> 103 <div id="skipto"> 104 <a href="#gc-pagecontent">Skip to page content</a> 105 <a href="#gc-toc">Skip to main navigation</a> 106 </div> 107 <!-- API HEADER --> 108 <table id="header" width="100%" cellspacing="0" border="0"> 109 <tbody><tr> 110 <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> 111 <td valign="middle" width="100%" style="padding-left:0.6em;"> 112 <form action="http://www.google.com/cse" id="cse" style="margin-top:0.5em"> 113 <div id="gsc-search-box"> 114 <input type="hidden" name="cx" value="002967670403910741006:61_cvzfqtno"> 115 <input type="hidden" name="ie" value="UTF-8"> 116 <input type="text" name="q" value="" size="55"> 117 <input class="gsc-search-button" type="submit" name="sa" value="Search"> 118 <br> 119 <span class="greytext">e.g. "page action" or "tabs"</span> 120 </div> 121 </form> 122 123 <script type="text/javascript" src="http://www.google.com/jsapi"></script> 124 <script type="text/javascript">google.load("elements", "1", {packages: "transliteration"});</script> 125 <script type="text/javascript" src="http://www.google.com/coop/cse/t13n?form=cse&t13n_langs=en"></script> 126 <script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse&lang=en"></script> 127 </td> 128 </tr> 129 </tbody></table> 130 131 <div id="codesiteContent" class=""> 132 133 <a id="gc-topnav-anchor"></a> 134 <div id="gc-topnav"> 135 <h1>Google Chrome Extensions (<a href="http://code.google.com/labs/">Labs</a>)</h1> 136 <ul id="home" class="gc-topnav-tabs"> 137 <li id="home_link"> 138 <a href="index.html" title="Google Chrome Extensions home page">Home</a> 139 </li> 140 <li id="docs_link"> 141 <a href="docs.html" title="Official Google Chrome Extensions documentation">Docs</a> 142 </li> 143 <li id="faq_link"> 144 <a href="faq.html" title="Answers to frequently asked questions about Google Chrome Extensions">FAQ</a> 145 </li> 146 <li id="samples_link"> 147 <a href="samples.html" title="Sample extensions (with source code)">Samples</a> 148 </li> 149 <li id="group_link"> 150 <a href="http://groups.google.com/a/chromium.org/group/chromium-extensions" title="Google Chrome Extensions developer forum">Group</a> 151 </li> 152 </ul> 153 </div> <!-- end gc-topnav --> 154 155 <div class="g-section g-tpl-170"> 156 <!-- SIDENAV --> 157 <div class="g-unit g-first" id="gc-toc"> 158 <ul> 159 <li><a href="getstarted.html">Getting Started</a></li> 160 <li><a href="overview.html">Overview</a></li> 161 <li><a href="whats_new.html">What's New?</a></li> 162 <li><h2><a href="devguide.html">Developer's Guide</a></h2> 163 <ul> 164 <li>Browser UI 165 <ul> 166 <li><a href="browserAction.html">Browser Actions</a></li> 167 <li><a href="contextMenus.html">Context Menus</a></li> 168 <li><a href="notifications.html">Desktop Notifications</a></li> 169 <li><a href="omnibox.html">Omnibox</a></li> 170 <li><a href="options.html">Options Pages</a></li> 171 <li><a href="override.html">Override Pages</a></li> 172 <li><a href="pageAction.html">Page Actions</a></li> 173 </ul> 174 </li> 175 <li>Browser Interaction 176 <ul> 177 <li><a href="bookmarks.html">Bookmarks</a></li> 178 <li><a href="cookies.html">Cookies</a></li> 179 <li><a href="events.html">Events</a></li> 180 <li><a href="history.html">History</a></li> 181 <li><a href="management.html">Management</a></li> 182 <li><a href="tabs.html">Tabs</a></li> 183 <li><a href="windows.html">Windows</a></li> 184 </ul> 185 </li> 186 <li>Implementation 187 <ul> 188 <li><a href="a11y.html">Accessibility</a></li> 189 <li><a href="background_pages.html">Background Pages</a></li> 190 <li><a href="content_scripts.html">Content Scripts</a></li> 191 <li><a href="xhr.html">Cross-Origin XHR</a></li> 192 <li><a href="idle.html">Idle</a></li> 193 <li><a href="i18n.html">Internationalization</a></li> 194 <li><a href="messaging.html">Message Passing</a></li> 195 <li><a href="npapi.html">NPAPI Plugins</a></li> 196 </ul> 197 </li> 198 <li>Finishing 199 <ul> 200 <li><a href="hosting.html">Hosting</a></li> 201 <li><a href="external_extensions.html">Other Deployment Options</a></li> 202 </ul> 203 </li> 204 </ul> 205 </li> 206 <li><h2><a href="apps.html">Packaged Apps</a></h2></li> 207 <li><h2><a href="tutorials.html">Tutorials</a></h2> 208 <ul> 209 <li><a href="tut_debugging.html">Debugging</a></li> 210 <li><a href="tut_analytics.html">Google Analytics</a></li> 211 <li><a href="tut_oauth.html">OAuth</a></li> 212 </ul> 213 </li> 214 <li><h2>Reference</h2> 215 <ul> 216 <li>Formats 217 <ul> 218 <li><a href="manifest.html">Manifest Files</a></li> 219 <li><a href="match_patterns.html">Match Patterns</a></li> 220 </ul> 221 </li> 222 <li><a href="permission_warnings.html">Permission Warnings</a></li> 223 <li><a href="api_index.html">chrome.* APIs</a></li> 224 <li><a href="api_other.html">Other APIs</a></li> 225 </ul> 226 </li> 227 <li><h2><a href="samples.html">Samples</a></h2></li> 228 <div class="line"> </div> 229 <li><h2>More</h2> 230 <ul> 231 <li><a href="http://code.google.com/chrome/webstore/docs/index.html">Chrome Web Store</a></li> 232 <li><a href="http://code.google.com/chrome/apps/docs/developers_guide.html">Hosted Apps</a></li> 233 <li class="leftNavSelected">Themes</li> 234 </ul> 235 </li> 236 </ul> 237 </div> 238 <script> 239 initToggles(); 240 </script> 241 242 <div class="g-unit" id="gc-pagecontent"> 243 <div id="pageTitle"> 244 <h1 class="page_title">Themes</h1> 245 </div> 246 <!-- TABLE OF CONTENTS --> 247 <div id="toc"> 248 <h2>Contents</h2> 249 <ol> 250 <li> 251 <a href="#manifest"> Manifest </a> 252 <ol> 253 <li> 254 <a href="#colors">colors</a> 255 </li><li> 256 <a href="#images">images</a> 257 </li><li> 258 <a href="#properties">properties</a> 259 </li><li> 260 <a href="#tints">tints</a> 261 </li> 262 </ol> 263 </li><li> 264 <a href="#moredoc"> Additional documentation </a> 265 <ol> 266 <li style="display: none; "> 267 <a>h3Name</a> 268 </li> 269 </ol> 270 </li> 271 <li style="display: none; "> 272 <a href="#apiReference">API reference</a> 273 <ol> 274 <li> 275 <a href="#properties">Properties</a> 276 <ol> 277 <li> 278 <a href="#property-anchor">propertyName</a> 279 </li> 280 </ol> 281 </li> 282 <li> 283 <a href="#methods">Methods</a> 284 <ol> 285 <li> 286 <a href="#method-anchor">methodName</a> 287 </li> 288 </ol> 289 </li> 290 <li> 291 <a href="#events">Events</a> 292 <ol> 293 <li> 294 <a href="#event-anchor">eventName</a> 295 </li> 296 </ol> 297 </li> 298 <li> 299 <a href="#types">Types</a> 300 <ol> 301 <li> 302 <a href="#id-anchor">id</a> 303 </li> 304 </ol> 305 </li> 306 </ol> 307 </li> 308 </ol> 309 </div> 310 <!-- /TABLE OF CONTENTS --> 311 312 <!-- Standard content lead-in for experimental API pages --> 313 <p id="classSummary" style="display: none; "> 314 For information on how to use experimental APIs, see the <a href="experimental.html">chrome.experimental.* APIs</a> page. 315 </p> 316 317 <!-- STATIC CONTENT PLACEHOLDER --> 318 <div id="static"><div id="pageData-showTOC" class="pageData">true</div> 319 320<p> 321A <em>theme</em> is a special kind of extension 322that changes the way the browser looks. 323Themes are <a href="packaging.html">packaged</a> like regular extensions, 324but they don't contain JavaScript or HTML code. 325</p> 326 327<p> 328You can find and try a bunch of themes at the 329<a href="https://tools.google.com/chrome/intl/en/themes/">themes gallery</a>. 330</p> 331 332<img src="images/themes-1.gif" width="100" height="80" alt="grassy theme"> 333 334<img src="images/themes-2.gif" width="100" height="80" alt="dark theme"> 335 336<img src="images/themes-3.gif" width="100" height="80" alt="foggy theme"> 337 338<h2 id="manifest"> Manifest </h2> 339<p> 340Here is an example 341<a href="manifest.html"><code>manifest.json</code></a> 342file for a theme: 343</p> 344 345<!-- [PENDING: This page should eventually be (or point to) something that's very friendly to artists. You should only have to look at one page to create a theme. --> 346 347<pre>{ 348 "version": "2.6", 349 "name": "camo theme", 350<b> "theme": { 351 "<a href="#images">images</a>" : { 352 "theme_frame" : "images/theme_frame_camo.png", 353 "theme_frame_overlay" : "images/theme_frame_stripe.png", 354 "theme_toolbar" : "images/theme_toolbar_camo.png", 355 "theme_ntp_background" : "images/theme_ntp_background_norepeat.png", 356 "theme_ntp_attribution" : "images/attribution.png" 357 }, 358 "<a href="#colors">colors</a>" : { 359 "frame" : [71, 105, 91], 360 "toolbar" : [207, 221, 192], 361 "ntp_text" : [20, 40, 0], 362 "ntp_link" : [36, 70, 0], 363 "ntp_section" : [207, 221, 192], 364 "button_background" : [255, 255, 255] 365 }, 366 "<a href="#tints">tints</a>" : { 367 "buttons" : [0.33, 0.5, 0.47] 368 }, 369 "<a href="#properties">properties</a>" : { 370 "ntp_background_alignment" : "bottom" 371 } 372 }</b> 373} 374</pre> 375 376<h3 id="colors">colors</h3> 377 378<p> 379Colors are in RGB format. 380To find the strings you can use within the "colors" field, 381look for kColor* strings in 382<a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/browser/browser_theme_provider.cc"><code>browser_theme_provider.cc</code></a>. 383</p> 384 385<h3 id="images">images</h3> 386 387<p> 388Image resources use paths relative to the root of the extension. 389You can override any of the images that are specified by 390<code>kThemeableImages</code> in 391<a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/browser/browser_theme_provider.cc"><code>browser_theme_provider.cc</code></a>. 392Just remove the "IDR_" 393and convert the remaining characters to lowercase. 394For example, <code>IDR_THEME_NTP_BACKGROUND</code> 395(which <code>kThemeableImages</code> uses 396to specify the background of the new tab pane) 397corresponds to "theme_ntp_background". 398</p> 399 400<h3 id="properties">properties</h3> 401 402<p> 403This field lets you specify 404properties such as background alignment, 405background repeat, 406and an alternate logo. 407To see the properties and the values they can have, see 408<a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/browser/browser_theme_provider.cc"><code>browser_theme_provider.cc</code></a>. 409<!-- [PENDING: We should flesh this out.] --> 410</p> 411 412<h3 id="tints">tints</h3> 413 414<p> 415You can specify tints to be applied to parts of the UI 416such as buttons, the frame, and the background tab. 417Google Chrome supports tints, not images, 418because images don't work across platforms 419and are brittle in the case of adding new buttons. 420To find the strings you can use within the "tints" field, 421look for kTint* strings in 422<a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/browser/browser_theme_provider.cc"><code>browser_theme_provider.cc</code></a>. 423</p> 424 425<p> 426Tints are in Hue-Saturation-Lightness (HSL) format, 427using floating-point numbers in the range 0 - 1.0: 428</p> 429 430<ul> 431 <li> 432 <b>Hue</b> is an absolute value, with 0 and 1 being red. 433 </li> 434 <li> 435 <b>Saturation</b> is relative to the currently provided image. 436 0.5 is <em>no change</em>, 437 0 is <em>totally desaturated</em>, 438 and 1 is <em>full saturation</em>. 439 </li> 440 <li> 441 <b>Lightness</b> is also relative, 442 with 0.5 being <em>no change</em>, 443 0 as <em>all pixels black</em>, 444 and 1 as <em>all pixels white</em>. 445 </li> 446</ul> 447 448<p> 449You can alternatively use <code>-1.0</code> for any of the HSL values 450to specify <em>no change</em>. 451</p> 452 453 454<h2 id="moredoc"> Additional documentation </h2> 455 456<p> 457Community-written documentation to help you write themes is here: 458</p> 459 460<blockquote> 461<a href="http://code.google.com/p/chromium/wiki/ThemeCreationGuide">http://code.google.com/p/chromium/wiki/ThemeCreationGuide</a> 462</blockquote> 463</div> 464 465 <!-- API PAGE --> 466 <div class="apiPage" style="display: none; "> 467 <a name="apiReference"></a> 468 <h2>API reference: chrome.apiname </h2> 469 470 <!-- PROPERTIES --> 471 <div class="apiGroup"> 472 <a name="properties"></a> 473 <h3 id="properties">Properties</h3> 474 475 <div> 476 <a></a> 477 <h4>getLastError</h4> 478 <div class="summary"> 479 <!-- Note: intentionally longer 80 columns --> 480 <span>chrome.extension</span><span>lastError</span> 481 </div> 482 <div> 483 </div> 484 </div> 485 486 </div> <!-- /apiGroup --> 487 488 <!-- METHODS --> 489 <div class="apiGroup" id="methods"> 490 <a name="methods"></a> 491 <h3>Methods</h3> 492 493 <!-- iterates over all functions --> 494 <div class="apiItem"> 495 <a></a> <!-- method-anchor --> 496 <h4>method name</h4> 497 498 <div class="summary"><span>void</span> 499 <!-- Note: intentionally longer 80 columns --> 500 <span>chrome.module.methodName</span>(<span><span>, </span><span></span> 501 <var><span></span></var></span>)</div> 502 503 <div class="description"> 504 <p class="todo">Undocumented.</p> 505 <p> 506 A description from the json schema def of the function goes here. 507 </p> 508 509 <!-- PARAMETERS --> 510 <h4>Parameters</h4> 511 <dl> 512 <div> 513 <div> 514 </div> 515 </div> 516 </dl> 517 518 <!-- RETURNS --> 519 <h4>Returns</h4> 520 <dl> 521 <div> 522 <div> 523 </div> 524 </div> 525 </dl> 526 527 <!-- CALLBACK --> 528 <div> 529 <div> 530 <h4>Callback function</h4> 531 <p> 532 The callback <em>parameter</em> should specify a function 533 that looks like this: 534 </p> 535 <p> 536 If you specify the <em>callback</em> parameter, it should 537 specify a function that looks like this: 538 </p> 539 540 <!-- Note: intentionally longer 80 columns --> 541 <pre>function(<span>Type param1, Type param2</span>) <span class="subdued">{...}</span>;</pre> 542 <dl> 543 <div> 544 <div> 545 </div> 546 </div> 547 </dl> 548 </div> 549 </div> 550 551 <!-- MIN_VERSION --> 552 <p> 553 This function was added in version <b><span></span></b>. 554 If you require this function, the manifest key 555 <a href="manifest.html#minimum_chrome_version">minimum_chrome_version</a> 556 can ensure that your extension won't be run in an earlier browser version. 557 </p> 558 </div> <!-- /description --> 559 560 </div> <!-- /apiItem --> 561 562 </div> <!-- /apiGroup --> 563 564 <!-- EVENTS --> 565 <div class="apiGroup"> 566 <a name="events"></a> 567 <h3 id="events">Events</h3> 568 569 <!-- iterates over all events --> 570 <div class="apiItem"> 571 <a></a> 572 <h4>event name</h4> 573 574 <div class="summary"> 575 <!-- Note: intentionally longer 80 columns --> 576 <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>); 577 </div> 578 579 <div class="description"> 580 <p class="todo">Undocumented.</p> 581 <p> 582 A description from the json schema def of the event goes here. 583 </p> 584 585 <!-- PARAMETERS --> 586 <h4>Parameters</h4> 587 <dl> 588 <div> 589 <div> 590 </div> 591 </div> 592 </dl> 593 594 </div> <!-- /decription --> 595 596 </div> <!-- /apiItem --> 597 598 </div> <!-- /apiGroup --> 599 600 <!-- TYPES --> 601 <div class="apiGroup"> 602 <a name="types"></a> 603 <h3 id="types">Types</h3> 604 605 <!-- iterates over all types --> 606 <div class="apiItem"> 607 <a></a> 608 <h4>type name</h4> 609 610 <div> 611 </div> 612 613 </div> <!-- /apiItem --> 614 615 </div> <!-- /apiGroup --> 616 617 </div> <!-- /apiPage --> 618 </div> <!-- /gc-pagecontent --> 619 </div> <!-- /g-section --> 620 </div> <!-- /codesiteContent --> 621 <div id="gc-footer" --=""> 622 <div class="text"> 623 <p> 624 Except as otherwise <a href="http://code.google.com/policies.html#restrictions">noted</a>, 625 the content of this page is licensed under the <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons 626 Attribution 3.0 License</a>, and code samples are licensed under the 627 <a rel="license" href="http://code.google.com/google_bsd_license.html">BSD License</a>. 628 </p> 629 <p> 630 ©2011 Google 631 </p> 632 633<!-- begin analytics --> 634<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script> 635<script src="http://www.google-analytics.com/ga.js" type="text/javascript"></script> 636 637<script type="text/javascript"> 638 // chrome doc tracking 639 try { 640 var engdocs = _gat._getTracker("YT-10763712-2"); 641 engdocs._trackPageview(); 642 } catch(err) {} 643 644 // code.google.com site-wide tracking 645 try { 646 _uacct="UA-18071-1"; 647 _uanchor=1; 648 _uff=0; 649 urchinTracker(); 650 } 651 catch(e) {/* urchinTracker not available. */} 652</script> 653<!-- end analytics --> 654 </div> 655 </div> <!-- /gc-footer --> 656 </div> <!-- /gc-container --> 657</body></html> 658
