JavaScript开发Chrome浏览器扩展程序UI的教程


Posted in Javascript onMay 16, 2016

基本知识
1、插件文件结构
1.1、manifest.json
每一个扩展、可安装的WebApp、皮肤,都有一个JSON格式的manifest文件,里面存放重要的插件相关信息。

一个最基本的配置例子:

{
  "name": "browser action demo",
  "version": "1.0",
  "permissions": [
    "tabs", "http://*/*", "https://*/*"
  ],
  "browser_action": {
    "default_title": "开关灯",
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "background": {
    "page": "background.html"
   },
  "manifest_version": 2
}

1.2、popup
插件的弹窗,上面配置中的browser_action中default_popup就是这个页面。

1.3、background page
绝大多数应用都包含一个背景页面(background page),用来执行应用的主要功能。

1.4、Content scripts
通过content script可以使应用和web页面交互,content script是指能够在浏览器已经加载的页面内部运行的Javascript脚本。可以将content script看做是网页的一部分,而不是它所在的应用的一部分。

2、文件之间的交互
popup弹窗中可以直接调用背景页面中的函数。

Content script可以读取并修改当前web页面的dom树,但是它并不能修改它所在应用的背景页面(background)的dom树。

Content script与应用之间的交互:可以互相发送消息

3、为web页面注入JS(Content scripts)文件:
方法一,在manifest.json文件中配置:

"content_scripts": [
  {
   "matches": ["http://www.google.com/*"],
   "css": ["mystyles.css"],
   "js": ["jquery.js", "myscript.js"]
  }
 ],

方法二,通过executeScript():

向页面注入JavaScript 脚本执行。

chrome.tabs.executeScript(integer tabId, object details, function callback)
chrome.tabs.executeScript(tabId, {file: "func.js", allFrames: true});

UI外观
1、browser action:
在chrome主工具条的地址栏右侧增加一个图标。

注意:Packaged apps不能使用browser actions

1.1、manifest.json 中配置
注册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 
 },
 ...
}

1.2、配置项说明
(1)default_icon
图标 19 *19px

修改browser_action的manifest中 default_icon字段,或者调用setIcon()方法。

chrome.browserAction.setIcon(object details)

设置browser action的图标。图标可以是一个图片的路径或者是从一个canvas元素提取的像素信息.。无论是图标路径还是canvas的imageData,这个属性必须被指定。

(2)default_title
修改browser_action的manifest中default_title字段,或者调用setTitle()方法。你可以为default_title字段指定本地化的字符串;点击Internationalization查看详情。

chrome.browserAction.setTitle(object details)

设置browser action的标题,这个将显示在tooltip中。

(3)Badge
Browser actions可以选择性的显示一个badge— 在图标上显示一些文本。Badges 可以很简单的为browser action更新一些小的扩展状态提示信息。

因为badge空间有限,所以只支持4个以下的字符。

设置badge文字和颜色可以分别使用setBadgeText()andsetBadgeBackgroundColor()。

chrome.browserAction.setBadgeText(object details)

设置browser action的badge文字,badge 显示在图标上面。

setBadgeBackgroundColor

chrome.browserAction.setBadgeBackgroundColor(object details)

设置badge的背景颜色。

(4)default_popup
Popup 气泡提示

修改browser_action的manifest中default_popup字段来指定HTML文件, 或者调用setPopup()方法。

chrome.browserAction.setPopup(object details)

设置一个点击browser actions时显示在popup中的HTML。

1.3、提示
为了获得最佳的显示效果, 请遵循以下原则:

确认 Browser actions 只使用在大多数网站都有功能需求的场景下。
确认 Browser actions 没有使用在少数网页才有功能的场景, 此场景请使用page actions。
确认你的图标尺寸尽量占满19x19的像素空间。 Browser action 的图标应该看起来比page action的图标更大更重。
不要尝试模仿Google Chrome的扳手图标,在不同的themes下它们的表现可能出现问题,,并且扩展应该醒目些。
尽量使用alpha通道并且柔滑你的图标边缘,因为很多用户使用themes,你的图标应该在在各种背景下都表现不错。
不要不停的闪动你的图标,这很惹人反感。

2、右键菜单
您可以选择针对不同类型的对象(如图片,链接,页面)增加右键菜单项。

您可以根据需要添加多个右键菜单项。一个扩展里添加的多个右键菜单项会被Chrome自动组合放到对应扩展名称的二级菜单里。

右键菜单可以出现在任意文档(或文档中的框架)中,甚至是本地文件(如file://或者Chrome://)中。若想控制右键菜单在不同文档中的显示,可以在调用create()和update()时指定documentUrlPatterns。

2.1、manifest.json 中配置
在清单中声明“contentMenus”权限。同时,您应该指定一个16x16的图标用作右键菜单的标识。例如:

{
    "name": "My extension",
    ...
    "permissions": [
     "contextMenus"
    ],
    "icons": {
     "16": "icon-bitty.png",
     "48": "icon-small.png",
     "128": "icon-large.png"
    },
    ...
}

3、桌面通知
通知用户发生了一些重要的事情。桌面通知会显示在浏览器窗口之外。 下面的图片是通知显示时的效果,在不同的平台下,通知的显示效果会有些细微区别。

直-接使用一小段 JavaScript 代码创建通知,当然也可以通过扩展包内的一个单独HTML页面。

3.1、manifest.json 中配置

{
 "name": "My extension",
 ...
 "permissions": [
  "notifications"
 ],
 ...
}

3.2、与扩展页交互:
使用 getBackgroundPage() 和 getViews()在通知与扩展页面中建立交互

// 在通知中调用扩展页面方法...
chrome.extension.getBackgroundPage().doThing();

// 从扩展页面调用通知的方法...
chrome.extension.getViews({type:"notification"}).forEach(function(win) {
 win.doOtherThing();
});

4、Omnibox
omnibox 应用程序界面允许向Google Chrome的地址栏注册一个关键字,地址栏也叫omnibox

必须在 manifest 中包含omnibox 关键字段。需要指定像素为16x16的图标,以便当用户输入关键字时,在地址栏中显示。

4.1、manifest.json 中配置

{
 "name": "Aaron's omnibox extension",
 "version": "1.0",
 "omnibox": { "keyword" : "aaron" }, 
 "icons": { 
  "16": "16-full-color.png" 
 }, 
 "background_page": "background.html"
}

Chrome 自动创建灰度模式16x16像素的图标。你应该提供全色版本图标以便可以在其他场景下使用。

5、选项页
为了让用户设定你的扩展功能,你可能需要提供一个选项页。如果你提供了选项页,在扩展管理页面 chrome://extensions上会提供一个链接。点击选项链接就可以打开你的选项页。

5.1、manifest.json 中配置

{
 "name": "My extension",
 ...
 "options_page": "options.html",
 ...
}

6、覆写特定页
使用替代页,可以将Chrome默认的一些特定页面替换掉,改为使用扩展提供的页面。

6.1、manifest.json 中配置

{
 "name": "My extension",
 ...

 "chrome_url_overrides" : {
  "pageToOverride": "myPage.html"
 },
 ...
}

7、Page Actions
使用page actions把图标放置到地址栏里。

想让扩展图标总是可见,则使用browser action。

打包的应用程序不能使用page actions。

7.1、manifest.json 中配置

{
 "name": "My extension",
 ...
 "page_action": {
  "default_icon": "icons/foo.png", // optional 
  "default_title": "Do action",  // optional; shown in tooltip 
  "default_popup": "popup.html"  // optional 
 },
 ...
}

7.2、配置项说明
同browser actions一样,page actions 可以有图标、提示信息、 弹出窗口。但没有badge

使用方法 show() 和 hide() 可以显示和隐藏page action。缺省情况下page action是隐藏的。当要显示时,需要指定图标所在的标签页,图标显示后会一直可见,直到该标签页关闭或开始显示不同的URL (如:用户点击了一个连接)

7.3、提示
要只对少数页面使用page action;
不要对大多数页面使用它,如果功能需要,使用 browser actions代替。
没事别总让图标出现动画,那会让人很烦。
8、主题
主题是一种特殊的扩展,可以用来改变整个浏览器的外观。主题和标准扩展的打包方式类似,但是主题中不能包含JavaScript或者HTML代码。

8.1、manifest.json 中配置

{
 "version": "2.6",
 "name": "camo theme",
 "theme": {
  "images" : {
   "theme_frame" : "images/theme_frame_camo.png",
   "theme_frame_overlay" : "images/theme_frame_stripe.png",
   "theme_toolbar" : "images/theme_toolbar_camo.png",
   "theme_ntp_background" : "images/theme_ntp_background_norepeat.png",
   "theme_ntp_attribution" : "images/attribution.png"
  },
  "colors" : {
   "frame" : [71, 105, 91],
   "toolbar" : [207, 221, 192],
   "ntp_text" : [20, 40, 0],
   "ntp_link" : [36, 70, 0],
   "ntp_section" : [207, 221, 192],
   "button_background" : [255, 255, 255]
  },
  "tints" : {
   "buttons" : [0.33, 0.5, 0.47]
  },
  "properties" : {
   "ntp_background_alignment" : "bottom"
  }
 }
}
Javascript 相关文章推荐
javascript判断单选框或复选框是否选中方法集锦
Apr 04 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
Jun 24 Javascript
深入分析Cookie的安全性问题
Mar 01 Javascript
使用jquery插件qrcode生成二维码
Oct 22 Javascript
基于jquery实现图片放大功能
May 07 Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
May 16 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
Mar 21 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
Feb 06 Javascript
原生JS实现的简单轮播图功能【适合新手】
Aug 17 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
Aug 31 Javascript
详解Vue路由自动注入实践
Apr 17 Javascript
关于element的表单组件整理笔记
Feb 05 Javascript
基于javascript实现最简单的选项卡切换效果
May 16 #Javascript
JavaScript实现页面跳转的方式汇总
May 16 #Javascript
js实现页面跳转的几种方法小结
May 16 #Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
May 16 #Javascript
KnockoutJs快速入门教程
May 16 #Javascript
JS学习之表格的排序简单实例
May 16 #Javascript
JavaScript操作选择对象的简单实例
May 16 #Javascript
You might like
PHP获取文件扩展名的4种方法
2015/11/24 PHP
php中类和对象:静态属性、静态方法
2017/04/09 PHP
PHP+Apache环境中如何隐藏Apache版本
2017/11/24 PHP
防止浏览器记住用户名及密码的简单实用方法
2013/04/22 Javascript
javascript中直接写php代码的方法
2013/07/31 Javascript
Javascript的&&和||的另类用法
2014/07/23 Javascript
JavaScript中神奇的call()方法
2015/03/12 Javascript
jquery实现模拟百分比进度条渐变效果代码
2015/10/29 Javascript
jQuery遍历DOM节点操作之filter()方法详解
2016/04/14 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
2016/12/20 Javascript
详解Vue爬坑之vuex初识
2017/06/14 Javascript
浅谈Angular路由复用策略
2017/10/04 Javascript
jQuery实现的简单无刷新评论功能示例
2017/11/08 jQuery
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
2018/07/27 Javascript
JavaScript显式数据类型转换详解
2019/03/18 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
2019/04/17 Javascript
[05:36]DOTA2 2015国际邀请赛中国区预选赛第四日TOP10
2015/05/29 DOTA
python比较两个列表大小的方法
2015/07/11 Python
python3读取MySQL-Front的MYSQL密码
2017/05/03 Python
使用python实现http及ftp服务进行数据传输的方法
2018/10/26 Python
用Python解决x的n次方问题
2019/02/08 Python
python获取引用对象的个数方式
2019/12/20 Python
python正则表达式匹配IP代码实例
2019/12/28 Python
Python中if有多个条件处理方法
2020/02/26 Python
Python实现JS解密并爬取某音漫客网站
2020/10/23 Python
Python3.9.0 a1安装pygame出错解决全过程(小结)
2021/02/02 Python
HTML5本地存储之Web Storage详解
2016/07/04 HTML / CSS
努比亚手机官网:nubia
2016/10/06 全球购物
印度最好的在线药品订购网站:PharmEasy
2018/11/30 全球购物
应届毕业生就业自荐信
2013/10/26 职场文书
办公室内勤工作职责
2013/12/11 职场文书
高职教师先进事迹材料
2014/08/24 职场文书
2015年仓库工作总结
2015/04/09 职场文书
2017寒假社会实践心得体会范文
2016/01/14 职场文书
《坐井观天》教学反思
2016/02/18 职场文书