利用firebreath开发跨浏览器插件

在研发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

利用firebreath开发跨浏览器插件

猜你喜欢