Chrome扩展是什么
Chrome extension看着像一个app,我们经常会误认为它是一个exe或者是一个app。但是就本质而言,Chrome extension是一个网页。它由manifest.json配置文件以及一系列的html、css、js、图片等组成。所以对于一个前端开发而言,写一个Chrome扩展是一个不算太难的事情。
一个扩展的基础组成
Chrome扩展都包含一个Manifest文件——manifest.json,这个文件可以告诉Chrome关于这个扩展的相关信息,它是整个扩展的入口,也是Chrome扩展必不可少的部分。
Chrome扩展的Manifest必须包含name
(名称)、version
(版本)和manifest_version
属性,目前来说manifest_version
属性值只能为数字2。
其他常用的可选属性还有browser_action
、page_action
、background
、permissions
、options_page
、content_scripts
。
官方有给出一份完整的Manifest.json的属性列表。
以下是一份从官方复制过来的manifest.json文件,我对它进行了一下简略处理,可以先感受一下,从这里可以大致的看到一个扩展书写的规则。
{
// Required
"manifest_version": 2,
"name": "My Extension",
"version": "versionString",
// Recommended
"default_locale": "en",
"description": "A plain text description",
"icons": {...},
// Pick one (or none)
"browser_action": {...},
"page_action": {...},
// Optional
"action": ...,
"author": ...,
"automation": ...,
"background": {
// Recommended
"persistent": false,
// Optional
"service_worker":
},
"homepage_url": "http://path/to/homepage",
"permissions": ["tabs"]
}
我们来看一下其中一些配置项的意义。
首先是必填的几个属性
name
:名称version
:版本manifest_version
:只能为2
其次是几个我认为有必要说明一下的:
icon
:扩展程序的图标,可以有一个或多个。使用的地方有很多,比如用在extensions的管理界面,安装extension程序的时候等等。browser_action
与page_action
"browser_action": {
"default_icon": {
"19": "images/icon19.png",
"38": "images/icon38.png"
},
"default_title": "我的时钟",
"default_popup": "popup.html"
}
brower_action
与page_action
的功能类似,都是用来处理扩展在浏览器工具栏上的表现行为。 brower_action扩展可以适用于任何页面。page_action扩展只能作用于某一页面,当打开该页面时触发该Google Chrome扩展,关闭页面则Google Chrome扩展也随之消失。
browser_action
指定扩展的图标放在Chrome的工具栏中,browser_action
中的default_icon
属性定义了相应图标文件的位置,default_title
定义了当用户鼠标悬停于扩展图标上所显示的文字,default_popup
则定义了当用户单击扩展图标时所显示页面的文件位置。
- content_scripts
"content_scripts": [
{
"matches": ["*://www.google.com/"],
"js": ["js/...js"]
}
]
如果你想要你的扩展可以操作用户页面,就需要用到这个属性。这个属性可以指定将哪些脚本何时注入到哪些页面中,当用户访问这些页面后,相应脚本即可自动运行,从而对页面DOM进行操作。切这个属性只与页面共享DOM,而不与页面中的js共享命名空间。
content_scripts属性值为数组类型,数组的每个元素可以包含matches
、exclude_matches
、css
、js
、run_at
、all_frames
、include_globs
和exclude_globs
等属性
-- matches定义了哪些页面会被注入脚本
-- exclude_matches定义了哪些页面不会被注入脚本
-- css和js定义了需要被注入页面的js和css
-- run_at定义了何时被注入
- permissions
由于浏览器受限于同源策略,但是如果extension也需要受限的话,功能实现会大打折扣,所以chrome是允许extensions不受同源策略影响的,只不过需要进行一些额外的操作。
{
...
"permissions": [
"third party url"
]
}
比如说,你需要获取到一个第三方页面的数据,就需要在permissions中进行声明。再比如说,在background里使用一些高级的chrome api(downloads,webRequest,proxy,system等),这些api也是需要授权才能使用的。如果对高级api用法感兴趣可以在官方文档中查询。
- background
如果你的扩展需要常驻后台,比如实现一些实时推送的功能。那就需要用到这个属性。background
可以包含三种属性,分别是scripts
、page
和persistent
。通常来说,我们只需要使用到scripts。如果指定了
scripts`属性,则Chrome会在扩展启动时自动创建一个包含所有指定脚本的页面。persistent属性描述了常驻后台的方式,可选值为true和false。
更多属性大家可以参照上方链接中给出的官方文档说明,发掘一下还是可以创造出很多有意思的功能的。
数据存储
我们写一个程序不可避免都是需要用到数据存储的,对于Chrome扩展也是这样。
通常来说,Chrome扩展用到的存储方式有三种,localStorage,Chrome提供的存储API,web SQL Database。
localStorage的使用众所周知,这边就不赘述。
Chrome提供的存储API是对localStorage
的改进,它与localStorage
相比有以下区别:
如果储存区域指定为
sync
,数据可以自动同步到用户当前在Chrome上登陆的Google账户,如果没有网络连接的话,sync储存的数据的读写与local一致;content_scripts
可以直接读取数据,而不必通过background页面,区别于localStorage需要受限于域名;在隐身模式下仍然可以读出之前存储的数据;
读写速度更快;
用户数据可以以对象的类型保存。
值得注意的是,使用Chrome存储API必须要在Manifest的permissions
中声明,之后才有权限调用。
chrome.storage.StorageArea提供了5个方法,分别是get
、getBytesInUse
、set
、remove
和clear
。
get用于读取数据,set用于写入数据,remove用于删除数据,clear用于清空数据,getBytesInUse
方法为获取一个数据或多个数据所占用的总空间,返回结果的单位是字节。
扩展页面间通信
对于页面间的通信,chrome提供了4个页面之间通信的接口。
runtime.sendMessage
runtime.onMessage
runime.connect,更高级用法,参考官方文档
runtime.onConnect,更高级用法,参考官方文档
这一节主要说一下sengMessage和onMessage。
一般而言,chrome提供的API是不允许在content_scripts
中运行的,但是runtime.sendMessage
和runtime.onMessage
可以。所以扩展的其他页面也可以同content_scripts
相互通信。
用法如下:
chrome.runtime.sendMessage(extensionId, message, options, callback)
extensionId
为所发送消息的目标扩展,如果不指定这个值,则默认为发起此消息的扩展本身;message
为要发送的内容,类型随意,内容随意;options
是一个可选参数,属性的值决定扩展发起此消息时是否要将TLS通道ID发送给监听此消息的外部扩展。tls参考文档callback
回调函数,用于接收返回结果;
chrome.runtime.onMessage.addListener(callback)
此处的callback
为必选参数,为回调函数。callback
接收到的参数有三个,分别是message
、sender
和sendResponse
,即消息内容、消息发送者相关信息和相应函数。
chrome扩展推荐
最后推荐几个我自己常用的扩展。
- 草料二维码,非常方便将url转化成二维码
- 1px,用于和前端页面和设计稿进行还原度对比
- charset,方便修改当前页面的charset
- Momentum,chrome新开页自定义dashboard
参考资料
chrome extension官方文档
chrome扩展及应用开发