Toolstrips

Contents

1. Details
   1. h3Name
2. Debugging Tips
   1. h3Name
3. Design Tips
   1. h3Name
API Reference: chrome.toolstrip
1. Properties
   1. propertyName
2. Methods
   1. expand
   2. collapse
3. Events
   1. eventName
4. Types
   1. id

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.

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.