使用Browser Actions可以将一些自定义图标放置到chrome浏览器的地址栏右边,同时一个Browser Actions还可以使用 一个tooltip(工具提示), 一个 badge(标志), 和一个 popup(弹出页)。
下图中,地址栏右侧是一个browser Actions的彩色图标,在图标下面是他的弹出界面。
如果你想创建一个图标,但并不总是可见,哪么使用 page action来代替Browser Action。
Manifest
界面部分
1,icon 图标
图标大小为19像素的宽高,如果大于这个尺寸会被缩放,为了最好的显示效果,最好用19像素宽高的图标。
你可以通过两种方式来设置图标:静态图片引用或者HTML5 canvas elemen,对于简单应用来说使用静态图片引用比较方便。如果要创建动态的用户界面,比如流畅的动画,哪么使用canvas elemen。
图片格式可以使WebKit 支持的任意格式, 包括BMP, GIF, ICO, JPEG, 或 PNG.
要设置图标,需要在Manifest中使用default_icon 字段,或调用setIcon()方法。
2,Tooltip 工具提示
要设置工具提示,需要在Manifest中使用default_title 字段,或调用setTitle()方法。
3,Badge 标志
Browser actions可以选择显示一个标志(图标上的一些文字),标志可以很容易的更新Browser action,以显示一些扩展的相关状态信息。
由于显示标志的空间有限,最好使用4个字符或者更少
设置文字和标志的颜色分别使用setBadgeText()和setBadgeBackgroundColor()
4 Popup 弹出界面
如果Browser action有一个弹出界面,当用户点击图标就会弹出界面,这个界面可以包含任何html内容,并且会自动调整大小。
要添加弹出界面,需要创建相关html文件,在manifest中使用popup 字段指定。
提示
在大多数页面上使用 browser actions的功能
对于仅仅几个页面不要使用 browser actions的功能,应该使用 page actions功能
使用大的,颜色多样的图标填充大部分19X19像素的空间, browser actions的图标看起来应该比page action的图标大。
不要试图模仿谷歌浏览器的单色“扳手”和“页面”图标。在大多数主题中它并不会表现的更好,不管怎样,扩展的图标应该突出一点。
可以在图表中使用透明背景,因为很多用户会使用浏览器主题,你的图标看上去会表现的更好。