[Chrome]谷歌浏览器插件开发：HelloChrome插件的开发过程

虽然教程不少，但是网上的大多内容良莠不齐，而且Chrome更新之后，很多以前的教程不再适用。

谷歌浏览器App的开发和扩展基本结构都是相似的，这里为大家演示一下完整的插件开发流程。

我们的目标是：开发一个名为HelloChrome的谷歌浏览器插件，

点击之后显示HelloChrome的字样即可，类似于编程中的Helloworld。

听上去似乎很简单，实际上也却是很简单，那我们就开始吧~

0.入门介绍

一个最简单的APP需要由一个图标和一个名为manifest.json的文件组成，图标建议128*128的。

至于所需要的IDE，文本编辑器和Chrome浏览器即可。

推荐使用EditPlus文本编辑器，我写php，js，css的时候很喜欢用这个，简洁轻便。

1.部署项目

新建一个文件夹，名为HelloChrome；

准备一个图标，建议128×128大小的。

然后创建一个文件，命名为manifest.json，用文本编辑器打开，复制以下代码：

[plain]  view plain copy

1. {  
2.     "name": "HelloChrome",  
3.     "version": "1.0",  
4.     "manifest_version": 2,  
5.     "icons":   
6.     {  
7.         "128": "icon.png"  
8.     },  
9.     "permissions": [ "notifications" ],  
10.     "description":"Hello Chrome: My First Chrome App!",  
11.     "browser_action":   
12.     {  
13.         "default_icon": "icon.png",  
14.         "default_popup": "popup.html"  
15.     }  
16. }  

简单解释一下：

name就是插件的名称，

version是版本号，

manifest_version一定要注意了，没有这个的话在最新版本的Chrome中无法安装插件

icon是图标数组，128表示尺寸为128的icon名称，

browser_action是一些相关的设定，这个也有很大改动。

default_icon是默认的icon，

default_popup是点击之后的弹窗操作。

所以在项目的文件夹下，还要新建一个html文件，命名为popup.html即可。

popup.html中只需要一行代码：

[html]  view plain copy

1. <p>Hello,Chrome!</p>  

完整的项目目录如下：

2.安装插件

在Chrome的插件管理页面，勾选开发者模式，然后点击加载：

选择新建的项目的文件夹，这样便可以了。

点击之后弹出窗口如下：

啊哈，第一个插件就算制作完成啦