Luke's Note

第一個範例：

將以下程式另存成 manifest.json，放在資料夾裡。

{
  "name": "My First Chrome Extension", // 這個 Extension 的名字
  "version": "1.0", // 版本
  "description": "The first extension that I made.", // extension 的說明
  "permissions": [  // 使用 extension 需要的權限，這裡有指定，所以不是空值。
    "http://api.flickr.com/"
  ],
  "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>

 

 

將以下圖案另存到資料夾裡。

 

 

以上三個檔案都放到資料夾裡後，打開Google Chrome，選擇工具 -> 擴充功能 -> 勾選開發人員模式 -> 選擇載入未封裝擴充功能 -> 選擇檔案所在的資料夾載入即可。

 

參考網站：http://code.google.com/chrome/extensions/getstarted.html