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 中的内存泄露模式
Aug 13 Javascript
javascript 匿名函数的理解(透彻版)
Jan 28 Javascript
jquery 简单的进度条实现代码
Mar 11 Javascript
jquery 可拖拽的窗体控件实现代码
Mar 21 Javascript
input 和 textarea 输入框最大文字限制的jquery插件
Oct 27 Javascript
使用非html5实现js板连连看游戏示例代码
Sep 22 Javascript
javascript实现倒计时跳转页面
Jan 17 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
Jun 02 Javascript
js实现将json数组显示前台table中
Jan 10 Javascript
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
May 10 Javascript
vue实现滚动鼠标滚轮切换页面
Dec 13 Vue.js
基于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 CURL用法的深入分析
2013/06/09 PHP
php通过rmdir删除目录的简单用法
2015/03/18 PHP
tp5修改(实现即点即改)
2019/10/18 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
JavaScript之appendChild、insertBefore和insertAfter使用说明
2010/12/30 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
2014/06/13 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
2015/03/26 Javascript
js实现匹配时换色的输入提示特效代码
2015/08/17 Javascript
深入剖析JavaScript中的函数currying柯里化
2016/04/29 Javascript
JavaScript 身份证号有效验证详解及实例代码
2016/10/20 Javascript
BootStrap网页中代码显示用法详解
2016/10/21 Javascript
jQuery遮罩层实例讲解
2017/05/11 jQuery
解决vue router使用 history 模式刷新后404问题
2017/07/19 Javascript
Vue动态组件实例解析
2017/08/20 Javascript
iview给radio按钮组件加点击事件的实例
2017/09/30 Javascript
EasyUI实现下拉框多选功能
2017/11/07 Javascript
Vue中的异步组件函数实现代码
2018/07/20 Javascript
vue中的自定义分页插件组件的示例
2018/08/18 Javascript
基于element-ui的rules中正则表达式
2018/09/04 Javascript
微信小程序实现发微博功能的示例代码
2020/06/24 Javascript
[50:01]Ti4 冒泡赛第二天 NEWBEE vs Titan
2014/07/15 DOTA
[01:02:06]LGD vs Mineski Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
用ReactJS和Python的Flask框架编写留言板的代码示例
2015/12/19 Python
Python实现矩阵加法和乘法的方法分析
2017/12/19 Python
Python 3.7新功能之dataclass装饰器详解
2018/04/21 Python
自定义django admin model表单提交的例子
2019/08/23 Python
win10从零安装配置pytorch全过程图文详解
2020/05/08 Python
详解CSS3 Media Queries中媒体属性的使用
2016/02/29 HTML / CSS
东芝官网商城:还原日式美学,打造美好生活
2018/12/27 全球购物
以下的初始化有什么区别
2013/12/16 面试题
总裁岗位职责
2013/12/04 职场文书
学生个人自我鉴定范文
2014/03/28 职场文书
2014迎国庆演讲稿
2014/09/19 职场文书
先进事迹材料怎么写
2014/12/30 职场文书
志愿者服务宣传标语口号
2015/12/26 职场文书
CSS完成视差滚动效果
2021/04/27 HTML / CSS