利用firebreath开发跨浏览器插件

标签: 利用 firebreath 开发 | 发表时间:2014-09-14 14:33 | 作者:rainsky
分享到:
出处:http://www.iteye.com

在研发ZCMS系统过程中,我们发现很多用户在上传截图时,需要先另存为图片文件然后再选择上传,过程操作复杂。于是我们想通过用户直接粘贴图片到编辑器并上传。要实现这一功能必须实现获取用户剪切板中的图片数据并保存到本地。浏览器本身没有相应的功能,因此我们考虑到用浏览器插件的方式实现。为了兼容各个浏览器,我们选择了frirebreath,实现插件在不同浏览器的通用。

 

首先介绍一下FireBreath。FireBreath 旨在提供一个跨平台支持的浏览器插件体系架构,面向:

  • NPAPI 浏览器(windows, mac, and linux):
    • Gecko/Firefox
    • Google Chrome
    • Apple Safari
  • ActiveX 架构:
    • Microsoft Internet Explorer 6, 7, and 8,9,10,11

下面将分步介绍开发过程。
1.下载最新的FireBreath代码  http://www.firebreath.org/display/documentation/Download
2.下载安装python 2.7  https://www.python.org/downloads/release/python-278/

3.解压FireBreath,并进入目录运行 python fbgen.py
 运行后目录下将生成project目录,并生成相应的文件夹生成后,运行相应的prep*.cmd,比如prep2008.cmd,将生成适应vs2008版本的工程文件


 

 
4.打开sln文件


 
工程中生成了相应的npapi和activex的代码,主要修改对应项目名称目录下的文件即可。
其中***API.cpp和***API.h中定义了相关的示例方法,比如echo方法,我们可以直接编译。对应目录下会生成对应的np***.dll文件。我们可以打开FBControl.htm进行测试。在测试之前,需要注册到浏览器中,firefox和chrome需要通过注册表注册找到HKEY_LOCAL_MACHINE\Software\MozillaPlugins\ ,添加@zvingsoft/ZCMSPastePlugin,并设置path description,以及MimeTypes


 
在firefox和chrome地址栏中输入 about:plugins查看对应的插件是否已经成功安装

 
可以打开FBControl.htm进行测试
 

 
 
 
注意:在ie中需要通过regsvr32对dll注册 
 
5.在***API.h和***API.cpp文件中增加图片保存方法
 
***API.h
//注册方法暴露到js方法中调用
registerMethod("saveClipImage", make_method(this, &ZCMSPastePluginAPI::saveClipImage));

......

FB::variant saveClipImage();

// Event helpers
 FB_JSAPI_EVENT(test, 0
FB_JSAPI_EVENT(saveClipImage, 0, ());
 
 
***API.cpp
FB::variant ZCMSPastePluginAPI::saveClipImage()
{
    if (!OpenClipboard(NULL))
  return "";
 
 HBITMAP hBitmap = (HBITMAP)GetClipboardData(CF_BITMAP);
 CloseClipboard();

 //HWND hWnd = GetDesktopWindow();
 if (hBitmap == NULL)
  return "";
 CImage image;
 image.Attach(hBitmap);
 TCHAR OutPath[MAX_PATH];
    int StrLen = GetTempPath(MAX_PATH, OutPath);
 CString str = CString((LPCTSTR)OutPath) + CString(_T("zcmspaste.png"));
 image.Save((LPCTSTR)str, Gdiplus::ImageFormatPNG); 
    // return "foobar";
    return str;
}
 
 
通过js调用相关方法
     
  function saveClipImage()
        {
            if(plugin().valid){
                var path = plugin().saveClipImage();
                if(!path){
                 alert("剪贴板中没有图片");
                }else{
                 alert("图片已保存:"+path);
                 document.getElementById("test").src = path;
                }
            } else {
                alert("Plugin is not working :(");
            }
        }
 
 
6.为了能够让用户直接使用,建议使用innosetup制作安装文件,下面示例中将dll进行注册,并加入到注册表。
[Files]
Source: "G:\FireBreath1.7\build\bin\ZCMSPastePlugin\Debug\npZCMSPastePlugin.dll"; DestDir: "{app}"; Flags: regserver restartreplace noregerror replacesameversion uninsnosharedfileprompt sharedfile ignoreversion


[Registry]
Root: HKLM; Subkey: Software\MozillaPlugins\@zvingsoft/ZCMSPastePlugin; ValueType: string; Flags: uninsdeletekey
Root: HKLM; Subkey: Software\MozillaPlugins\@zvingsoft/ZCMSPastePlugin; ValueName: Path; ValueData: {app}\npZCMSPastePlugin.dll; ValueType: string
Root: HKLM; Subkey: Software\MozillaPlugins\@zvingsoft/ZCMSPastePlugin; ValueName: Description; ValueData: ZCMS paste image Plugin; ValueType: string
Root: HKLM; Subkey: Software\MozillaPlugins\@zvingsoft/ZCMSPastePlugin\MimeTypes; ValueType: string; Flags: uninsdeletekey
Root: HKLM; Subkey: Software\MozillaPlugins\@zvingsoft/ZCMSPastePlugin\MimeTypes\application/x-zcms-paste-plugin; ValueType: string; Flags: uninsdeletekey
 
 


已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [利用 firebreath 开发] 推荐:

利用firebreath开发跨浏览器插件

- - 开源软件 - ITeye博客
在研发ZCMS系统过程中,我们发现很多用户在上传截图时,需要先另存为图片文件然后再选择上传,过程操作复杂. 于是我们想通过用户直接粘贴图片到编辑器并上传. 要实现这一功能必须实现获取用户剪切板中的图片数据并保存到本地. 浏览器本身没有相应的功能,因此我们考虑到用浏览器插件的方式实现. 为了兼容各个浏览器,我们选择了frirebreath,实现插件在不同浏览器的通用.

基于Firebreath的浏览器插件制作

- - CSDN博客架构设计推荐文章
    在web端需要通过远程桌面服务调用特定服务器上的应用程序,使用户在桌面点击应用程序的图标之后就可以自动启动对应的服务器上的软件使用,为了达到这种功能,要预先生成rdp文件,然后通过mstsc命令或者其它自己开发的应用程序来调用该rdp文件就可以启动远程应用程序. 项目中采用的是自己开发的应用程序来调用该rdp文件,采用到JavaScript调用插件中的函数来实现这一功能,由于IE浏览器的特殊性,IE下采用的ActiveX插件,而对于其它浏览器则是采用Firebreath生成的dll文件.

利用JAX-WS开发Web服务

- - CSDN博客推荐文章
利用JAX-WS开发Web服务.        Web服务是一种经由HTTP与其他软件进行通信的软件. Java最激动人心的一个特性是用于XML Web服务的Java API(JAX-WS). JAX-WS是一组Java类和包,他可以创建对Web服务发出请求的客户端,以及接受这些请求的服务.        JAX-WS支持使用简单对象访问协议(SimpleObject Access Protocol,SOAP)和表述性状态转移(Representational State Transfer,REST)实现的Web服务.

利用Docker构建开发环境

- - UC技术博客
最近接触PAAS相关的知识,在研发过程中开始使用Docker搭建了自己完整的开发环境,感觉生活在PAAS时代的程序员真是幸福,本文会简要介绍下Docker是什么,如何利用Docker来搭建自己的开发环境(本文主要是面向Mac OS X),以及期间所遇到的一些坑和解决方案. (本文会要求你对PAAS、LXC、CGroup、AUFS有一定的了解基础,请自行Google ).

利用现有JavaScript框架还是自主开发​?

- - InfoQ cn
最近,在知名问答网站 知乎上,国内社区的开发人员们讨论了如何在利用现有JavaScript框架还是自己开发工具库中做出正确的选择. 起初,有开发人员在知乎上提出了一个 问题——在掌握了JavaScript基础知识和了解了类似jQuery等框架之后,JavaScript 开发人员在哪些情况下,应该选择开发自己的框架(库),而不去使用现有的工具.

利用 Grunt (几乎)无痛地做前端开发 (一)

- - 阿里巴巴(中国站)用户体验设计部博客
如果你想开发一个js应用,甭管多简单,都要先创建整个宇宙. 来看看我们的Javascript小宇宙:. 确定如何根据需求、功能划分模块,如何将代码分成多个文件开发,合成一个发布. 保证上一条的同时,使用 Coffeescript、SCSS/LESS 等技术. 保证上2条的同时,想想怎么在浏览器的刷新后一切都最新.

看开发者利用Glass的工具包都做了什么

- - PingWest
在西南偏南大会上(SXSW),Google首次开放了它的Glass Mirror API接口. 今天, 据The Verge的报道,Glass团队又进一步开放了Glass开发者工具包(GDK). 现在,开发者可以调用这个新工具,为Google Glass设计相关的App了. 开发者工具包相比Mirror API,有许多不同的特性.

利用jsdoc和idea加速javascript开发(一)

- - JavaScript - Web前端 - ITeye博客
当项目里的js代码到达一定规模后, js的开发会变成一个很头痛的问题, 由于没有静态类型语言的类型支持,很少有IDE能够对js代码提供有效的代码补全,方法和参数错误检查等功能. 想要在几万行js代码弄清楚某一个变量应该是什么类型, 有什么方法, 方法的参数是什么, 返回值是什么是件很令人头痛的事情.

有板有眼:Google如何利用Moto的专利来帮助Android开发商?

- Leo - 对牛乱弹琴 | Playin&#39; with IT
问:Google如何利用收购Moto所获得的专利来帮助Android开发商. HTC、三星还会继续向微软支付专利费用吗. 答:Android现在面临的专利勒索,主要来自苹果、微软和甲骨文,除甲骨文直接起诉Google,其他厂商都是绕开Google向Android设备制造商下手. 这些设备商往往因缺乏专利储备,在专利诉讼或专利敲诈中被迫屈服,如微软向Android设备商索取每台设备5-15美元的专利授权费,这让Android的成本优势不复存在.

厉害了,利用深度学习开发老板探测器(附源码)

- - IT瘾-bigdata
深度学习如果上班的时候想放松一下,或者直说想偷偷懒,看点和工作无关的网页,这时候万一老板突然出现在背后,会不会感到很难堪呢?. 有的浏览器设置了boss按键,手快的人还可以切换屏幕,不过总会显得不自然,而且经常搞的手忙脚乱的. 一个日本程序员决定自己动手,编写一个一劳永逸的办法,我们来看看他是怎么实现的吧~.