开发指南--浏览器用户界面--浏览器工具(Browser Actions)

[size=x-large][b]浏览器工具(Browser Actions)[/b][/size]
使用Browser Actions可以在Google Chrome地址栏右侧的工具栏中添加图标。除了可以添加图标(icon)外，还可以添加提示(tooltip)，标记(badge)，弹出窗口(popup)。
[quote="原文"]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.[/quote]
参照下图，在地址栏的右侧有一个彩色的图标。图标下面有个弹出窗口。
[quote="原文"]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.[/quote]
[img]http://code.google.com/chrome/extensions/images/browser-action.png[/img]

如果你想让创建的图标不是一直显示，可以使用Page Action。
[quote="原文"]If you want to create an icon that isn't always visible, use a page action instead of a browser action.[/quote]
[color=green][b][size=large]Manifest[/size][/b][/color]
Browser Action的注册文件(manifest)格式如下：
[quote="原文"]Register your browser action in the extension manifest like this:[/quote]

{
  "name": "My extension",
  ...
  "browser_action": {
    "default_icon": "images/icon19.png", // 必需项
    "default_title": "Google Mail",      // 可选项; 显示在提示栏中
    "default_popup": "popup.html"        // 可选项
  },
  ...
}

[color=green][b][size=large]UI[/size][/b][/color]
Browser Action中必需包含图标(icon)，还可以包括提示(tooltip)，标记(badge)，弹出窗口(popup)。
[quote="原文"]A browser action must have an icon. It can also have a tooltip, a badge, and a popup.[/quote]
[b][size=medium] 图标(Icon)[/size][/b]
Browser Action的图标使用19x19像素的图标。大图标会被调整到适合的大小，但为了达到最佳效果，请使用19x19像素的图标。
[quote="原文"]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.[/quote]
你可以通过两种方式来设置图标：使用静态图片和使用HTML5的[url=http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html]canvas元素[/url]。静态图片可以容易的创建应用程序，但是你如果想创建动态的UI — 如流畅的动画效果 — 请使用canvas元素。
[quote="原文"]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.[/quote]
静态图片可以是任何WebKit识别的图片格式，包括BMP，GIF，ICO，JPEG和PNG。
[quote="原文"]Static images can be in any format WebKit can display, including BMP, GIF, ICO, JPEG, or PNG.[/quote]
通过manifest文件中的[b]browser_action[/b]下的[b]default_icon[/b]字段，或者调用setIcon()方法来设置图标。
[quote="原文"]To set the icon, use the default_icon field of browser_action in the manifest, or call the setIcon() method.[/quote]
[b][size=medium] 提示(Tooltip)[/size][/b]
通过manifest文件中的[b]browser_action[/b]下的[b]default_title[/b]字段，或者调用setTitle()方法来设置提示。你可以设置[b]default_title[/b]字段的地区设定特性(locale-specific)；详细请见[url=http://code.google.com/chrome/extensions/i18n.html]国际化[/url]
[quote="原文"]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.[/quote]
[b][size=medium] 标记(Badge)[/size][/b]
Browser Actions可以显示标记(可选的) — 在图标的上层显示一些文字。标记可以方便的显示扩展程序的状态。
[quote="原文"]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.[/quote]
由于标记的空间有限，它可以表示4个或更少的字符。
[quote="原文"]Because the badge has limited space, it should have 4 characters or less.[/quote]
设置标记的文字和颜色请分别使用setBadgeText()和setBadgeBackgroundColor()方法。
[quote="原文"]Set the text and color of the badge using setBadgeText() and setBadgeBackgroundColor(), respectively.[/quote]
[b][size=medium] 弹出窗口(Popup)[/size][/b]
在用户点击Browser Action的图标时显示一个弹出窗口。弹出窗口会自动调整大小来适应你的HTML内容。
[quote="原文"]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.[/quote]
创建一个HTML文件当做Browser Action弹出窗口的内容。通过manifest文件中的[b]browser_action[/b]下的[b]default_popup[/b]字段，或者setPopup()方法为弹出窗口指定HTML文件。
[quote="原文"]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.[/quote]
[color=green][b][size=large]提示[/size][/b][/color]
为了获得最佳的视觉效果，遵循以下原则：
[quote="原文"]For the best visual impact, follow these guidelines:[/quote]
[list]
[*]在大多数网页上使用的功能请使用Browser Actions。
[quote="原文"]Do use browser actions for features that make sense on most pages.[/quote]
[*]只在少数网页上使用的功能请不要使用Browser Actions。使用Page Actions代替。
[quote="原文"]Don't use browser actions for features that make sense for only a few pages. Use page actions instead.[/quote]
[*]请使用19x19像素的彩色大图标。Browser Action图标似乎应该比Page Action图标大。
[quote="原文"]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.[/quote]
[*]请不要尝试模仿Google Chrome's的单色的“扳手”和“页面”图标。那并不能在主题之中很好的表示，反正，扩展程序应该突出的一点。
[quote="原文"]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.[/quote]
[*]请使用Alpha透明来柔边填充你的图标。因为很多人使用主题，你的图标应该可以很好的显示在有多种颜色的背景上。
[quote="原文"]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.[/quote]
[*]请不要经常的使用动态图标。那样会很烦人。
[quote="原文"]Don't constantly animate your icon. That's just annoying.[/quote]
[/list]
[color=green][b][size=large]范例[/size][/b][/color]
你在可以在[url=http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/api/browserAction/]examples/api/browserAction[/url]目录中找到使用Browser Actions的范例。至于在查看源代码时的其他范例与帮助，请参照[url=http://code.google.com/chrome/extensions/samples.html]Samples[/url]
[quote="原文"]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.[/quote]
[color=green][b][size=large]API参考: chrome.browserAction[/size][/b][/color]
[b][size=medium]方法[/b][/size]
[b]setBadgeBackgroundColor[/b]

chrome.browserAction.setBadgeBackgroundColor(object details)

设置标记的背景颜色。
[quote="原文"]Sets the background color for the badge.[/quote]
[color=darkred]参数[/color]
[i]details ( object )[/i]
[i]color ( array of integer )[/i]
RGBA颜色模式（取值范围为[0,255]的4个整型元素）的数组。例如：不透明的红色为[color=green][255, 0, 0, 255][/color]。
[quote="原文"]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].[/quote]
[i]tabId ( optional integer )[/i]
在指定的页面标签上设置为已选择。当页面标签被关闭后自动复位。
[quote="原文"]Limits the change to when a particular tab is selected. Automatically resets when the tab is closed.[/quote]
[b]setBadgeText[/b]

chrome.browserAction.setBadgeText(object details)

为Browser Action设置标记文字。标记文件显示在图标的上面。
[quote="原文"]Sets the badge text for the browser action. The badge is displayed on top of the icon.[/quote]
[color=darkred]参数[/color]
[i]details ( object )[/i]
[i]text ( string )[/i]
可以设置不超过4位的任意数字。
[quote="原文"]Any number of characters can be passed, but only about four can fit in the space.[/quote]
[i]tabId ( optional integer )[/i]
在指定的页面标签上设置为已选择。当页面标签被关闭后自动复位。
[quote="原文"]Limits the change to when a particular tab is selected. Automatically resets when the tab is closed.[/quote]
[b]setIcon[/b]

chrome.browserAction.setIcon(object details)

为Browser Action设置图标。该图标可以指定为一个图像文件的路径或者是一个canvas元素生成的像素数据。无论是路径或是[b]imageData[/b]属性都必须被指定。
[quote="原文"]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.[/quote]
[color=darkred]参数[/color]
[i]details ( object )[/i]
[i]imageData ( optional ImageData )[/i]
像素数据的图像。必需为[b]ImageData[/b]对象（例如：从canvas元素生成的对象）。
[quote="原文"]Pixel data for an image. Must be an ImageData object (for example, from a canvas element).[/quote]
[i]path ( optional string )[/i]
相对于扩展程序目录中的路径。
[quote="原文"]Relative path to an image in the extension to show in the browser action.[/quote]
[i]tabId ( optional integer )[/i]
在指定的页面标签上设置为已选择。当页面标签被关闭后自动复位。
[quote="原文"]Limits the change to when a particular tab is selected. Automatically resets when the tab is closed.[/quote]
[b]setPopup[/b]

chrome.browserAction.setPopup(object details)

为Browser Action设置一个HTML文件。作为用户点击Browser Action图标后弹出窗口的内容。
[quote="原文"]Sets the html document to be opened as a popup when the user clicks on the browser action's icon.[/quote]
[color=darkred]参数[/color]
[i]details ( object )[/i]
[i]tabId ( optional integer )[/i]
在指定的页面标签上设置为已选择。当页面标签被关闭后自动复位。
[quote="原文"]Limits the change to when a particular tab is selected. Automatically resets when the tab is closed.[/quote]
[i]popup ( string )[/i]
在弹出窗口中显示的HTML文件。如果设置为空字符串（''）,为不显示弹出窗口。
[quote="原文"]The html file to show in a popup. If set to the empty string (''), no popup is shown.[/quote]
[b]setTitle[/b]

chrome.browserAction.setTitle(object details)

为Browser Action设置提示。显示在提示栏中。
[quote="原文"]Sets the title of the browser action. This shows up in the tooltip.[/quote]
[color=darkred]参数[/color]
[i]details ( object )[/i]
[i]title ( string )[/i]
当鼠标移动到Browser Action上时显示的文字。
[quote="原文"]The string the browser action should display when moused over.[/quote]
[i]tabId ( optional integer )[/i]
在指定的页面标签上设置为已选择。当页面标签被关闭后自动复位。
[quote="原文"]Limits the change to when a particular tab is selected. Automatically resets when the tab is closed.[/quote]
[b][size=medium]事件[/b][/size]
[b]onClicked[/b]

chrome.browserAction.onClicked.addListener(function(Tab tab) {...});

当Browser Action被点击时触发。当Browser Action含有弹出窗口时不被触发。
[quote="原文"]Fired when a browser action icon is clicked. This event will not fire if the browser action has a popup.[/quote]
[color=darkred]参数[/color]
[i]tab ( [url=http://code.google.com/chrome/extensions/tabs.html#type-Tab]Tab [/url])[/i]