Chrome扩展程序入门

很多人习惯称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】

	
		Hello Wrold!
	

3.3 部署程序

直接将程序的整个文件夹，即HelloWorld文件夹拖拽到chrome://extensions/页面，浏览器就安装上插件了，右上角插件栏就会多出来我们新安装的插件。

4 最后

这就完成了一个最简单的Chrome扩展程序开发，后面我们会开发一个能够运行JS的版本，逐渐去完善它的功能。

我的毕业设计会做一个类似lastpass一样的密码管理功能的扩展程序，后面逐步完成后，也会在博客进行分析，并将代码上传到码云，如有兴趣，可以持续关注我的博客。