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

为工具栏上的按钮添加一个菜单，如下所示。

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

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

以下内容为程序代码:

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         "popup": "popup.html"
11      }
12  }

popup.html的内容如下:

以下内容为程序代码:

1  ＜html＞
2  ＜head＞
3  ＜style type="text/css"＞
4  ＜!--
5  div: hover  {
6     background-color: #EAEAEA;
7     cursor: default;
8  }
9  div  {
10     width: 180px;
11     border: thin solid #ABABAB;
12     margin-top: 1px;
13  }
14  body  {
15     margin: 0;
16  }
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的话是比较简单的，

关于这方面的知识我就不多说了。随便网上搜索下就有了。好了，赶快试下效果如何，呵呵。。。

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

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

转载于:https://www.cnblogs.com/JiangHuakey/archive/2011/09/08/2170953.html