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