很多人习惯称Chrome扩展程序为Chrome插件，但其实这样的称呼不准确，因为Google官方的命名是Chrome Extensions，即Chrome扩展程序。
1 前言
Chrome浏览器有很多好用的扩展程序，功能强大，开发起来有很容易（HTML+CSS+JS）。
第一个Chrome扩展程序的HelloWorld不急于去编写一个能够执行JS代码的程序，而更多的去带大家了解开发Chrome扩展程序的环境及一些细节的地方。
2 Chrome扩展程序
Chrome插件管理页面地址：chrome://extensions/
打开后就能够看到我们浏览器安装的所有插件了。
2.1 开发者模式
在编写自己的插件之前，我们要打开Chrome浏览器的开发者模式。
打开开发者模式之后，已下载多了上图中的2、3两个部分的内容。
- 加载已解压的扩展程序：加载扩展程序到浏览器。
- 打包扩展程序：将自己的扩展程序打包为.crx文件与.pem私钥文件，发布应用到Google应用商店时才会用到。
- 更新：当我们修改了已添加到浏览器的扩展程序时，点击更新按钮，就能把修改同步到浏览器。
- ID：扩展程序ID。
- 查看视图：查看程序一直常驻在浏览器后台的页面，可在配置文件中指定。
2.2 扩展程序本地安装路径
进入地址：chrome://version/
找到个人资料路径，再进入Extensions文件夹，即扩展程序目录
进入之后我们就能看到一些很长一串字母的文件夹，这是以扩展程序ID命名的文件夹。
所以回到刚才浏览器扩展程序管理页面寻找对应的ID，就能够确定扩展程序的安装路径了，我们也就能其他程序的源码了。
3 开发HelloWorld
下面就开始开发我们的一个扩展程序。
3.1 文件结构
最简单的程序文件结构就只需要三个文件：manifest.json、popup.html、程序图标
- manifest.json
- 每个扩展程序所必须的，配置文件。
- popup.html
- 弹出框页面
现在我们整个程序的目录结构如下
|- HelloWorld
|- helloworld.png //程序图标
|- manifest.json //配置文件
|- popup.html //弹出页面
3.2 编写代码
【程序图标】
【manifest.json】
{
"name": "Hello World",
"description" : "My first Extension",
"version": "1.0",
"manifest_version": 2,
"browser_action": {
"default_popup": "popup.html",
"default_icon": "helloworld.png"
}
}
【popup.html】
<html>
<body>
<h1>Hello Wrold!</h1>
</body>
</html>
3.3 部署程序
直接将程序的整个文件夹，即HelloWorld文件夹拖拽到chrome://extensions/页面，浏览器就安装上插件了，右上角插件栏就会多出来我们新安装的插件。
4 最后
这就完成了一个最简单的Chrome扩展程序开发，后面我们会开发一个能够运行JS的版本，逐渐去完善它的功能。
我的毕业设计会做一个类似lastpass一样的密码管理功能的扩展程序，后面逐步完成后，也会在博客进行分析，并将代码上传到码云，如有兴趣，可以持续关注我的博客。
