您的位置：首页 > 编程语言 > Go语言

[译].Google Chrome extensions（实验室）.开始

2010-03-18 08:43 288 查看

教程：开始（Hello,World！）

这个教程先带着你做一个简单的Chrome插件。添加一个图标到GoogleChrome上，当你点击的时候，将自动生成一个页面。如下图示例：

准备好浏览器

Window下可用一般的稳定版开发扩展，但是要在其他Linux或者Mac上开发扩展要使用其他的最新的GoogleChrome分支。

Windows：任何最新的GC

Linux：测试分支Betachannel

Mac：开发者分支Devchannel

编写和装载一个扩展

在这个部分，你将编写一个添加在Chrome工具栏的浏览器动作的扩展。

随意在电脑上创建一个文件夹来存放你的扩展代码

在文件夹内，创建一个名为“manifest.json“的文本文件，添加如下代码：

[code]"name":"MyFirstExtension",

"version":"1.0",

"description":"ThefirstextensionthatImade.",

"browser_action":{

"default_icon":"icon.png"

},

"permissions":[

"http://api.flickr.com/"

[/code]

拷贝下图到你的扩展文件夹下

下载icon.png

装载扩展

a.点击

打开扩展管理,点击"扩展管理程序"

b.假如开发人员模式旁边有个"+",点击加号,打开开发的面板

c.点击载入正在开发的扩展程序,一个本地文件选择打开。

d.在文件对话框中，找到你的扩展文件夹选中，点击确定。

如果你的扩展无措可用的话，那个图标将会出现在工具栏上，扩展信息出现在扩展管理页面上，如下图所示：

向扩展中添加代码

接下来，让你的扩展干点事情吧，它可不只是个装饰。

向manifest.json添加一行：

...

[code]"browser_action":{

"default_icon":"icon.png",

"popup":"popup.html"

},

...

在扩展文件夹下，创建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:'target='_blank'>http://www.flickr.com/services/api/misc.urls.html[/code]functionconstructImageURL(photo){

return"http://farm"+photo.getAttribute("farm")+

".static.flickr.com/"+photo.getAttribute("server")+

"/"+photo.getAttribute("id")+

"_"+photo.getAttribute("secret")+

"_s.jpg";

}

</script>

[/code]

回到Chrome的扩展控制面板，点击重新载入，刷新扩展程序。

点击扩展图标，弹出的面板显示出了popup.html中的内容。看起来像这样子：

假如运行没有成功，在按照教程来一遍，保证操作正确，加载一个不属于扩展文件夹的Html文件是不行的。

目录：http://www.cnblogs.com/island205/archive/2010/03/17/1688261.html

原文链接：http://code.google.com/chrome/extensions/getstarted.html

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

标签：