码迷,mamicode.com
首页 > 其他好文 > 详细

Google Chrome插件开发

时间:2015-12-16 14:08:20      阅读:137      评论:0      收藏:0      [点我收藏+]

标签:

参考: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!

技术分享

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

Google Chrome插件开发

标签:

原文地址:http://blog.csdn.net/anda0109/article/details/50325849

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!