Browser Action类型的Google Chrome扩展程序,通常在Chrome浏览器的工具栏中,地址栏的右侧,有一个始终存在的图标。也就是说,这个图标与浏览器相关,只要安装了该Chrome扩展的浏览器,就会显示该图标。

鼠标悬浮到图标上会给出提示信息,鼠标点击图标会弹出popup页面。图标还可以根据条件设置不同的徽章(Badge),提示用户不同的条件状态。

定义Browser Action类型的Google Chrome扩展程序,首先要在manifest.json文件中注册如下:

{

...

"browser_action": {

"default_icon": { // optional

"19": "images/icon19.png", // optional

"38": "images/icon38.png" // optional

},

"default_title": "Google Mail", // optional; shown in tooltip

"default_popup": "popup.html" // optional

},

...

}

图标(icon)的默认尺寸是19px*19px,可以是WebKit能够显示的任何静态图片(如BMP, GIF, ICO, JPEG, PNG等),也可以是HTML5的canvas元素。可以直接在manifest.json文件中设置图标的图片,也可以通过chrome.browserAction.setIcon(object details, function callback)方法设置图标的图片。其中的details对象有两个名为imageData和path的对象属性,二者必须设置其一,如details.imageData = icon19.png(等价于details.imageData = {'19': icon19.png})或details.path= icon19.png(等价于details.path = {'19': icon19.png})。

提示(tooltip)可选,可以直接在manifest.json文件中设置,也可以通过chrome.browserAction.setTitle(object details)方法设置。其中的details对象有一个名为title的字符串属性,示例如details.title='An extension for strocks.'。提示的字符串支持国际化。

徽章(badge)可选,是在图标之上叠加显示的文本,可以灵活地显示Browser Action的状态变化。但是由于显示空间有限,通常徽章的文本不多于4个字符。可以通过chrome.browserAction.setBadgeText(object details)方法显示徽章的文本,其中的details对象有一个名为text的字符串属性,示例如details.text='A'。可以通过chrome.browserAction.setBadgeBackgroundColor(object details)方法显示徽章的背景色,其中的details对象有一个名为color的属性。color属性可以是字符串,如details.color='#FF0000'或details.color='#F00'。color属性也可以是数组,如details.color=[255, 0, 0, 255]。

弹出框(popup)可选,点击图标时弹出框出现。弹出框是一个HTML文件,尺寸根据其内容自动设置。可以直接在manifest.json文件中设置popup页面,也可以通过chrome.browserAction.setPopup(object details)方法设置popup页面,其中的details对象有一个名为popup的字符串属性,示例如details.popup='somePath.popup.html'。如果details.popup=''则表示没有popup页面。

Chrome浏览器扩展开发系列之四:Browser Action类型的Chrome浏览器扩展的更多相关文章

  1. Chrome浏览器扩展开发系列之十九:扩展开发示例

    翻译总结了这么多的官网内容,下面以一款博主开发的“沪深股票价格变化实时追踪提醒”软件为例,介绍Chrome浏览器扩展程序的开发,开发环境为Eclipse IDE+Chrome Browser. “沪深 ...

  2. Chrome浏览器扩展开发系列之十四

    Chrome浏览器扩展开发系列之十四:本地消息机制Native messaging 时间:2015-10-08 16:17:59      阅读:1361      评论:0      收藏:0    ...

  3. Chrome浏览器扩展开发系列之十四:本地消息机制Native messagin

    Chrome浏览器扩展开发系列之十四:本地消息机制Native messaging 2016-11-24 09:36 114人阅读 评论(0) 收藏 举报  分类: PPAPI(27)  通过将浏览器 ...

  4. Chrome浏览器扩展开发系列之五:Page Action类型的Chrome浏览器扩展

    Page Action类型的Google Chrome浏览器扩展程序,通常也会有一个图标,但这个图标位于Chrome浏览器的地址栏内右端.而且这个图标并非始终出现,而是当某指定的页面打开时才会出现.也 ...

  5. Chrome浏览器扩展开发系列之十二:Content Scripts

    Content Scripts是运行在Web页面的上下文的JavaScript文件.通过标准的DOM,Content Scripts 可以操作(读取并修改)浏览器当前访问的Web页面的内容. Cont ...

  6. Chrome浏览器扩展开发系列之十六:扩展中可用的Chrome浏览器API

    除了Chrome浏览器支持的chrome.* API之外,Chrome浏览器扩展还可以使用Chrome浏览器为Web页面或Chrome app提供的APIs.对于Chrome浏览器2支持的API,还可 ...

  7. Chrome浏览器扩展开发系列之十一:NPAPI插件的使用

    在Chrome浏览器扩展中使用HTML和JavaScript非常容易,但是如何重用已有的非JavaScript遗留系统代码呢?答案是将NPAPI插件绑定到Chrome浏览器扩展,从而实现在Chrome ...

  8. Chrome浏览器扩展开发系列之十:桌面通知Notification

    Desktop Notification也称为Web Notification,是在Web页面之外,以弹出桌面对话框的形式通知用户发生了某事件.Web Notification于2015.9.10成为 ...

  9. Chrome浏览器扩展开发系列之三:Google Chrome浏览器扩展的架构

    1) 不可视的background页面 Google Chrome扩展往往包含一个不可见的background页面,Google Chrome扩展的主要业务逻辑都位于此.有两种类型的backgroun ...

随机推荐

  1. Spring与Mybatis整合

    一 概述 1.整合的目的 将Mapper映射器的创建任务交给Spring容器. 二 具体实现 1.创建sqlSessionFactory: <bean id="sqlSessionFa ...

  2. C语言数组之冒泡排序+折半查找法(二分查找)

    冒泡排序算法 将相邻的元素进行两两比较,大的向后"冒", 小的向前"赶". 口诀: N个数字来排队,两两比较小靠前 外层循环N-1(控制需要比较的轮数). 内层 ...

  3. ECS_8080端口连接拒绝问题排查

    原文链接 用户ECS网络设置 上图是用户ECS的网络示意图: ecs处于vpc网络下 ecs加入了一个安全组,该安全组出入方向均开放8080端口 ecs有两个网卡,一个私网主网卡(有虚线的网卡),一个 ...

  4. 从Thread,ThreadPool,Task, 到async await 的基本使用方法解读

    记得很久以前的一个面试场景: 面试官:说说你对JavaScript闭包的理解吧? 我:嗯,平时都是前端工程师在写JS,我们一般只管写后端代码. 面试官:你是后端程序员啊,好吧,那问问你多线程编程的问题 ...

  5. python 第五弹

    *:first-child { margin-top: 0 !important; } .markdown-body>*:last-child { margin-bottom: 0 !impor ...

  6. 小K的H5之旅-CSS基础(一)

    一.什么是CSS W3C标准中,倡导有3:其一为内容与表现分离,其二为内容与行为分离,其三为内容结构的语义化.其倡导中第一条的"表现"指的便可以说是CSS.CSS全称Cascadi ...

  7. 一天搞定CSS: 浮动(float)与inline-block的区别--11

    浮动: 使元素脱离文档流,按照指定的方向发生移动,遇到父级的边界或者相邻的浮动元素就会停下来. inline-block: inline-block是指行内块元素,它具有行内元素和块元素两者的特点,可 ...

  8. javaSE_06Java中的数组(array)-练习

    (1),数组的两种遍历方式,顺序查找,二分查找,求最大最小数,冒泡排序,选择排序. public class Test1{ public static void main(String[] args) ...

  9. C语言集成开发环境vs2017的使用技巧之修改快捷键

    首先这里是说编辑C语言内容,其次开发环境是vs2017(全称:visual studio 2017).像这个开发环境体积大,但你安装的时候不要安装到C盘,然后安装的时候选择模块,比如你不开发网站,就先 ...

  10. 动态添加Redis密码认证

    如果redis已在线上业务使用中,但没有添加密码认证,那么如何在不影响业务服务的前提下给redis添加密码认证,就是一个需要仔细考虑的问题. 本文描述一种可行的方案,适用于客户端使用了jedis连接池 ...