[chrome扩展开发] browser_action 浏览器右上角图标

浏览器右上角图标，是扩展与用户最直接交互的方式

1. 鼠标放在图片上，将会弹出default_title
2. 单击图标，将会弹出设置的default_popup
3. 后台可以设置badge,可以用于通知用户

基础配置如下：

{
  "name": "My extension",
  ...
  "browser_action": {
    "default_icon": "images/icon19.png", // optional 
    "default_title": "Google Mail",      // optional; shown in tooltip 
    "default_popup": "popup.html"        // optional 
  },
  ...
}

UI的组成部分

一个 browser action 可以拥有一个图标，一个tooltip，一个badge和一个popup。

图标

Browser action 图标推荐使用宽高都为19像素，更大的图标会被缩小。

你可以用两种方式来设置图标: 使用一个静态图片或者使用HTML5canvas element。 使用静态图片适用于简单的应用程序，你也可以创建诸如平滑的动画之类更丰富的动态UI(如canvas element)。

静态图片可以是任意WebKit支持的格式，包括 BMP，GIF，ICO，JPEG或 PNG。

修改browser_action的manifest中** default_icon**字段，或者调用setIcon()方法。

使用canvas作为扩展图标

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
// ...draw to the canvas...
var imageData = context.getImageData(0, 0, 19, 19);
chrome.browserAction.setIcon({
  imageData: imageData
});

ToolTip

修改browser_action的manifest中default_title字段，或者调用setTitle()方法。你可以为default_title字段指定本地化的字符串；点击Internationalization查看详情。

除了显示扩展名字， 显示一些信息也是一个不错的选择。

Badge

Browser actions可以选择性的显示一个badge— 在图标上显示一些文本。Badges 可以很简单的为browser action更新一些小的扩展状态提示信息。

因为badge空间有限，所以只支持4个以下的字符。

设置badge文字和颜色可以分别使用setBadgeText()andsetBadgeBackgroundColor()。

Popup

如果browser action拥有一个popup，popup 会在用户点击图标后出现。popup 可以包含任意你想要的HTML内容，并且会自适应大小。

在你的browser action中添加一个popup，创建弹出的内容的HTML文件。 修改browser_action的manifest中default_popup字段来指定HTML文件， 或者调用setPopup()方法。