一起來玩Google Chrome Extensions

如何擴充Google Chrome的功能

不知道大家是不是有跟我一樣經驗。在開發網路應用程式我都用Firefox來測試開發，說它是最好用的瀏覽器也不為過，它可以依不同需求提供很多小工具，用過就很難再回頭去用那個爛IE了。等到Chrome出來後偶爾會用用，速度快就不用說了(那麼簡單的介面不快就很奇怪了)，可是用久了會上癮，變成不喜歡用Firefox了，習慣Chrome快速跟簡單的操作方式，只是要當成開發測試環境就有點功能不足了，如果只是上上網Chrome會是一個很好選擇。

回到正題，Chrome也要開始提供小工具囉，雖然只是起步還什麼都沒有，但相信不用多久就會有很多很棒的擴充套件可以安裝了。下面就透過一個簡單的範例讓大家了解如何製作Chrome Extensions。

• 
  開始之前請先更新你的Chrome瀏覽器，你必須安裝DEV版本才能安裝寫好的Extensions，先檢查你的瀏覽器，點選右上角的圖示，如果已經有Extensions這個選項就是DEV版本了，找不到的話請至Dev Channel下載更新版本。
  
• 
  準備開始囉，要用什麼方式開發呢，只要會HTML，CSS，JavaScript你就可以開發Chrome Extensions了，不需要什麼困難的程式語言。
  
  這個小範例是抓取flickr的照片
  
• 
  首先建立一個Extensions存放資料夾，例:c:/extensions
  

  Extensions包含哪些檔案

  
  
  • 描述檔(manifest.json)
  • HTML(背景執行的Extensions不需要)
  • JavaScript檔(非必需)
  • 其他檔案，如images(非必需)
  
  
• 
  

  描述檔(manifest.json)

  
  

  {
  "name": "My First Extension",
  "version": "1.0",
  "description": "The first extension that I made.",
  "browser_action": {
  "default_icon": "flickr.png",
  "popup": "popup.html"
  },
  "permissions": [
  "http://api.flickr.com/"
  ]
  }
  

  
  
• 
  準備一個小圖檔(瀏覽器按鈕圖示)，將檔案複製到同一個資料夾，注意檔名要跟manifest.json檔的default_icon相同(粗體字)"default_icon": "flickr.png"，如不同請修改檔名。
  
• 
  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>
  

  
  
• 
  

  啟用你的Extensions

  
  點選右上角的圖示，然後開啟Extensions
  
  點選Load uupacked extension後找到存放完成的Extensions資料夾，確定，完成。
  
• 
  這只是一個很簡單的範例，先玩玩看吧。需要更詳細的資料請至Google Chrome Extensions