Chrome擴展編寫一二三

本文轉自：http://dev.meettea.com/show-93-1.html，如果侵權，請告知！

編寫Chrome擴展的兩個示例。

一、QQ雲詞典
QQ雲詞典提供了收藏夾內點擊即可在當前頁面啓動QQ雲詞典的方式。
但是我不太習慣在chrome下使用收藏夾。搜索Google Chrome擴展網站，未果，於是打算自己寫一個。
1、新建一個文件夾。
2、新建一個 manifest.json

內容

 

JavaScript代碼

{
"update_url":"http://clients2.google.com/service/update2/crx",
  "name": "QQ雲詞典",
  "version": "1.0",
  "description": "QQ雲詞典快捷方式，適合不習慣收藏夾啓動雲詞典的用戶使用",
  "browser_action": {
    "default_icon": "favicon.ico",
    "popup": "popup.html"
  },
  "permissions": [
    "tabs", "http://*/*","https://*/*"
  ]
}

3、新建一個popup.html
內容

 

JavaScript代碼

<script>
  chrome.tabs.executeScript(null,
      {code:"void((function(d){if(!!d){d.toggle();return;};var src='http://dict.qq.com/cloudgetjs';var e=document.createElement('script');e.setAttribute('src',src);document.getElementsByTagName('head')[0].appendChild(e);})(window.QQCloudDict))"});
  window.close();
</script>

4、從dict.qq.com下載一個favicon.ico，放文件夾裏
好的代碼是自解釋的，這樣一個擴展就完成了，用zip壓縮後上傳到google
https://chrome.google.com/extensions/detail/gchhncbmgdmgdgbpdmpcclmieekamijo?hl=zh-cn

注BUGs：，可能因爲權限問題，google的https頁和非WEB的tab頁是不能啓動雲詞典的。

二、Bai.Lu網址短縮插件
這麼快就完成了一個插件，意猶未盡啊。看到tank的bai.lu短網址最近改版了，就試試他提供的api看。

1、新建一個文件夾
2、新建一個manifest.json

JavaScript代碼

{
"update_url":"http://clients2.google.com/service/update2/crx",
  "name": "Bai.lu網址短縮",
  "version": "1.0",
  "description": "Bai.lu網址短縮，點擊圖標生成當前頁的短縮網址",
  "browser_action": {
    "default_icon": "favicon.ico",
    "popup": "popup.html"
  },
  "permissions": [
    "tabs", "http://*/*","https://*/*"
  ]
}

3、新建一個popup.html

 

XML/HTML代碼

<meta charset="utf-8" />
<style>
body,#loading{height:26px;width:230px; font-size:12px; overflow:hidden}
#url{display:none; width:220px;}
</style>
<div id="loading">正在壓縮...</div>
<input type="text" id="url" />
<script>
/*獲取當前的TAB頁*/
chrome.tabs.getSelected(null,function(tab) {
    var loading = document.getElementById('loading');
    loading.innerHTML = "正在壓縮"+tab.title+"...";
    /*發起ajax請求，經過permissions設置能請求任意網站是chrome擴展一個很方便的地方*/
    var req = new XMLHttpRequest();
    req.open(
        "GET",
        "http://bai.lu/api?url="+encodeURIComponent(tab.url),
        true
    );
    req.onload = function(){
        var result = 0;
        eval("result = "+req.responseText);
        var url = document.getElementById('url');
        url.style.display='block';
        /*關於api返回的結果請參考http://bai.lu/api_help */
        if(result.status=='ok'){
            document.getElementById('loading').style.display='none';
            url.value = result.url;
            url.select();
            url.focus();
            /*複製功能*/
            document.execCommand('Copy');
            url.value+=' 已複製到剪切板';
        } else {
            var msg = {
                busy:'系統繁忙',
                'invalid url':'URL格式不正確',
                'already shortened':'百路不能被百路',
                error:'發生未知錯誤'
            }
            if(msg[result.status]){
                url.value = msg[result.status];
            } else {
                url.value = '發生未知錯誤';
            }
        }
    }
    req.onerror = function(){
        var url = document.getElementById('url');
        url.style.display='block';
        url.value = '出錯了，也許是百路宕機了';
    }
    req.send(null);
});
</script>

https://chrome.google.com/extensions/detail/legpmlaklpfgcdnbclpabhbhdiickmkh?hl=zh-cn

三、資源、提示與注意事項
1、google的文檔http://code.google.com/chrome/extensions/docs.html 嫌英語麻煩的話可以看他提供的示例，很豐富。
2、能用popup就不要用background，popup佔用瀏覽器的資源少。
3、如果某個功能不會，可直接上google擴展網站在“安裝”按鈕上另存爲並改擴展名爲zip，即可打開源碼研究之。

本文采用Creative Commons協議，複製本文需遵守三點：1、保留署名(鏈接)；2、非商業性使用；3、再次創作的作品必須以相同的許可協議發佈。