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个页面之间通信的接口。
这一节主要说一下sengMessage和onMessage。
一般而言，chrome提供的API是不允许在content_scripts中运行的，但是runtime.sendMessage和runtime.onMessage可以。所以扩展的其他页面也可以同content_scripts相互通信。
用法如下：
chrome.runtime.sendMessage(extensionId, message, options, callback)</pre>
-
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
网友评论