随着Google Chrome Dev版本开放了扩展程序功能,Chrome引来了越来越多的关注。
翻译一篇简单的扩展程序开发入门,大家快来动手实现自己的Hello World吧!
原文来自Google
[url]http://code.google.com/chrome/extensions/getstarted.html[/url]
[img]http://code.google.com/chrome/extensions/images/hello-world-small.png[/img]
一、升级自己的浏览器
想要开发Chrome的扩展程序需要使用开发版本的Chrome,而不是一般人使用的发布版(Stable channel)。
二、建立并加载你的扩展
1、在电脑的任何地方建立一个文件夹,用来存放你的代码。
2、在建好的文件夹中创建一个文本文件,把名字改成manifest.json,并将下面的代码拷贝进去。
什么?什么是JSON?请看我以前写过的一篇介绍[url]http://radiumwong.iteye.com/admin/blogs/397764[/url]
3、将这个图标也拷贝到你刚建好的文件夹中
[img]http://dl.iteye.com/upload/attachment/192887/f9f36041-ee55-3f45-bc57-c71afc907113.png[/img]
4、加载扩展程序
现在扩展程序已经基本成型了,让浏览器加载进来吧。
a、点击浏览器右上角的这个图标[img]http://dl.iteye.com/upload/attachment/192889/c741558c-387b-3af7-92c9-bb88bf434167.gif[/img],选择“扩展程序”。
b、点击“载入正在开发的扩展程序”,选择刚才建立的文件夹。
c、点击“确定”,这个时候浏览器上就会出现我们程序的图标。
[img]http://code.google.com/chrome/extensions/images/load_after_small.png[/img]
三、为扩展添加代码
现在还不能急,因为我们的扩展程序还没有实际的功能。这一步我们就把扩展程序做成文字一开始图片中的样子。
1、编辑manifest.json文件,按照下面的这段改写原来的代码。
2、在文件夹中建立一个文本文件popup.html,并将下面这段CSS和JS代码拷贝进去。
3、回到浏览器的“扩展程序”页面,点击“重新载入”。
4、好了,现在工作已经做完了,点击图标试试效果吧。
[img]http://code.google.com/chrome/extensions/images/hello-world.png[/img]
翻译一篇简单的扩展程序开发入门,大家快来动手实现自己的Hello World吧!
原文来自Google
[url]http://code.google.com/chrome/extensions/getstarted.html[/url]
[img]http://code.google.com/chrome/extensions/images/hello-world-small.png[/img]
一、升级自己的浏览器
想要开发Chrome的扩展程序需要使用开发版本的Chrome,而不是一般人使用的发布版(Stable channel)。
二、建立并加载你的扩展
1、在电脑的任何地方建立一个文件夹,用来存放你的代码。
2、在建好的文件夹中创建一个文本文件,把名字改成manifest.json,并将下面的代码拷贝进去。
什么?什么是JSON?请看我以前写过的一篇介绍[url]http://radiumwong.iteye.com/admin/blogs/397764[/url]
{
"name": "My First Extension",
"version": "1.0",
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png"
},
"permissions": [
"http://api.flickr.com/"
]
}
3、将这个图标也拷贝到你刚建好的文件夹中
[img]http://dl.iteye.com/upload/attachment/192887/f9f36041-ee55-3f45-bc57-c71afc907113.png[/img]
4、加载扩展程序
现在扩展程序已经基本成型了,让浏览器加载进来吧。
a、点击浏览器右上角的这个图标[img]http://dl.iteye.com/upload/attachment/192889/c741558c-387b-3af7-92c9-bb88bf434167.gif[/img],选择“扩展程序”。
b、点击“载入正在开发的扩展程序”,选择刚才建立的文件夹。
c、点击“确定”,这个时候浏览器上就会出现我们程序的图标。
[img]http://code.google.com/chrome/extensions/images/load_after_small.png[/img]
三、为扩展添加代码
现在还不能急,因为我们的扩展程序还没有实际的功能。这一步我们就把扩展程序做成文字一开始图片中的样子。
1、编辑manifest.json文件,按照下面的这段改写原来的代码。
...
"browser_action": {
"default_icon": "icon.png",
"popup": "popup.html"
},
...
2、在文件夹中建立一个文本文件popup.html,并将下面这段CSS和JS代码拷贝进去。
<style>
body {
min-width:357px;
overflow-x:hidden;
}
img {
margin:5px;
border:2px solid black;
vertical-align:middle;
width:75px;
height:75px;
}
</style>
<script>
var req = new XMLHttpRequest();
req.open(
"GET",
"http://api.flickr.com/services/rest/?" +
"method=flickr.photos.search&" +
"api_key=90485e931f687a9b9c2a66bf58a3861a&" +
"text=hello%20world&" +
"safe_search=1&" + // 1 is "safe"
"content_type=1&" + // 1 is "photos only"
"sort=relevance&" + // another good one is "interestingness-desc"
"per_page=20",
true);
req.onload = showPhotos;
req.send(null);
function showPhotos() {
var photos = req.responseXML.getElementsByTagName("photo");
for (var i = 0, photo; photo = photos[i]; i++) {
var img = document.createElement("image");
img.src = constructImageURL(photo);
document.body.appendChild(img);
}
}
// See: http://www.flickr.com/services/api/misc.urls.html
function constructImageURL(photo) {
return "http://farm" + photo.getAttribute("farm") +
".static.flickr.com/" + photo.getAttribute("server") +
"/" + photo.getAttribute("id") +
"_" + photo.getAttribute("secret") +
"_s.jpg";
}
</script>
3、回到浏览器的“扩展程序”页面,点击“重新载入”。
4、好了,现在工作已经做完了,点击图标试试效果吧。
[img]http://code.google.com/chrome/extensions/images/hello-world.png[/img]