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、再次创作的作品必须以相同的许可协议发布。