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工具面板展示的。
，由于上面的演示我们已经知道这个图标是用于在Chrome工具面板展示的。
一个名为
icon.png的图标
，然而这个图标的作用于哪个地方呢？这个图标是用于Chrome的扩展程序管理器中的。
，然而这个图标的作用于哪个地方呢？这个图标是用于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 }
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扩展程序，下节课我们继续完善。