什么是Chrome插件
Chrome插件其实和一个普通web应用一样都是由html+css+js经过zip打包组成的，插件可以使用Chrome提供的浏览器API，增强浏扩展览器的功能。
- 浏览器的地址栏中
- 浏览器的工具栏中
出现的位置可以在配置文件中配置。
接下来以clearRead为例说说Chrome插件的开发打包和发布。clearRead插件是一款提取新闻页面内容提供一个干净清爽阅读界面的工具，可以在安装。
这里是GitHub地址
项目结构
接下来看一下项目结构。真正打包的目录是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字段可以设置一个来过滤需要注入脚本的网站。
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，使用可以找到当前激活的窗口。
除了通过事件来通信，popup和background还能通过API来访问脚本。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浏览器的扩展程序页面就提供了打包扩展的功能。
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进行打包。
扩展程序调试
1.安装扩展
首先需要打开Chrome扩展管理页面打开开发者模式，普通模式下Chrome是禁止安装非商店下载的扩展的。
打开开发者模式后直接将crx/zip文件拖入浏览器即可安装。2.调试popup
在工具栏的扩展小图标上右击选择审查弹出内容
3.调试backgrund
在扩展管理页面，在安装的扩展上有背景页按钮点击会弹出background页面的DevTools。
3.调试content
content脚本是直接注入到页面中的所有直接在页面打开Devtools就能调试了。
发布上架
应用开发完成打包后就可以上架到应用商店了，首先需要一个Google账号登录，首次成为开发着需要支付5美元才能上传插件到谷歌应用商店点击添加新内容开始上传填写插件信息
manifest.json文件中的 manifest_version字段再打包上传。 一些API文档地址