The Chromium Projects

Except as otherwise noted, the content of this page is licensed under a Creative Commons Attribution 2.5 license, and examples are licensed under the BSD License.

The Chromium OS designs and code are preliminary. Expect them to evolve.
For Developers‎ > ‎Design Documents‎ > ‎Extensions‎ > ‎

Toolstrips

This page is obsolete. Please see the new version at:

http://code.google.com/chrome/extensions/toolstrip.html

Overview

Toolstrips allow you to add UI to Chrome's toolbar area. Toolstrips are nothing more than (very small) HTML pages, so anything you can do with HTML/CSS/JavaScript, you can do with toolstrips.

Status

Implementation in progress.

Details

Register your toolstrips in the extension manifest, like this:

{
  "name": "My First Extension",
  "version": "1.0",

  "description": "The first extension that I made.",
  "toolstrips": [
    "one_toolstrip.html",
    "two_toolstrip.html"
  ]
}

You can create buttons that look like the bookmark bar buttons using this template:

<div class="toolstrip-button">
  <!-- Image is optional and should be a 16x16 icon. -->
  <img src="path/to/some_icon.png">
  <span>My Button</span>
</div>

Debugging Tips

  • You can right click on a toolstrip to get a web inspector.
  • alert(), prompt(), and confirm() don't work yet. Sorry about that.
  • You can run toolstrips in the main content area by loading their URL, which would be something like chrome-extension://0000000000000000000000000000000000000000/my_toolstrip.html

Design Tips

  • Try not to use too much space. Toolbar real estate is precious and users tend to prefer extensions to use as little of it as possible.
  • The toolbar automatically detects how much space a toolstrip needs and reflows. So you can resize your toolstrip dynamically if you need a little more room temporarily.
  • If you need to do more extensive UI, use the tab contents area or a pop up window.
  • Remember that there can be multiple instances of a given toolstrip page running at one time. Each browser window has its own toolstrip. If you need long-running application logic, try Background Pages.