常见浏览器扩展开发笔记(chrome firefox 360 baidu qq sougou liebao uc opera)
2016-08-16 20:41
686 查看
浏览器扩展开发貌似时下很冷门啊,但是不少企业还是有类似的应用,360的抢票插件啊,笔者最近在做的网页翻译扩展之类的。笔者在开发的过程中,遇到了不少坑,说是坑,说白了就是各个厂商支持的API不统一导致的。
经过总结,发现有三大阵营:
针对不同浏览器的开发中遇到的坑或经验和兄弟们交流下,不足之处,敬请批评指正:
一.chrome
不予评价,目前感觉比较完美
二.sougou
因为没有像chrome开发者模式那样的重新加载插件文件,因此开发调试比较费劲,你需要参阅官方文档,cmd命令%appdata%下面去找安装OK的插件源码,改一下,禁用再启用,你修改的代码才能生效,并且不便于调试被安装时,更新时这样的监听业务
三.liebao
因木鱼的抢票插件而闻名,其实力不容小觑。支持很好,就有几个API支持不好,自己实现以下,基本没啥问题
四.firefox
完全是独立的一套东东,包括background到content及到网页的通信流程,笔者在开发的时候反正是比较费劲的,因为安全性的问题,解决了一些跨域问题,其核心代码如下:
JS客户端(在ajax请求中请包含xhrFields信息):
服务端(响应头包含如下写法形式):
五.Safari
笔者正在开发中,开发结束后吐槽,修改本文。。。
下面是笔者总结的chrome系和firefox系的插件内部通信方式的简要总结(该通信方式为笔者的风格,如有更好的建议,请留言共同进步):
*chrome系通信方式
![](https://oscdn.geek-share.com/Uploads/Images/Content/201608/16/2ff3a573315bb2edba2c2801e910d97f.png)
*firefox系通信方式
因笔者在开发firefox时水平有限,只能用以下通信策略
![](https://oscdn.geek-share.com/Uploads/Images/Content/201608/16/e7970cc9b378496ccc3954d6a04547a6.png)
通信方式1:
消息发送方:
消息接受方:
通信方式(通道通信)2
消息发送方:
消息接受方:
通信方式3
消息发送方:
消息接受方:
有感而发:既不回头,何必不忘?既然无缘,何须誓言?今日种种,似水无痕;明夕何夕,君已陌路;向来缘浅,奈何情深;既然琴瑟起,何以笙箫默!
最后,送上一句鸡汤:生活除了眼前的苟且,还有诗和远方!
经过总结,发现有三大阵营:
Chrome系 | |
Chrome | 各种友好,你想要的API它基本都有,谁叫人是谷歌呢 |
360 | 国产浏览器中比较NB的,有极速和兼容2中模式,如果你开发完了chrome的扩展,直接copy过去,基本不用大改 |
Baidu | qq浏览器,不予评价,论copy能力,马寨主手下的兄弟们这方面绝对不逊色与任何一家公司的能力,chrome扩展copy过去没问题 |
QQ | 百度算是一个中等偏上的浏览器,其内核估计也是chrome的,因为chrome的扩展,直接copy过去,基本也能用 |
UC | 现在uc属于阿里系,肯定好使,各种兼容啊,chrome的copy过去,基本没啥问题 |
Opera | opera是挪威的,就像Linux诞生于美丽的芬兰一样,全球性产品。chrome扩展直接可以支持 |
Sougou | 搜狗嘛,我得吐槽一下了,你说你copy也copy的不完全,连浏 览器网页语言识别这样的基础API都不支持,但是还行,chrome的API基本支持90%,改改能用 |
liebao | 猎豹嘛,和搜狗一样一样滴,貌似网页语言识别API也不支持,chrome的API支持占比高于95%,比搜狗略屌,chrome扩展改改也能用 |
Firefox系 | |
Firefox | 要不是有14%以上的市场占有率,我他喵的才不鸟你呢,各种恶心,各种不支持,48及以上版本开始支持webExtensions标准了,在向chrome靠拢,点赞 Safari系 |
Safari系 | |
Safari | 你开发苹果的任何东西,你得先有资格,99美刀拥有一个个人开发者账号,再去搞一个证书,就可以开发了,苹果没有开放的情怀,也就那回事,踩踩 |
一.chrome
不予评价,目前感觉比较完美
二.sougou
因为没有像chrome开发者模式那样的重新加载插件文件,因此开发调试比较费劲,你需要参阅官方文档,cmd命令%appdata%下面去找安装OK的插件源码,改一下,禁用再启用,你修改的代码才能生效,并且不便于调试被安装时,更新时这样的监听业务
三.liebao
因木鱼的抢票插件而闻名,其实力不容小觑。支持很好,就有几个API支持不好,自己实现以下,基本没啥问题
四.firefox
完全是独立的一套东东,包括background到content及到网页的通信流程,笔者在开发的时候反正是比较费劲的,因为安全性的问题,解决了一些跨域问题,其核心代码如下:
JS客户端(在ajax请求中请包含xhrFields信息):
$.ajax({ url: languageTypeUrl, type: 'POST', xhrFields: { 'Access-Control-Allow-Origin': '*' }, success: function(data) { //called when successful if(data != null){ // console.log(data); //获取成功后,将列表信息发送到background缓存起来 chrome.runtime.sendMessage({action:"languageType2Cache",data:data},function(response){}); } }, error:function(XMLHttpRequest, textStatus, errorThrown){ console.log(XMLHttpRequest.status); console.log(XMLHttpRequest.readyState); console.log(textStatus); } });
服务端(响应头包含如下写法形式):
response.setHeader("Access-Control-Allow-Origin", "*");
五.Safari
笔者正在开发中,开发结束后吐槽,修改本文。。。
下面是笔者总结的chrome系和firefox系的插件内部通信方式的简要总结(该通信方式为笔者的风格,如有更好的建议,请留言共同进步):
*chrome系通信方式
![](https://oscdn.geek-share.com/Uploads/Images/Content/201608/16/2ff3a573315bb2edba2c2801e910d97f.png)
*firefox系通信方式
因笔者在开发firefox时水平有限,只能用以下通信策略
![](https://oscdn.geek-share.com/Uploads/Images/Content/201608/16/e7970cc9b378496ccc3954d6a04547a6.png)
通信方式1:
消息发送方:
chrome.runtime.sendMessage({action:show_plugin_action,hello:world},function(response){});
消息接受方:
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) { //插件显示/移除动作监听 if (request.action == "show_plugin_action") { //do sth xxx(request.hello); } }); function(param){ console.log(param); } //控制台 world
通信方式(通道通信)2
消息发送方:
function() { window.parent.postMessage({ action: "ACTION_HELLO", hello:"world" }, "*"); });
消息接受方:
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent"; var eventer = window[eventMethod]; var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message"; eventer(messageEvent, function(e) { if(e.data.action=="ACTION_HELLO"){ // 查看原文 console.log(e.data.hello); } }, false);
通信方式3
消息发送方:
// Connect to the background page. var port = chrome.runtime.connect(); port.postMessage({ action:"ACTION_HELLO", hello:"world" },"*");
消息接受方:
chrome.runtime.onConnect.addListener(function (port) { port.onMessage.addListener( function(msg){ if(msg.action=="ACTION_HELLO"){ console.log(msg.hello); } } ); });
有感而发:既不回头,何必不忘?既然无缘,何须誓言?今日种种,似水无痕;明夕何夕,君已陌路;向来缘浅,奈何情深;既然琴瑟起,何以笙箫默!
最后,送上一句鸡汤:生活除了眼前的苟且,还有诗和远方!
相关文章推荐
- 目前Lodop支持IE系列、IE内核系列(遨游、360、世界之窗、腾讯TT、搜狗等)浏览器,以及Firefox(火狐)系列、Chrome(谷歌)系列、Opera系列、Safari系列等Windows下
- FireFox插件和扩展开发(四)——常见问题的解决
- Firefox、IE、Safari、Chrome、Opera浏览器之差异
- chrome、firefox和opera中最受欢迎的10个扩展
- android 跳转指定浏览器访问指定页面(支持UC、Opera、QQ、Dolphin、Skyfire、Steel、Google)
- 多图片上传+图片预览,兼容所有浏览器 IE5/IE6/IE7/IE8/IE9/Chrome/Safari/Firefox/Opera/
- Firefox扩展开发笔记 - 关于locale的使用(一)
- 【分享】Firefox和Chrome扩展开发
- 各种浏览器(IE,Firefox,Chrome,Opera)COOKIE修改方法[转]
- Firefox(火狐)浏览器扩展开发初探
- javascript小组件 原生脚本排序table表格兼容ie firefox opera chrome 浏览器
- Firefox扩展开发笔记 - 关于locale的使用(二)
- 【分享】Firefox和Chrome扩展开发
- 指定浏览器访问指定页面(支持UC、Opera、QQ、Dolphin、Skyfire、Steel、Google)
- jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
- 支持所有浏览器的复制文本到剪切板的ASP代码(IE/Firefox/Opera/netscape/chrome/safari)
- jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
- CSS3 应用01 - 文本阴影效果(兼容IE 7-9 Firefox Opera Chrome 等多浏览器)
- 多图片上传+图片预览,兼容所有浏览器 IE5/IE6/IE7/IE8/IE9/Chrome/Safari/Firefox/Opera/
- 浏览器之争:Chrome、Firefox、IE、Opera、Safari