参考: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!
第一个谷歌浏览器插件完成!更多插件可以参考本文开头的地址查看代码进行试验。