chrome扩展开发之Browser Actions

使用Browser Actions可以将一些自定义图标放置到chrome浏览器的地址栏右边,同时一个Browser Actions还可以使用 一个tooltip(工具提示), 一个 badge(标志), 和一个 popup(弹出页)。

下图中,地址栏右侧是一个browser Actions的彩色图标,在图标下面是他的弹出界面。

如果你想创建一个图标,但并不总是可见,哪么使用 page action来代替Browser Action。

Manifest

  1. "browser_action": {  
  2.   "default_icon""images/icon19.png"// 必须的  
  3.   "default_title""Google Mail",      // 可选,工具提示总显示  
  4.   "popup""popup.html"                // 可选  
  5. }  

界面部分

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的图标大。

不要试图模仿谷歌浏览器的单色“扳手”和“页面”图标。在大多数主题中它并不会表现的更好,不管怎样,扩展的图标应该突出一点。

可以在图表中使用透明背景,因为很多用户会使用浏览器主题,你的图标看上去会表现的更好。

API参考:chrome.browserAction

你可能感兴趣的:(浏览器,html5,chrome,Google,webkit)