Chrome扩展编写实例  

编写Chrome扩展的两个示例。

一、QQ云词典
QQ云词典提供了收藏夹内点击即可在当前页面启动QQ云词典的方式。
但是我不太习惯在chrome下使用收藏夹。搜索Google Chrome扩展网站，未果，于是打算自己写一个。
1、新建一个文件夹。
2、新建一个 manifest.json

内容

 

JavaScript代码
  1. {   
  2. "update_url":"http://clients2.google.com/service/update2/crx",     
  3.   "name": "QQ云词典",     
  4.   "version": "1.0",     
  5.   "description": "QQ云词典快捷方式，适合不习惯收藏夹启动云词典的用户使用",     
  6.   "browser_action": {     
  7.     "default_icon": "favicon.ico",   
  8.     "popup": "popup.html"  
  9.   },   
  10.   "permissions": [   
  11.     "tabs", "http://*/*","https://*/*"  
  12.   ]   
  13. }  

3、新建一个popup.html
内容

 

JavaScript代码
  1. <script>   
  2.   chrome.tabs.executeScript(null,   
  3.       {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))"});   
  4.   window.close();   
  5. </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代码
  1. {   
  2. "update_url":"http://clients2.google.com/service/update2/crx",     
  3.   "name": "Bai.lu网址短缩",     
  4.   "version": "1.0",     
  5.   "description": "Bai.lu网址短缩，点击图标生成当前页的短缩网址",     
  6.   "browser_action": {     
  7.     "default_icon": "favicon.ico",   
  8.     "popup": "popup.html"  
  9.   },   
  10.   "permissions": [   
  11.     "tabs", "http://*/*","https://*/*"  
  12.   ]   
  13. }  

3、新建一个popup.html

 

XML/HTML代码
  1. <meta charset="utf-8" />  
  2. <style>  
  3. body,#loading{height:26px;width:230px; font-size:12px; overflow:hidden}   
  4. #url{display:none; width:220px;}   
  5. </style>  
  6. <div id="loading">正在压缩…</div>  
  7. <input type="text" id="url" />  
  8. <script>  
  9. /*获取当前的TAB页*/   
  10. chrome.tabs.getSelected(null,function(tab) {   
  11.     var loading = document.getElementById('loading');   
  12.     loading.innerHTML = "正在压缩"+tab.title+"…";   
  13.     /*发起ajax请求，经过permissions设置能请求任意网站是chrome扩展一个很方便的地方*/   
  14.     var req = new XMLHttpRequest();   
  15.     req.open(   
  16.         "GET",   
  17.         "http://bai.lu/api?url="+encodeURIComponent(tab.url),   
  18.         true   
  19.     );   
  20.     req.onload = function(){   
  21.         var result = 0;   
  22.         eval("result = "+req.responseText);   
  23.         var url = document.getElementById('url');   
  24.         url.style.display='block';   
  25.         /*关于api返回的结果请参考http://bai.lu/api_help */   
  26.         if(result.status=='ok'){   
  27.             document.getElementById('loading').style.display='none';   
  28.             url.value = result.url;   
  29.             url.select();   
  30.             url.focus();   
  31.             /*复制功能*/   
  32.             document.execCommand('Copy');   
  33.             url.value+=' 已复制到剪切板';   
  34.         } else {   
  35.             var msg = {   
  36.                 busy:'系统繁忙',   
  37.                 'invalid url':'URL格式不正确',   
  38.                 'already shortened':'百路不能被百路',   
  39.                 error:'发生未知错误'   
  40.             }   
  41.             if(msg[result.status]){   
  42.                 url.value = msg[result.status];   
  43.             } else {   
  44.                 url.value = '发生未知错误';   
  45.             }   
  46.         }   
  47.     }   
  48.     req.onerror = function(){   
  49.         var url = document.getElementById('url');   
  50.         url.style.display='block';   
  51.         url.value = '出错了，也许是百路宕机了';   
  52.     }   
  53.     req.send(null);   
  54. });   
  55. </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，即可打开源码研究之

欢迎大佬支持本博客的发展 -- Donate --

本文链接：Chrome扩展编写实例

转载声明：本站文章若无特别说明，皆为原创，转载请注明来源：三十岁，谢谢！^^


分享到：          

  1. 没有评论

  1. 没有通告