您的位置：首页 > 其它

如何开发Chrome(谷歌)浏览器的插件

2010-11-11 17:01 666 查看

首先贴出Google官方文档教材：http://code.google.com/chrome/extensions/getstarted.html

按照官方的文档，做了个简单的测试插件,当然是毫无意义的插件，呵呵

新建一个文件夹(test),待会里面放插件代码和其他文件图片等在test里面新建一个manifest.json文件!复制一下内容:

{
"name":"Chrome插件",
"version":"1.0",
"description":"这是我的测试",
"browser_action":{
"default_icon":"icon.png",
"popup":"popup.html"
},
"permissions":[
"http://api.flickr.com/"
]
}

注意:　manifest.json名字不能随便乱取！　上面内容包含中文，保存时请选择　UTF－8

3.复制一张名为icon.png的图标到test文件夹里面.

4.新建popup.html页面,键入以下内容:

<style>
body{
min-width:357px;
overflow-x:hidden;
}

img{
margin:5px;
border:2pxsolidblack;
vertical-align:middle;
width:75px;
height:75px;
}
</style>

<script>
varreq=newXMLHttpRequest();
req.open(
"GET",
"http://api.flickr.com/services/rest/?"+
"method=flickr.photos.search&"+
"api_key=90485e931f687a9b9c2a66bf58a3861a&"+
"text=hello%20world&"+
"safe_search=1&"+//1is"safe"
"content_type=1&"+//1is"photosonly"
"sort=relevance&"+//anothergoodoneis"interestingness-desc"
"per_page=20",
true);
req.onload=showPhotos;
req.send(null);

functionshowPhotos(){
varphotos=req.responseXML.getElementsByTagName("photo");

for(vari=0,photo;photo=photos[i];i++){
varimg=document.createElement("image");
img.src=constructImageURL(photo);
document.body.appendChild(img);
}
}

//See:http://www.flickr.com/services/api/misc.urls.htmlfunctionconstructImageURL(photo){
return"http://farm"+photo.getAttribute("farm")+
".static.flickr.com/"+photo.getAttribute("server")+
"/"+photo.getAttribute("id")+
"_"+photo.getAttribute("secret")+
"_s.jpg";
}
</script>

该文件可从google下载

5.打开Google浏览器,点击扳手图标

-->工具-->扩展程序,下图

如需测试,点击"载入正在开发的扩展程序",弹出框选择你新建的test文件夹!　下面显示了　Chrome插件(正在开发)

如需打包,点击＂打包扩展程序＂,弹出框选择你新建的test文件夹!打包为一个.CRX文件,如果你要安装这个插件，不要双击这个文件，只需把这个文件拖进Chrome浏览器即可，就像安装其他插件一样了!

效果图:和Google里面显示的效果图一样吧!

当我把popup.html里面的内容修改为

<body>
<ahref="http://www.google.com/"target="_blank">Google</a>
<imgsrc="lxr.jpg"style="height:200px;width:200px"/>
</body>

重新打包插件，安装插件，效果图如下:

当然你可以制作出更实用,更酷,更炫的插件提供给大家使用哦!

参考详细资料:http://dev.chromechina.com/

下载

Technorati标签:Google,插件

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：