Browser Actions
用 browser actions 可以在chrome主工具条的地址栏右侧增加一个图标。作为这个图标的延展,一个browser action图标还可以有tooltip、badge和popup。
如下图, 地址栏右侧的彩色正方形是一个browser action的图标, 图标下面的是popup。
如果你想创建一个不总是可见的图标, 可以使用page action来代替browser action.
注意: Packaged apps 不能使用browser actions.
Manifest
在extension manifest 中用下面的方式注册你的browser action:
{ "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像素,更大的图标会被缩小。
你可以用两种方式来设置图标: 使用一个静态图片或者使用HTML5 canvas element。 使用静态图片适用于简单的应用程序,你也可以创建诸如平滑的动画之类更丰富的动态UI(如canvas element)。
静态图片可以是任意WebKit支持的格式,包括 BMP,GIF,ICO,JPEG或 PNG。
修改browser_action 的manifest中 default_icon字段,或者调用setIcon()方法。
ToolTip
修改browser_action 的manifest中default_title 字段,或者调用setTitle()方法。你可以为default_title 字段指定本地化的字符串;点击 Internationalization 查看详情。
Badge
Browser actions可以选择性的显示一个 badge — 在图标上显示一些文本。Badges 可以很简单的为browser action更新一些小的扩展状态提示信息。
因为badge空间有限,所以只支持4个以下的字符。
设置badge文字和颜色可以分别setBadgeText() and setBadgeBackgroundColor()。
Popup
如果browser action拥有一个popup,popup 会在用户点击图标后出现。popup 可以包含任意你想要的HTML内容,并且会自适应大小。
在你的browser action中添加一个popup,创建弹出的内容的HTML文件。 修改browser_action的manifest中default_popup 字段来指定HTML文件, 或者调用setPopup() 方法。
Tips
为了获得最佳的显示效果, 请遵循以下原则:
- 确认 Browser actions 只使用在大多数网站都有功能需求的场景下。
- 确认 Browser actions 没有使用在少数网页才有功能的场景, 此场景请使用page actions。
- 确认你的图标尺寸尽量占满19x19的像素空间。 Browser action 的图标应该看起来比page action的图标更大更重。
- 不要尝试模仿Google Chrome的扳手图标,在不同的themes下它们的表现可能出现问题,,并且扩展应该醒目些。
- 尽量使用alpha通道并且柔滑你的图标边缘,因为很多用户使用themes,你的图标应该在在各种背景下都表现不错。
- 不要不停的闪动你的图标,这很惹人反感。
范例
你可以在 examples/api/browserAction 目录找到简单的browser actions范例,更多的范例和帮助文档可以参考Samples。
Copyright © 2005-2011 360.CN All Rights Reserved.
360安全中心 版权所有