【教程】如何开发 Chrome 扩展（入门篇）

本文发布于 14 年前，部分内容可能已经失去参考价值。

本文介绍了如何开发一个简单的 Chrome 扩展(extension)。我们要实现我的功能是，当点击图标时显示一个动态的页面（层），效果如下：

安装 Chrome

虽然开发完成的扩展能在“稳定版”谷歌浏览器中使用，但是你必需安装“开发版”谷歌浏览器才能完成开发调试工作。

创建扩展

这一步，我们要在 Chrome 的工具栏上添加一个扩展的图标。

1，在你电脑上的任意位置创建一个文件夹。

2，在该文件夹下创建一个文本文件，并改名为“manifest.json”，然后添加内容：

{
  "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，加载扩展。

点击 Chrome 工具栏上的扳手按钮，选择“扩展程序(E)”
在打开的页面右侧点击“开发人员模式”
点击“载入正在开发的扩展程序”，浏览到刚才创建的文件夹目录，点击确定。

不出意外，Chrome 工具栏上将显示刚才的图标，但是现在点击它没有任何反应，我们继续。

5，这一步，我们要让它弹出一个页面，并显示一些内容。

打开“manifest.json”文件，找到

  "browser_action": {
    "default_icon": "icon.png"
  },

替换为

  "browser_action": {
    "default_icon": "icon.png",
    "popup": "popup.html"
  },

保存关闭。

然后创建一个名为“popup.html”的文件，内容是：

<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>