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/或通过菜单->更多工具 ->扩展程序打开扩展程序管理页面。如图:

Google Chrome插件开发-Browser action_第1张图片

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


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

你可能感兴趣的:(Google Chrome插件开发-Browser action)