什么是Chrome插件
Chrome插件其实和一个普通web应用一样都是由html+css+js经过zip打包组成的，插件可以使用Chrome提供的浏览器API，增强浏扩展览器的功能。
Chrome插件通常是.crx后缀的文件，通过谷歌网上应用商店下载或者在开发者模式中可以直接拖入到浏览器进行安装。插件安装成功以后可以出现在两个位置：
- 浏览器的地址栏中
- 浏览器的工具栏中
出现的位置可以在配置文件中配置。
接下来以clearRead为例说说Chrome插件的开发打包和发布。clearRead插件是一款提取新闻页面内容提供一个干净清爽阅读界面的工具，可以在Chrome应用商店下载安装。
这里是GitHub地址github.com/mai-kuraki/…
项目结构
接下来看一下项目结构。真正打包的目录是buildSrc文件夹，由于项目使用ES6语法进行开发所以将ES6文件放到devSrc中进过编译后输出到buildSrc中。如果直接使用ES5可以省略devSrc目录直接在buildSrc中开发。
.
├── Gruntfile.js //grunt配置文件
├── LICENSE
├── README.md
├── buildSrc //最终打包成crx的目录
│ ├── icon.png
│ ├── icon_gray.png
│ ├── image
│ │ └── icon.png
│ ├── js
│ │ ├── background.js
│ │ ├── contentScript.js
│ │ └── popup.js
│ ├── key.pem
│ ├── manifest.json
│ ├── mdl
│ │ ├── material.min.css
│ │ └── material.min.js
│ ├── popup.html
│ └── style
│ ├── content.css
│ ├── content.css.map
│ ├── content.scss
│ ├── style.css
│ ├── style.css.map
│ └── style.scss
├── crx //crx文件生成的输出目录
│ ├── clearRead.crx
│ └── clearRead.zip
├── devSrc //开发文件目录
│ ├── background.js
│ ├── contentScript.js
│ ├── lib
│ │ └── Readability.js
│ └── popup.js
├── package-lock.json
└── package.json
复制代码一个插件的核心是manifest.json清单文件，提供有关扩展程序的各种信息。
{
"manifest_version": 2,
"name": "我的扩展程序",
"version": "版本字符串",
}
复制代码这是一个最简单的清单文件，注意manifest_version字段的值固定是2，清单的所有配置项可以查看文档。
项目开发
Chrome插件可以分为三部分，分别运行在不同的环境。
后台页面/事件页面(backgrund)
顾名思义，后台网页是运行在浏览器后台的，随着浏览器的启动开始运行，浏览器关闭结束运行。 事件页面则是需要调用时加载，脚本空闲时被卸载，两者都是运行在后台。
用户界面网页(popup)
点击插件出来的小弹窗，每次点击弹出开始运行，弹窗关闭后结束，可以与backgrund脚本交互。
内容脚本(content)
安装插件后每打开一个网页可以将content脚本注入到页面中，内容脚本可以读取浏览器访问的网页的细节，并且可以修改页面。
1.工具栏popup界面
点击工具栏/地址栏（具体位置取决于配置文件）插件图标出来的弹窗其实就是一个html页面，弹窗要显示的文件，和工具栏小图标在manifest.json文件中配置。
{
"browser_action": {
"default_title": "clearRead",
"default_icon": "icon.png",
"default_popup": "popup.html"
},
}
复制代码在clearRead插件中，popup界面主要是提供插件的启用状态和快捷键配置功能。
2.内容脚本content.js
内容脚本在打开网页时会被注入到网页中，它们在浏览器中已加载页面的上下文中执行。应该将内容脚本视为已加载页面的一部分。clearRead的核心功能就是依赖于内容脚本。 在哪些页面中注入脚本和注入什么脚本在manifest.json文件中配置。
{
"content_scripts": [
{
"matches": ["*://*/*", "file://*"],
"css": ["style/content.css"],
"js": ["js/contentScript.js"]
}
]
}
复制代码matches字段可以设置一个匹配表达式来过滤需要注入脚本的网站。查看内容脚本文档
clearRead插件主要是利用内容脚本向页面注入脚本，通过监听快捷键激活程序，分析提取页面中的标题正文来生成阅读模式。
3.后台页面/事件页面
在manifest.json文件中配置需要运行的脚本
{
"background": {
"scripts": ["eventPage.js"],
"persistent": false
}
}
复制代码配置参数persistent:false则后台页面变为事件页面，事件页面和背景页面的区别是 是否常住后台运行，Chrome 22开始可以使用事件页面，应该尽量使用事件页面，查看事件页面文档。
4.content、background、popup之间通信
在脚本中监听事件
chrome.extension.onMessage.addListener((request, sender, sendResponse) => {
console.log('收到消息')
sendResponse('发送返回值');
});
复制代码发送消息
chrome.extension.sendMessage({msg: 'send a message'},(response) => {
console.log(response);
});
复制代码三个页面之间可以互相通信，这里需要注意的是content脚本会被注入到每个打开的浏览器标签中，如果从popup或者background发送消息到content中需要先确认当前的content，使用chrome.tabs.query可以找到当前激活的窗口。
除了通过事件来通信，popup和background还能通过chrome.extensionAPI来访问脚本。
chrome.extension.getBackgroundPage()
复制代码getBackgroundPage可以返回当前扩展在后台运脚本的window对象。
chrome.extension.getViews()
复制代码getViews返回一个数组，含有每一个在当前扩展程序中运行的页面的JavaScript window 对象。
5.本地储存
应用开发还有一个比较重要的就是数据的持久化了，Chrome插件可以使用html5的localStorage API来实现数据存储。 对于状态Chrome提供了chrome.cookies.*API来存储cookies。同时Chrome还提供了chrome.storage.*API来储存数据。
这里主要说明一下chrome.storage，要使用储存功能首先需要在manifest.json文件中配置储存权限(cookies也需要)：
{
"permissions": [
"storage"
]
}
复制代码storage储存分为同步模式和本地模式分别是chrome.storage.sync.*和chrome.storage.local.*两者的区别在于同步模式储存的数据如果在另一台设备的浏览器登录同一个账号数据会被同步。
储存数据：
chrome.storage.sync.set({key: value}, function() {
console.log('Value is set to ' + value);
});
复制代码读取数据：
chrome.storage.sync.get(['key'], function(result) {
console.log('Value currently is ' + result.key);
});
复制代码如果想要只读存储可以使用chrome.storage.managed来存储
脚本的打包
Chrome浏览器的扩展程序页面就提供了打包扩展的功能。
首先打开开发者模式，点击打包扩展程序在这里可以选择扩展程序文件夹（buildSrc）来打包扩展。这种打包方式的缺点就是慢，在开发调试阶段打包次数可能让人奔溃。
第二种就是使用命令打包了，使用
crx模块：
npm install crx
复制代码安装完成后直接进入目录进行打包
$ cd myFirstExtension
$ crx pack -o myFirstExtension.crx
复制代码第三种方法比较推荐，结合grunt进行打包：
npm install grunt-crx
复制代码安装grunt-crx模块在Gruntfile.js中配置
module.exports = function(grunt) {
require('load-grunt-tasks')(grunt);
...
grunt.initConfig({
...
crx: {
myPublicExtension: {
src: "buildSrc/**/*",
dest: "crx/clearRead.zip",
},
mySignedExtension: {
src: "buildSrc/**/*",
dest: "crx/clearRead.crx",
options: {
privateKey: "buildSrc/key.pem"
}
}
}
});
...
grunt.registerTask('crxTask', ['crx']);
};
复制代码命令行执行命令$ grunt crxTask进行打包。
注：私钥文件key.pem可以通过执行crx打包命令生成，打包文件需要生成crx和zip文件，Chrome应用商店需要上传zip文件
扩展程序调试
1.安装扩展
首先需要打开Chrome扩展管理页面打开开发者模式，普通模式下Chrome是禁止安装非商店下载的扩展的。
打开开发者模式后直接将crx/zip文件拖入浏览器即可安装。
2.调试popup
在工具栏的扩展小图标上右击选择审查弹出内容
会弹出Chrome的DevTools，调试方式和普通页面一样。3.调试backgrund
在扩展管理页面，在安装的扩展上有背景页按钮点击会弹出background页面的DevTools。
3.调试content
content脚本是直接注入到页面中的所有直接在页面打开Devtools就能调试了。
发布上架
应用开发完成打包后就可以上架到应用商店了，首先需要一个Google账号登录开发者信息这个，首次成为开发着需要支付5美元才能上传插件到谷歌应用商店点击添加新内容开始上传填写插件信息
上传文件后开始填写插件的图标、说明、及截图，截图将会以轮播图的形式展现。屏幕截图的尺寸必须是1280x800 或 640x400差一点点都会上传失败。 填写完所有的信息就可以发布了，一般发布十几分钟后在应用商店就能搜到你的插件。插件中的用户统计应该是每日更新的，所有刚发布后下载了但是没有用户数这是正常的。还有需要注意的是每次插件有更新需要先更新manifest.json文件中的
manifest_version字段再打包上传。
一些API文档地址
- Chrome插件的介绍
- 开发者指南
- manifest.json 完整字段
- Chrome APIs