浏览器工具(Browser Actions)
使用Browser Actions可以在Google Chrome地址栏右侧的工具栏中添加图标。除了可以添加图标(icon)外，还可以添加提示(tooltip)，标记(badge)，弹出窗口(popup)。
原文 写道
Use browser actions to put icons in the main Google Chrome toolbar, to the right of the address bar. In addition to its icon, a browser action can also have a tooltip, a badge, and a popup.
参照下图，在地址栏的右侧有一个彩色的图标。图标下面有个弹出窗口。
原文 写道
In the following figure, the multicolored square to the right of the address bar is the icon for a browser action. A popup is below the icon.
如果你想让创建的图标不是一直显示，可以使用Page Action。
原文 写道
If you want to create an icon that isn't always visible, use a page action instead of a browser action.
Manifest
Browser Action的注册文件(manifest)格式如下：
原文 写道
Register your browser action in the extension manifest like this:
{
"name": "My extension",
...
"browser_action": {
"default_icon": "images/icon19.png", // 必需项
"default_title": "Google Mail", // 可选项; 显示在提示栏中
"default_popup": "popup.html" // 可选项
},
...
}
UI
Browser Action中必需包含图标(icon)，还可以包括提示(tooltip)，标记(badge)，弹出窗口(popup)。
原文 写道
A browser action must have an icon. It can also have a tooltip, a badge, and a popup.
图标(Icon)
Browser Action的图标使用19x19像素的图标。大图标会被调整到适合的大小，但为了达到最佳效果，请使用19x19像素的图标。
原文 写道
Browser action icons can be up to 19 pixels wide and high. Larger icons are resized to fit, but for best results, use a 19-pixel square icon.
你可以通过两种方式来设置图标：使用静态图片和使用HTML5的canvas元素。静态图片可以容易的创建应用程序，但是你如果想创建动态的UI ― 如流畅的动画效果 ― 请使用canvas元素。
原文 写道
You can set the icon in two ways: using a static image or using the HTML5 canvas element. Using static images is easier for simple applications, but you can create more dynamic UIs ― such as smooth animation ― using the canvas element.
静态图片可以是任何WebKit识别的图片格式，包括BMP，GIF，ICO，JPEG和PNG。
原文 写道
Static images can be in any format WebKit can display, including BMP, GIF, ICO, JPEG, or PNG.
通过manifest文件中的browser_action下的default_icon字段，或者调用setIcon()方法来设置图标。
原文 写道
To set the icon, use the default_icon field of browser_action in the manifest, or call the setIcon() method.
提示(Tooltip)
通过manifest文件中的browser_action下的default_title字段，或者调用setTitle()方法来设置提示。你可以设置default_title字段的地区设定特性(locale-specific)；详细请见国际化
原文 写道
To set the tooltip, use the default_title field of browser_action in the manifest, or call the setTitle() method. You can specify locale-specific strings for the default_title field; see Internationalization for details.
标记(Badge)
Browser Actions可以显示标记(可选的) ― 在图标的上层显示一些文字。标记可以方便的显示扩展程序的状态。
原文 写道
Browser actions can optionally display a badge ― a bit of text that is layered over the icon. Badges make it easy to update the browser action to display a small amount of information about the state of the extension.
由于标记的空间有限，它可以表示4个或更少的字符。
原文 写道
Because the badge has limited space, it should have 4 characters or less.
设置标记的文字和颜色请分别使用setBadgeText()和setBadgeBackgroundColor()方法。
原文 写道
Set the text and color of the badge using setBadgeText() and setBadgeBackgroundColor(), respectively.
弹出窗口(Popup)
在用户点击Browser Action的图标时显示一个弹出窗口。弹出窗口会自动调整大小来适应你的HTML内容。
原文 写道
If a browser action has a popup, the popup appears when the user clicks the icon. The popup can contain any HTML contents that you like, and it's automatically sized to fit its contents.
创建一个HTML文件当做Browser Action弹出窗口的内容。通过manifest文件中的browser_action下的default_popup字段，或者setPopup()方法为弹出窗口指定HTML文件。
原文 写道
To add a popup to your browser action, create an HTML file with the popup's contents. Specify the HTML file in the default_popup field of browser_action in the manifest, or call the setPopup() method.
提示
为了获得最佳的视觉效果，遵循以下原则：
原文 写道
For the best visual impact, follow these guidelines:
- 在大多数网页上使用的功能请使用Browser Actions。
- 只在少数网页上使用的功能请不要使用Browser Actions。使用Page Actions代替。
- 请使用19x19像素的彩色大图标。Browser Action图标似乎应该比Page Action图标大。
- 请不要尝试模仿Google Chrome's的单色的“扳手”和“页面”图标。那并不能在主题之中很好的表示，反正，扩展程序应该突出的一点。
- 请使用Alpha透明来柔边填充你的图标。因为很多人使用主题，你的图标应该可以很好的显示在有多种颜色的背景上。
- 请不要经常的使用动态图标。那样会很烦人。
原文 写道
Do use browser actions for features that make sense on most pages.
原文 写道
Don't use browser actions for features that make sense for only a few pages. Use page actions instead.
原文 写道
Do use big, colorful icons that make the most of the 19x19-pixel space. Browser action icons should seem a little bigger and heavier than page action icons.
原文 写道
Don't attempt to mimic Google Chrome's monochrome "wrench" and "page" icons. That doesn't work well with themes, and anyway, extensions should stand out a little.
原文 写道
Do use alpha transparency to add soft edges to your icon. Because many people use themes, your icon should look nice on a variety of background colors.
原文 写道
Don't constantly animate your icon. That's just annoying.
范例
你在可以在examples/api/browserAction目录中找到使用Browser Actions的范例。至于在查看源代码时的其他范例与帮助，请参照Samples
原文 写道
You can find simple examples of using browser actions in the examples/api/browserAction directory. For other examples and for help in viewing the source code, see Samples.
API参考: chrome.browserAction
方法
setBadgeBackgroundColor
chrome.browserAction.setBadgeBackgroundColor(object details)
设置标记的背景颜色。
原文 写道
Sets the background color for the badge.
参数
details ( object )
color ( array of integer )
RGBA颜色模式（取值范围为[0,255]的4个整型元素）的数组。例如：不透明的红色为[255, 0, 0, 255]。
原文 写道
An array of four integers in the range [0,255] that make up the RGBA color of the badge. For example, opaque red is [255, 0, 0, 255].
tabId ( optional integer )
在指定的页面标签上设置为已选择。当页面标签被关闭后自动复位。
原文 写道
Limits the change to when a particular tab is selected. Automatically resets when the tab is closed.
setBadgeText
chrome.browserAction.setBadgeText(object details)
为Browser Action设置标记文字。标记文件显示在图标的上面。
原文 写道
Sets the badge text for the browser action. The badge is displayed on top of the icon.
参数
details ( object )
text ( string )
可以设置不超过4位的任意数字。
原文 写道
Any number of characters can be passed, but only about four can fit in the space.
tabId ( optional integer )
在指定的页面标签上设置为已选择。当页面标签被关闭后自动复位。
原文 写道
Limits the change to when a particular tab is selected. Automatically resets when the tab is closed.
setIcon
chrome.browserAction.setIcon(object details)
为Browser Action设置图标。该图标可以指定为一个图像文件的路径或者是一个canvas元素生成的像素数据。无论是路径或是imageData属性都必须被指定。
原文 写道
Sets the icon for the browser action. The icon can be specified either as the path to an image file or as the pixel data from a canvas element. Either the path or the imageData property must be specified.
参数
details ( object )
imageData ( optional ImageData )
像素数据的图像。必需为ImageData对象（例如：从canvas元素生成的对象）。
原文 写道
Pixel data for an image. Must be an ImageData object (for example, from a canvas element).
path ( optional string )
相对于扩展程序目录中的路径。
原文 写道
Relative path to an image in the extension to show in the browser action.
tabId ( optional integer )
在指定的页面标签上设置为已选择。当页面标签被关闭后自动复位。
原文 写道
Limits the change to when a particular tab is selected. Automatically resets when the tab is closed.
setPopup
chrome.browserAction.setPopup(object details)
为Browser Action设置一个HTML文件。作为用户点击Browser Action图标后弹出窗口的内容。
原文 写道
Sets the html document to be opened as a popup when the user clicks on the browser action's icon.
参数
details ( object )
tabId ( optional integer )
在指定的页面标签上设置为已选择。当页面标签被关闭后自动复位。
原文 写道
Limits the change to when a particular tab is selected. Automatically resets when the tab is closed.
popup ( string )
在弹出窗口中显示的HTML文件。如果设置为空字符串（''）,为不显示弹出窗口。
原文 写道
The html file to show in a popup. If set to the empty string (''), no popup is shown.
setTitle
chrome.browserAction.setTitle(object details)
为Browser Action设置提示。显示在提示栏中。
原文 写道
Sets the title of the browser action. This shows up in the tooltip.
参数
details ( object )
title ( string )
当鼠标移动到Browser Action上时显示的文字。
原文 写道
The string the browser action should display when moused over.
tabId ( optional integer )
在指定的页面标签上设置为已选择。当页面标签被关闭后自动复位。
原文 写道
Limits the change to when a particular tab is selected. Automatically resets when the tab is closed.
事件
onClicked
chrome.browserAction.onClicked.addListener(function(Tab tab) {...});当Browser Action被点击时触发。当Browser Action含有弹出窗口时不被触发。
原文 写道
Fired when a browser action icon is clicked. This event will not fire if the browser action has a popup.
参数
tab ( Tab )