本文作者：上海驻云Web前端工程师
（只爱扎啤跟撸串的骚年）
施 翔
以下正文
随着互联网行业的崛起，网络已经成为人们生活工作时不可缺少的一部分，最直接的接触互联网的方式就是通过浏览器上网。随之而来的是用户对浏览器提出了越来越高的要求，换而言之就是对 web 的需求不断提升，单纯的浏览器已经不够满足某些场景的需要。
为了扩展浏览器的功能，形形色色的浏览器插件应运而生。比如 ie 各种内置搜索引擎，firefox 的 firebug，chrome 的 goAgent 等等。插件可以捕捉并显示指定网站的内容，识别一些网站上的广告代码并删除，甚至与别的站点通讯。给我们带来方便的同时，也带来了一些安全隐患。
为什么了解 chrome 而不是其他的浏览器插件呢？因为 chrome 的插件开发起来相对简单，开发语言就是 javascript，需要一个 chrome 浏览器和一个文本编辑器就可以，对于一个 web前端工程师来说几乎是零需求，能很快上手；firefox 的插件开发复杂许多，涉及到环境的搭建和一些 web 以外的技术；ie 的插件开发就更复杂了，需要熟悉C++和COM等客户端的技术，还需要安装微软的Visual Studio。
着手开发之前先了解下插件的文件结构，能让插件在 chrome 上正常运行的主要文件就5个：
下面用一个实例来进一步了解下插件的实现。
这个插件的功能是这样的：当你浏览某个网站的时候，它会启动并获取你浏览的网站的 title，把这个 title 显示在 popup 上，在 title 的下面有一个文本框，输入色值（比如:#000000，red）插件会把你所在访问的网站的 body 背景色换成你所输入的色值。听起来挺无聊的功能，但关键是为了演示。
这个插件一共有11个文件。
manifest.json
属性：
manifest_version：2
现在一般都是2，代表着 html 和 js 需要分离。
name：插件的名字，会在插件列表中显示
background：运行在浏览器后台的脚本文件
icons：显示在插件列表中的图标。
page_action：
default_icon显示在浏览器上的图表
default_title鼠标悬停上去以后的 alt 文本
default_popup点击以后出现的 html
其中，page_action 的图标显示在 url 栏，browser_action 的图标显示在浏览器上。
permissions：
“tabs”：访问浏览器选项卡
"http://localhost/", AJAX访问 localhost 的权限
"*://*/*" 访问任意域名的权限
content_scripts：
matches：允许插件获取哪些域名下的数据
js：注入页面的 js 文件
注意：这里也是安全隐患的源头。
background.js
这是一个很重要的文件，可以把它看做是一个框架里的 controller 层，起到了承上启下的作用。而且一旦启动了插件，chrome 会为这个“controller”开一个独立的运行环境。
在代码中我们做了3件事情：
1．监听新打开的tab 中，网站的 url，只要不是空的都显示了插件的 icon，在这里也可以限制插件的显示。
2．监听 message 发来的信息，并存在 sxData 中。
3．监听 request 发来的信息，并在当前的 tab 中执行 code。
content_script.js
content_script是页面上注入的脚本，主要是获取页面元素，并发送 background 处理。
代码中我们看到 content_script 获取了页面上的 title 标签的值，并通过 sendMessage 方法发送。
popup.html
popup.js
这些都是简单的 html 页面，有一点 html + css + javascript基础的程序员都能看懂。这里所实现的是一旦点击 chrome 上的插件图标，popup.html 就会被加载，此时将 content_script 中获取到的 title 标签的值赋予 id 为 content-title 的 DOM 元素中去。
点击changeColor将输入框中填写的色值通过 sendRequest 与建立 background 通讯。
这里需要注意一点，出于安全考虑 popup.html 和 popup.js 必须分开存放，直接写在 html 中的 js 代码近不会被执行。
我们有了代码，剩下的就是在浏览器上加载插件。
第一：在chrome浏览器的地址栏输入
"chrome://extensions"。
第二：勾选"开发者模式"。
第三：点击"加载已解压的扩展程序"。
第四：选择解压后的插件包文件夹。
第五：确保加载进来的插件"已启用"。
发布插件时，需要先将插件代码打包成 zip 文件，然后登录 chrome 网上应用商店https://chrome.google.com/webstore/developer/update?hl=zh-CN
上传 zip 文件，经过审核就可以上架了。
这里是整套插件的源码，供大家相互学习。
https://github.com/clark1201/chrome-plugin-test
利用 chrome 插件，我们可以做出很多有用的东西，希望通过本文能让你了解如何去开发一款 chrome 插件。当然我用到的只是冰山一角，要更加深入的了解还需要借助 google 和 stackoverflow.com 。
好啦~~~本文到这里也就结束啦~如果还希望了解更多相关知识的话，就赶紧订阅我们吧~还可以关注我们微信公众号：架构云专家频道。每天新鲜干货定时推送呦~