【译】Chrome扩展程序开发之HelloWorld

随着Google Chrome Dev版本开放了扩展程序功能，Chrome引来了越来越多的关注。
翻译一篇简单的扩展程序开发入门，大家快来动手实现自己的Hello World吧！
原文来自Google
http://code.google.com/chrome/extensions/getstarted.html



一、升级自己的浏览器
想要开发Chrome的扩展程序需要使用开发版本的Chrome，而不是一般人使用的发布版(Stable channel)。

二、建立并加载你的扩展
1、在电脑的任何地方建立一个文件夹，用来存放你的代码。
2、在建好的文件夹中创建一个文本文件，把名字改成manifest.json，并将下面的代码拷贝进去。
什么？什么是JSON？请看我以前写过的一篇介绍http://radiumwong.iteye.com/admin/blogs/397764

{
  "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、将这个图标也拷贝到你刚建好的文件夹中

4、加载扩展程序
现在扩展程序已经基本成型了，让浏览器加载进来吧。
a、点击浏览器右上角的这个图标，选择“扩展程序”。
b、点击“载入正在开发的扩展程序”，选择刚才建立的文件夹。
c、点击“确定”，这个时候浏览器上就会出现我们程序的图标。


三、为扩展添加代码
现在还不能急，因为我们的扩展程序还没有实际的功能。这一步我们就把扩展程序做成文字一开始图片中的样子。
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、好了，现在工作已经做完了，点击图标试试效果吧。

评论

5 楼 mercyblitz 2010-07-25  

大致明白了意思，也就是Chrome只是页面驱动,没有提供build-in 语言？

4 楼 sentryward 2010-07-24  

呵呵，虽然不做这个，但是文章很不错阿。

3 楼 xiaojiit 2010-07-24  

挺不错的，正想做Chrome的开发呢。

2 楼 镭风【CHN】 2010-01-14  

哎，论坛的人气真是不行。

1 楼 kimmking 2010-01-13  

这个不错，跨域了。