Pages

2009年12月7日 星期一

一起來玩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

本著作係採用創用 CC 「姓名標示─非商業性─相同方式分享 2.5 台灣版」授權條款釋出。

沒有留言: