常见浏览器扩展开发笔记(chrome firefox 360 baidu qq sougou liebao uc opera)

浏览器扩展开发貌似时下很冷门啊,但是不少企业还是有类似的应用,360的抢票插件啊,笔者最近在做的网页翻译扩展之类的。笔者在开发的过程中,遇到了不少坑,说是坑,说白了就是各个厂商支持的API不统一导致的。

经过总结,发现有三大阵营:


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系通信方式

*firefox系通信方式

因笔者在开发firefox时水平有限,只能用以下通信策略

通信方式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);
              }

        }
    );
});    

有感而发:既不回头,何必不忘?既然无缘,何须誓言?今日种种,似水无痕;明夕何夕,君已陌路;向来缘浅,奈何情深;既然琴瑟起,何以笙箫默!

最后,送上一句鸡汤:生活除了眼前的苟且,还有诗和远方!

时间: 2024-10-10 06:51:21

常见浏览器扩展开发笔记(chrome firefox 360 baidu qq sougou liebao uc opera)的相关文章

Chrome浏览器扩展开发系列之十四:本地消息机制Native messagin

Chrome浏览器扩展开发系列之十四:本地消息机制Native messaging 2016-11-24 09:36 114人阅读 评论(0) 收藏 举报  分类: PPAPI(27)  通过将浏览器所在客户端的本地应用注册为Chrome浏览器扩展的"本地消息主机(native messaging host)",Chrome浏览器扩展还可以与客户端本地应用之间收发消息. 客户端的本地应用注册为Chrome浏览器扩展的"本地消息主机"之后,Chrome浏览器会在独立的

Chrome浏览器扩展开发系列之十四

Chrome浏览器扩展开发系列之十四:本地消息机制Native messaging 时间:2015-10-08 16:17:59      阅读:1361      评论:0      收藏:0      [点我收藏+] 通过将浏览器所在客户端的本地应用注册为Chrome浏览器扩展的"本地消息主机(native messaging host)",Chrome浏览器扩展还可以与客户端本地应用之间收发消息. 客户端的本地应用注册为Chrome浏览器扩展的"本地消息主机"

Chrome浏览器扩展开发系列之九:Chrome浏览器的chrome.alarms.* API

Chrome浏览器扩展程序通过chrome.alarms.* API,可以制定计划周期性地执行代码,或在指定时间执行代码. 要使用chrome.alarms.* API,首先需要在manifest.json文件中声明alarms授权如下: { "permissions": [ "alarms" ], } chrome.alarms.Alarm对象的属性如下: 属性名 类型 必选/可选 注释 name string 必选 alarm的名字 scheduledTime

Chrome扩展开发之三——Chrome扩展中的数据本地存储和下载

目录: 0.Chrome扩展开发(Gmail附件管理助手)系列之〇——概述 1.Chrome扩展开发之一——Chrome扩展的文件结构 2.Chrome扩展开发之二——Chrome扩展中脚本的运行机制和通信方式 3.Chrome扩展开发之三——Chrome扩展中的数据本地存储和下载 4.Chrome扩展开发之四——Gmail API的简单介绍 5.Chrome扩展开发之五——OAuth2的理解 6.Chrome扩展开发之六——GmailAssist核心功能的实现(包括Gmail API的使用中的

Chrome浏览器扩展开发系列之十九:扩展开发示例

翻译总结了这么多的官网内容,下面以一款博主开发的“沪深股票价格变化实时追踪提醒”软件为例,介绍Chrome浏览器扩展程序的开发,开发环境为Eclipse IDE+Chrome Browser. “沪深股票价格变化实时追踪提醒”软件能够实时获取用户指定的股票的价格等参数,并根据用户设置的价格区间进行越界提醒.该软件目前只实现了两部分,一个是options页面,用以配置用户要监听的股票及股票的价格区间.另一个是browser action类型的popup页面,供用户查看股票当前价格,并通过图标的Ba

Chrome浏览器扩展开发系列之八:Chrome扩展的数据存储

Google Chrome浏览器扩展可以使用如下任何一种存储机制: HTML5的localStorage API实现的本地存储(此处略) Google的chrome.storage.* API实现的浏览器存储 Google的chrome.cookies.* API实现的cookie存储 1) chrome.storage API实现的浏览器存储 Chrome浏览器扩展通过chrome.storage.* API,可以存取数据或监听数据的变化. 在manifest.json文件中注册storage

Chrome浏览器扩展开发系列之十七:扩展中可用的chrome.events API

chrome.events中定义了一些常见的事件类型,可以供Chrome浏览器扩展程序发出对应的事件对象. 对于关注的事件,首先要通过addListener()在对应的事件上注册监听器,示例如下: 1 chrome.alarms.onAlarm.addListener(function(alarm) { 2 appendToLog('alarms.onAlarm --' 3 + ' name: ' + alarm.name 4 + ' scheduledTime: ' + alarm.sched

Chrome浏览器扩展开发系列之十八:扩展的软件国际化chrome.i18n API

i18n是internationalization 的简写,这里将讨论软件国际化的问题.熟悉软件国际化的朋友应该知道,软件国际化要求,页面中所有用户可见的字符串都必须置于资源属性文件中.资源属性文件中的资源是形如“key=value”的键值对,一行一个.其中key为资源的标识符,用于HTML页面中,根据当前页面的Locale确定要使用的资源.value是资源的值,不同的Locale对应的资源值不同,在资源文件中统一用Unicode编码. 通过chrome.i18n API和相关的资源配置文件,可

Chrome浏览器扩展开发系列之十二:Content Scripts

Content Scripts是运行在Web页面的上下文的JavaScript文件.通过标准的DOM,Content Scripts 可以操作(读取并修改)浏览器当前访问的Web页面的内容. Content Scripts通常用于如下场景: 找到Web页面中的无效链接并修复 增大字体以突出显示 查找并处理DOM中的microformat Content Scripts的使用限制条件: 不能访问如下chrome.* API chrome.extension API chrome.i18n API