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 相关文章推荐
jquery text(),val(),html()方法区别总结
Nov 04 Javascript
JS获取url链接字符串 location.href
Dec 23 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
May 23 Javascript
浅谈jquery中delegate()与live()
Jun 22 Javascript
基于JQuery实现图片轮播效果(焦点图)
Feb 02 Javascript
基于jquery实现多选下拉列表
Aug 02 jQuery
Vue源码解析之Template转化为AST的实现方法
Dec 14 Javascript
vue轻量级框架无法获取到vue对象解决方法
May 12 Javascript
webpack的tree shaking的实现方法
Sep 18 Javascript
JS实现吸顶特效
Jan 08 Javascript
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
TS 类型兼容教程示例详解
Sep 23 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 array_flip() 删除重复数组元素专用函数
2010/05/16 PHP
PHP中strtotime函数使用方法详解
2011/11/27 PHP
php+mysqli批量查询多张表数据的方法
2015/01/29 PHP
PHP中使用register_shutdown_function函数截获fatal error示例
2015/04/21 PHP
开启PHP Static 关键字之旅模式
2015/11/13 PHP
javascript实现动态增加删除表格行(兼容IE/FF)
2007/04/02 Javascript
js计算页面刷新的次数
2009/07/20 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
2015/03/25 Javascript
js如何准确获取当前页面url网址信息
2020/09/13 Javascript
BootStrap 智能表单实战系列(五) 表单依赖插件处理
2016/06/13 Javascript
javascript淘宝主图放大镜功能
2016/10/20 Javascript
js实现五星评价功能
2017/03/08 Javascript
深入理解Vue 组件之间传值
2018/08/16 Javascript
详解React native fetch遇到的坑
2018/08/30 Javascript
微信小程序实现简单评论功能
2018/11/28 Javascript
JS中的一些常用的函数式编程术语
2019/06/15 Javascript
jQuery事件委托代码实践详解
2019/06/21 jQuery
微信小程序实现张图片合成为一张并下载
2019/07/16 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
2019/09/25 Javascript
vue3.0 项目搭建和使用流程
2021/03/04 Vue.js
[01:06:25]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
Python 字符串中的字符倒转
2008/09/06 Python
python绘图方法实例入门
2015/05/19 Python
详解pandas库pd.read_excel操作读取excel文件参数整理与实例
2019/02/17 Python
django 数据库连接模块解析及简单长连接改造方法
2019/08/29 Python
Python参数传递机制传值和传引用原理详解
2020/05/22 Python
出纳岗位职责模板
2013/11/27 职场文书
党课学习思想汇报
2014/01/02 职场文书
爱国主义教育活动总结
2014/05/07 职场文书
学校交通安全责任书
2014/08/25 职场文书
老兵退伍标语
2014/10/07 职场文书
圣诞节开幕词
2015/01/29 职场文书
2015年员工工作总结范文
2015/04/08 职场文书
2015年出纳工作总结与计划
2015/05/18 职场文书
实体类或对象序列化时,忽略为空属性的操作
2021/06/30 Java/Android
ElementUI实现el-form表单重置功能按钮
2021/07/21 Javascript