博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Chrome浏览器扩展开发系列之四:Browser Action类型的Chrome浏览器扩展
阅读量:4317 次
发布时间:2019-06-06

本文共 1753 字,大约阅读时间需要 5 分钟。

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页面。

转载于:https://www.cnblogs.com/champagne/p/4807632.html

你可能感兴趣的文章
CentOS7 重置root密码
查看>>
Centos安装Python3
查看>>
PHP批量插入
查看>>
laravel连接sql server 2008
查看>>
Laravel框架学习笔记之任务调度(定时任务)
查看>>
Swagger在Laravel项目中的使用
查看>>
Laravel 的生命周期
查看>>
Nginx
查看>>
Navicat远程连接云主机数据库
查看>>
Nginx配置文件nginx.conf中文详解(总结)
查看>>
【2020-3-21】Mac安装Homebrew慢,解决办法
查看>>
influxdb 命令行输出时间为 yyyy-MM-dd HH:mm:ss(年月日时分秒)的方法
查看>>
jxl写入excel实现数据导出功能
查看>>
linux文件目录类命令|--cp指令
查看>>
.net MVC 404错误解决方法
查看>>
linux系统目录结构
查看>>
git
查看>>
btn按钮之间事件相互调用
查看>>
Entity Framework 4.3.1 级联删除
查看>>
codevs 1163:访问艺术馆
查看>>