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

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

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

这一步，我们要在 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>

• 回到“扩展程序”页面，找到正在开发的扩展，点击“重新载入”。
• 现在再点击 Chrome 工具栏上的图标试试。

如果没有出现应有效果，请再仔细检查每一步骤。怎么样，非常简单吧！