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

为工具栏上的按钮

添加一个菜单，如下所示。

[/b]



其实这个菜单是一个html文档而已，问题是怎么样把这个文档变成按钮的菜单，我们只要改下manifest.json文件即可。[/b]

在上节课的manifest.json文件中的"browser_action"中添加多一个"popup"字段以及新增一个名为popup.html的文档即可，详细代码如下:[/b]

以下内容为程序代码:[/b]

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

popup.html的内容如下:

以下内容为程序代码:[/b]

1 ＜html＞
2 ＜head＞
3 ＜style type="text/css"＞
4 ＜!--
5 div:hover {[/b]
6 background-color: #EAEAEA;
7 cursor: default;
8 }[/b]
9 div {[/b]
10 width: 180px;
11 border: thin solid #ABABAB;
12 margin-top: 1px;
13 }[/b]
14 body {[/b]
15 margin: 0;
16 }[/b]
17 --＞
18 ＜/style＞
19 ＜/head＞
20 ＜body＞
21 ＜div＞chrome 扩展论坛＜/div＞
22 ＜div＞chrome api＜/div＞
23 ＜div＞chrome browser_action＜/div＞
24 ＜/body＞
25 ＜/html＞

显而易见的，之所以我在第一节课说过需要HTML及CSS的知识，这节课如果懂HTML和CSS的话是比较简单的，[/b]
关于这方面的知识我就不多说了。随便网上搜索下就有了。好了，赶快试下效果如何，呵呵。。[/b]。

这节课完成的工程下载:[/b]http://files.cnblogs.com/JiangHuakey/1.1browser_action.zip

在笔者的chrome论坛上也可以找到该文章:http://www.chinachrome.net/dispbbs.asp?boardid=2&id=13&page=1&star=1