chrome扩展之1：一步步跟我学开发一个表单填写扩展

开发chrome扩展的必备知识点有以下5点:

• 1.javascript
• 2.CSS
• 3.DOM
• 4.HTML
• 5.JSON

如果不是做很高深的扩展就不用很精通，会就行了。最后需要的就是chrome api的知识，这就是我所要教给大家的。

一个Chrome扩展应该包含哪些文件呢?如下:

    1.一个manifest.json文件,而且文件名必须是manifest。

    2.至少一个图标文件(.jepg .png .gif等web支持的格式都可以) 。

    3.一些html文件,可选的。

    4.一些js文件,可选的。

后面我们对manifest.json文件进行解释。

先看一个我已经做好的扩展，这也是我最终要教给大家的。请看点击下面的缩略图片进行gif动画观看。

这节课要教给大家的是怎么样Chrome的工具面板上添加一个按钮，就像上面所展示的:

首先要知道的是怎么样把写好的代码安装到Chrome中成为Chrome的一个扩展程序。 请看点击下面的缩略图片进行GIF动画演示。

如您所看到的，我所选择的1.0 Hello Chrome目录都有哪些文件呢?

有如下文件:

一个 manifest.json文件。

一个名为 action.png的 图标 ，由于上面的演示我们已经知道这个图标是用于在Chrome工具面板展示的。

一个名为 icon.png的图标 ，然而这个图标的作用于哪个地方呢？这个图标是用于Chrome的扩展程序管理器中的。

请看点击下面的缩略图片进行GIF动画演示。

为什么Chrome会知道哪些图标应用在哪些地方呢？那么我们就得说说manifest.json文件了。这个文件的作用就是配置chrome扩展程序的。

那么我们看看这个manifest.json文件有哪些内容吧，如下:

以下内容为程序代码:

1 {
2     "name":"Hello Chrome",
3     "version":"1.0.0",
4     "icons":{
5         "48":"icon.png"
6     },
7     "browser_action":{
8         "default_title":"Hello browser action",
9         "default_icon":"action.png"
10     }
11 }

"name"字段为这个扩展的名称，会在chrome扩展管理器中显示的。

"version"字段为这个扩展的版本号，会在chrome扩展管理器中显示的。

"icons"字段里又有3个字段，分别是"16","48","128"，我们现在只关注"48"这个字段，

           "48"字段所表示的是为这个扩展在扩展管理器中设置一个图标。我们在这里设置为icon.png。

"browser_action"字段标明这个扩展应用的类型，这个类型所展示的应用会在Chrome的工具面板上显示一个图标。

"browser_action"字段里又有很多字段，我们现在只关注"default_title"和 "default_icon"字段。

"default_title"字段所设置的值当鼠标停留在Chrome工具面板上的图标时所展示的信息。 

"default_icon"字段就是设置在Chrome工具面板上所展示的图标。"

好了，我们现在写好了一个什么也不干的Chrome扩展程序，下节课我们继续完善。

这节课的完整工程下载: http://files.cnblogs.com/JiangHuakey/HelloChrome.zip

出处: http://www.chinachrome.net/dispbbs.asp?boardid=2&id=13&page=1&star=1