Google Chrome插件开发-Browser action

参考:http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/extensions/


下面我将一步一步教你如何开发一个浏览器插件,这个插件会在浏览器工具栏创建一个图标,点击图标会弹出一个页面。

1、在任意位置创建目录getStarted。

2、在getStarted目录下创建一个文本文件,并将文件名修改为manifest.json,其内容如下:

{
	  "manifest_version": 2,
	
	  "name": "One-click Kittens",
	  "description": "This extension demonstrates a 'browser action' with kittens.",
	  "version": "1.0",
	
	  "browser_action": {
	    "default_icon": "icon.png",
	    "default_popup": "popup.html"
	  },
	  "permissions": [
	    "https://secure.flickr.com/"
	  ]
}
3、找一张png格式图片放在getStarted目录下,并命名为icon.png

4、在getStarted目录下创建一个文本文件,并将文件名修改为popup.html,其内容如下:

<!doctype html>
	<html>
	  <head>
	    <title>Getting Started Extension's Popup</title>
	    <style>
	      body {
	        min-width: 357px;
	        overflow-x: hidden;
	      }
	
	      img {
	        margin: 5px;
	        border: 2px solid black;
	        vertical-align: middle;
	        width: 75px;
	        height: 75px;
	      }
	    </style>
	
	    <!--
	      - JavaScript and HTML must be in separate files: see our Content Security
	      - Policy documentation[1] for details and explanation.
	      -
	      - [1]: http://developer.chrome.com/extensions/contentSecurityPolicy.html
		  <script src="popup.js"></script>
	     -->
	    
	  </head>
	  <body>
	  Hello World!
	  </body>
	</html>
5、加载插件。在谷歌浏览器地址栏输入:chrome://extensions/或通过菜单->更多工具 ->扩展程序打开扩展程序管理页面。如图:


6、勾选“开发者模式”,然后点击“加载已解压的扩展程序”,选择我们的插件目录getStarted。插件加载成功在我们的浏览器工具栏就可以看到我们的插件图标,点击图标,弹出Hello world!


第一个谷歌浏览器插件完成!更多插件可以参考本文开头的地址查看代码进行试验。

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值