参考：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！
第一个谷歌浏览器插件完成！更多插件可以参考本文开头的地址查看代码进行试验。
时间： 2024-11-05 17:28:38