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