Chrome扩展开发教程（二）：一步步开发表单填写扩展

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

其实这个菜单是一个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

免责声明：本文系网络转载或改编，未找到原创作者，版权归原作者所有。如涉及版权，请联系删