首页 > 其他分享 >NPAPI和PPAPI开发

NPAPI和PPAPI开发

时间：2022-12-26 14:35:00浏览次数：39  
标签：插件 chrome nacl 开发 PPAPI cpp NPAPI hello

环境：

 [1]Visual Studio 2010 SP1
    Visaul Stuio  2013 Update4
 [2]Python2.7
 [3]Firefox 41.0.1
 [4]IE 11
 [5]Google chrome 45.0.2454.101 
 [6]Opera 32.0
 [7]360浏览器 7.1.1.808
 [8]nacl sdk pepper39 
 [9]windows7 SP1 64bits


关键词

   Firebreath, NPAPI, PPAPI, Web worker, Messaging System, Native Client Module, Application Structure
   Chrome Web Store, portable executable file, architecture-specific executable file 
   

前言  

    如果要实现Windows平台，跨不同浏览器插件，就需要分别实现
    ActiveX  适用浏览器IE11，因为IE11对FireBreath兼容性不是很好。
    FreBreath(NPAPI)  适用浏览器,360浏览器，Chrome 42版本以下，Opera、Firefox。
    NaCl(可分为PPAPI、NaCl、PNaCl三个等级) 适用浏览器Chrome 42版本或以上。
    ActiveX的baidu上很多，但是NPAPI和PPAPI的很不完善，所以这里仅仅介绍NPAPI和PPAPI的开发。


第一部份：NPAPI



第一个插件(NPAPI)：
   firebreath是个跨浏览器插件开发工具，所以先尝试FireBreath。
Step1:
  参考资料[3]下载firebreath最新稳定版本，并解压到“D:SDKfirebreath-FireBreath-105dcc6”目录下
  从官网上下载firebreath-boost-1.50.0.zip
  位置参考下面摆放：
  <FB_ROOT>/src/3rdParty/boost/boost/
  <FB_ROOT>/src/3rdParty/boost/libs/


Step2:先建一个Hello工程。
 打开控制台，切换到“D:SDKfirebreath-FireBreath-105dcc6”文件夹，
   输入命令“python fbgen.py”根据提示输入你第一个工程plugin name,plugin description,company name等信息。
   命令执行完毕后，再调用“prep2010.cmd”命令。
   python就在当前build子目录下建好了VS2010 solution，FireBreath.sln文件。
  打开sln后应该就能正确编译。如果有问题参考资料[1]。


Step3:测试插件是否正确加载。
[S3-1]IE下运行插件。
  命令行方式转到“D:SDKfirebreath-FireBreath-105dcc6uildinhelloDebug”路径下，使用“regsvr32 nphello.dll”注册控件。
  "D:SDKfirebreath-FireBreath-105dcc6uildprojectshellogen"路径下打开“FBControl.htm”文件，就可以在IE中正常运行hello控件。
  如果有问题，参考资料[2]。
[S3-2]Firefox下运行插件
  我是把dll复制到“C:UserskagulaAppDataRoamingMozillaFirefoxProfilesie1ypj6h.defaultplugins”路径就Ok了，如果没有“plugins”目录就新建一个。
  不同的计算机Win7下，参考下面的格式就Ok了。
  “C:UsersXXXAppDataRoamingMozillaFirefoxProfilesXXX.defaultplugins”
[S3-3]Chrome下运行
  Chrome 45 不支持NPAPI。
[S3-4]Opera下运行
  使用“regsvr32 nphello.dll”注册控件后，可以直接使用，
但是会提示“此网站使用的插件很快将不被支持”
[S3-5]360浏览器下运行
  使用“regsvr32 nphello.dll”注册控件后，可以直接使用，


Step4:测试插件功能是否正常
 [1]hello.cpp的FB::JSAPIPtr hello::createJSAPI()函数，创建了helloAPI实例返回。
 查看helloAPI实现，
  echo方法用来示例参数传递，testEvent方法示例事件回调，testString和version示例如何存取对象的属性。
 [2]FBControl.htm文件，点击“Fire a test event”会间接调用helloAPI实例的testEvent方法，这个方法又会激活JS的test事件。
  在IE中没有反应，但是在Opera和360浏览器中测试正常。
 [3]FBControl.htm文件，点击“Activate click counter”，就多一次对插件echo事件的绑定。
    然后，再点击“Click me!”，JS会调用插件的echo方法，而插件的echo方法会调用js对echo事件的绑定function。
    在IE中依旧没有反应。
 [4]测试插件属性的存取，
  [S4-1]为FBControl.htm文件，添加一个js函数。
    function testPluginPropertyAccess()
{
alert(plugin().testString);
plugin().testString = "插件属性的默认值已经被JS修改";
alert(plugin().testString);
}
   为FBControl.htm文件，添加一个链接，可以让用户点击。
   <a href="#" onclick="javascript:testPluginPropertyAccess()">测试对属性值的修改</a> <br />
   [S4-2]修改helloAPI.h文件，在helloAPI的构造函数中添加下面的代码。
   m_testString = "Default value in c++";
   这样我们才能知道这个属性的值是来自C++代码的。
   [S4-3]然后再参考上文，测试即可。
 [Step5]验证是否能自绘区域
   一开始在"hello"项目上onWindowAttached死活不会来，后来又重建了一个firegbreath项目就好了。
   猜测是用fbgen.py新建项目时，输入的参数不对。
   下面是我的测试函数，我往plugin api里注册了“draw”函数，用来测试能否绘制html表面。
   void helloAPI::draw()
{
if (_wnd) {
HDC hDC = GetDC(_wnd->getHWND());


RECT rect;
rect.left=0,rect.top=0,rect.right=256,rect.bottom=256;


HBRUSH hbr;
hbr = CreateSolidBrush(RGB(255,0,0));
FillRect(hDC,&rect,hbr);


ReleaseDC(_wnd->getHWND(),hDC);
}
}


    具体参考“...firebreath-FireBreath-105dcc6examplesBasicMediaPlayer”目录下的源代码。


备注
 [1]Firebreath缺省没有连接下面两个事件：
EVENTTYPE_CASE(FB::RefreshEvent, draw, FB::PluginWindow);
EVENTTYPE_CASE(FB::WindowsEvent, onWindowEvent, FB::PluginWindow)  

第二部份：PPAPI

  Chrome插件只能使用PPAPI接口的Native Client(NaCl)方式编写，
Native Client分别有三种embed类型
  “application/x-ppapi”，平台相关，唯一能直接使用win32 api的platfrom（有功能上的限制）。  dll格式，
                                不允许通过Chrome web store分发。据说Flash就是采用第一种类型开发的。
  “application/x-nacl”， 只能通过PPAPI，平台无关，cpu相关。nexe格式，只能通过Chrome web store分发。
  “application/x-pnacl”，只能通过PPAPI，平台无关，cpu无关。pexe格式，可以不通过Chrome web store分发。  
  为了减少麻烦，建议系统只安装Visual Studo 2010版。


跟着官网先学习第一个PPAPI插件(Native Client)的开发流程
   首先参考
  《C++ Tutorial: Getting Started 》
  https://developer.chrome.com/native-client/devguide/tutorial/tutorial-part1
  建立，运行，修改自己的第一个portable native client程序，这样就先有了个概念。
  按照tutorial一步步走是没有问题了，但是
  
如何在VS中开发、调试native client程序？
你需要为nacl sdk安装vs_addin。
官网文档上说vs_addin只支持vs2010sp1和vs2012，但是经过修改能支持vs2013，但是不建议折腾。
[Step1]设置当前计算机用户变量
  NACL_SDK_ROOT环境变量为“E:SDK acl_sdkpepper_39”。
  CHROME_PATH环境变量为“C:Program Files (x86)GoogleChromeApplicationchrome.exe”。
[Step2]管理员权限启动控制台转到“E:SDK acl_sdkvs_addin”路径下，输入“Install”命令安装“vs_addin”。
  以后你还可以通过输入“Install  --uninstall”命令来反安装。
[FinalStep-PPAPI]现在可以转到“E:SDK acl_sdkvs_addinexampleshello_world_gles”目录，使用VS2010打开hello_world_gles solution。
  platform从默认“NaCI32”改为“PPAPI”即可编译通过，会在当前project路径下产生win目录，win目录下会生成hello_world_gles.dll文件。
  直接按[F5]就可以Debug這個dll，在VisualStudio中进入断点。
[FinalStep-NaCl64]platform从默认“NaCI32”改为“NaCI64”,
          project property page should be
          [General]->[Native Client]->[IndexPage of NaCl Application]->[index_newlib.html]
          [General]->[Native Client]->[Toolchain]->[newlib]
          在当前项目NaCl64 ewlibDebug路径下只生成一个hello_world_gles_64.nexe文件，所以调试针对的是这个文件。
          由于这个文件是虚拟代码（据说运行前会转成机器码）所以只能用nacl sdk带的gdb来调试。
          [F5]启动Debug，默认打开index_newlib.html页面，启动gdb控制台后就可以命令行方式调试了。
          你可能需要设置chrome启用NaCl，授权Chrome能够使用未经Chrome Web Store发布的nexe文件。
[FinalStep-PNaCl]platform从默认“NaCI32”改为“PNaCl”，会在当前项目下编译输出一个pexe文件和三个针对不同cpu的nexe文件，VS中[F5]不会进入Debug、break模式。
  
  备注：
   [1]具体参考官方vs-addin文档。  https://developers.google.com/native-client/dev/devguide/devcycle/vs-addin  
   [2]在啟動chrome調試前，勾選F12->Settins->General->Disable cache（while DevTools is open）防止html緩存。
  
如何部署pexe格式控件到chrome上？
[Step1]先检查PNaCI是否在chrome中启用（默认已经安装）
    在chrome中addressbar中使用“chrome://nacl/”查看是否允许PNaCI插件。如果没有安装相应component，可以输入“chrome://components”在compoennts页面中安装或更新。
[Step2]假设"E: ginx-1.8.0html"是你Web服务器的webroot路径，把“E:SDK acl_sdkpepper_39getting_startedpart1”目录下的
    hello_tutorial.nmf和hello_tutorial.pexe两个文件复制到"E: ginx-1.8.0html"。把“index.html”重命名为“hello_tutorial.html”并复制到webroot路径中。
    现在你的webroot路径中已经有了“hello_tutorial.nmf”、“hello_tutorial.pexe”和“hello_tutorial.html”三个文件。
[FinalStep]在chorme中输入“http://localhost:8080/hello_tutorial.html”打开pexe测试页面，测试成功。
    
如何运行vs_addin自带的hello_nacl_cpp项目？
[Step1]用vs2010打开hello_nacl_cpp项目后，修改好代码后，选择PNaCl平台编译出pexe和nexe文件。
[Step2]在“E:SDK acl_sdkpepper_39examples”路径下新建“hello_nacl_cpp”目录。
[Step3]复制“E:SDK acl_sdkvs_addinexampleshello_nacl_cpphello_nacl_cppPNaCl ewlibDebug”路径下的pexe、nexe扩展名的四个文件
       到新建的“E:SDK acl_sdkpepper_39exampleshello_nacl_cpp”路径下面。
       复制“E:SDK acl_sdkvs_addinexampleshello_nacl_cpphello_nacl_cppindex.html”文件到新的路径下。
       复制“E:SDK acl_sdkvs_addinexampleshello_nacl_cpphello_nacl_cppPNaClhello_nacl_cpp.nmf”文件到新的路径下。
[Step4]修改新路径下的index.html，把embed元素中的type属性从“application/x-nacl”改为“application/x-pnacl”。
       因为PNaCl插件mime type只能为“application/x-pnacl”。
       修改新路径下的hello_nacl_cpp.nmf文件，使之支持pexe，并能从当前目录读取pexe文件，修改后的内容如下：
       {
 "files": {},
 "program": {
   "portable": {
     "pnacl-translate": {
       "url": "hello_nacl_cpp.pexe"
     }
   },
   "x86-64": {
     "url": "hello_nacl_cpp_64.nexe"
   },
   "arm": {
     "url": "hello_nacl_cpp_arm.nexe"
   },
   "x86-32": {
     "url": "hello_nacl_cpp_32.nexe"
   }
 }
}
[FinalStep-PNaCl方式]
       在控制台下启动“E:SDK acl_sdkpepper_39exampleshttpd.cmd”程序。
       在chrome中输入“http://localhost:5103/hello_nacl_cpp/”成功打开测试页面。


       
如何新建NaCl项目
在visual studio中新建C++ Empty Project
設置項目屬性為[General]->[Project Defaults]->[Configuration Type]->[Dynamic Library(.dll)]。
新建好项目后，就可以添加源代码文件开始编程。
这里没有从新的C++ Dll Empty Project开始，是因为这个wizard会引入很多win32定义导致NaCl64平台编译失败，修改起来太麻烦。


示例代码有两种风格，第一种参考“vs_addinexamples”下的hello_nacl_cpp项目，第二种参考“hello_world_gles”项目，
开发包自带的例子基本上都属于这种风格。
典型的代码如下：
  1. #include "ppapi/cpp/instance.h"  
  2. #include "ppapi/cpp/module.h"  
  3. #include "ppapi/cpp/var.h"  
  4.   
  5.   
  6. class MyInstance : public pp::Instance {  
  7. public:  
  8.     explicit MyInstance(PP_Instance instance) : pp::Instance(instance)  
  9.     {}  
  10.     virtual ~MyInstance() {}  
  11.   
  12.   
  13.     virtual void HandleMessage(const pp::Var& var_message) {  
  14.         if (var_message.is_string())  
  15.         {  
  16.             std::string message = var_message.AsString();  
  17.             pp::Var var_reply;  
  18.   
  19.   
  20.             std::string reply = "echo [";  
  21.             reply.append(message);  
  22.             reply.append(" from my NaCi module");  
  23.   
  24.   
  25.             var_reply = pp::Var(reply);  
  26.             PostMessage(var_reply);  
  27.         }  
  28.     }  
  29. };  
  30.   
  31.   
  32. class MyModule : public pp::Module {  
  33. public:  
  34.     MyModule() : pp::Module() {}  
  35.     virtual ~MyModule() {}  
  36.     virtual pp::Instance* CreateInstance(PP_Instance instance) {  
  37.         return new MyInstance(instance);  
  38.     }  
  39. };  
  40.   
  41.   
  42. namespace pp {  
  43.     Module* CreateModule() {  
  44.         return new MyModule();  
  45.     }  
  46. }  



测试dll、pexe格式的控件用的html和js可以从“hello_world_gles”例子的基础上只要做很小的修改就能测试插件有没有装载成功。
“PPAPI”平台下编译不会fire load事件在html中，导致不会提示成功装载插件的提示，但是实际上“hello_world_gles”插件已经正常运行。
你可能需要修改当前工程的[Configuration Properties]->[General]->[Native Client]->[Index Page of NaCl Application]属性指定html文件名
VS启动Debug的时候会以命令行方式传递给chrome的flags设置。
所以在VS外你要使用nexe文件，需要在Chrome浏览器中输入“chrome://flags/”启用“Native Client”，授权chrome可以使用未经chrome web store发布的native client程序。


备注：
 [1]NaCl64启动调试后，在Chrome46中装载控件会失败，导致gdb不能单步跟踪，但是Chrome43没有这个问题。


[参考资料]
https://developer.chrome.com/native-client/devguide/devcycle/debugging
https://developer.chrome.com/native-client/devguide/devcycle/building   
    
如何在vs2013中使用vs2013的native client插件
[Step1] 复制 %user%DocumentsVisual Studio 2012Addins 到 %user%DocumentsVisual Studio 2013Addins
[Step2] 复制  C:Program Files (x86)MSBuildMicrosoft.Cppv4.0V110NaCl  到  C:Program Files (x86)MSBuildMicrosoft.Cppv4.0V120NaCl
[FinalStep] 复制 C:Program Files (x86)MSBuildMicrosoft.Cppv4.0V110Platforms 下的以下文件夹
     ARM NaCl32 NaCl64 NaClARM PNaCl PPAPI
     到 C:Program Files (x86)MSBuildMicrosoft.Cppv4.0V120Platforms
     
     C:UserskagulaAppDataLocalGoogleChromeUser Data
     C:Program Files (x86)GoogleChromeApplication


如何重新编译NaCi的ppapi_cpp？
打开Visual Studio Command Prompt然后使用下面的命令：
$ cd $NACL_SDK_ROOTsrcppapi_cpp 
$ make TOOLCHAIN=win CONFIG=Debug 
$ make TOOLCHAIN=win CONFIG=Release 


NaCl Module如何调用Win32 API？
项目只有在“PPAPI”platform下才能直接调用win32 api，虽然能自由调用win32api,
但是调用win32 api创建新的进程，或调用C++ std对本地磁盘进行操作都会失败！
想要自由的使用win32 api只能参考下面的文档来实现，据说是唯一的解决办法。
《Native Messaging》
https://developer.chrome.com/extensions/nativeMessaging
下面解释了“PPAPI”platform的限制。
http://stackoverflow.com/questions/23472077/purpose-of-ppapi-toolchain-and-how-to-use-it?rq=1


JS如何接收来自Native Client的消息
最简单的例子是.. acl_sdkvs_addinexampleshello_naclhello_nacl下的index.html源文件。




常见问题
Q 编译项目提示。
Error 1  error MSB6006: "C:sdk acl_sdkpepper_39 oolchainwin_x86_newlibinx86_64-nacl-g++.exe" exited with code 1.
那是少了依赖库引起的，比如说，如果你用到gles2，添加“ppapi_gles2”依赖库后，问题消失。
Q 在“PPAPI”plaform下提示ppapi_cpp.obj找不到。
修改依赖项从“ppapi_cpp;ppapi;”为“ppapi_cpp.lib;ppapi.lib;”后，重新rebuild即可。
Q 运行“... acl_sdkpepper_39examples”下的例子,chrome提示“PnaclCoordinator: Compile process could not be created”

Chrome中输入“chrome://flags/”，停止“Native Client 基于 GDB 的调试 Mac, Windows, Linux, Chrome OS”项即可。

Q遇到sdk下的examples无法装载的例子

Chrome中输入“chrome://components”检查pnacI是否已经安装。





总结
    相对于NPAPI，PPAPI开发成本高，运行速度慢，所谓sandbox安全性只不过是始皇上缴天下铁器的强盗逻辑，
唯一的亮点是PPAPI的pexe格式插件可以一处编译处处运行。
   
备注：
[1]在“... acl_sdkpepper_39examples”路径下google提供了大量的example用来帮助开发者学习PPAPI。
   参考资料[10]也有大量的pexe例子。


参考资料

[1]《跨浏览器插件框架FireBreath安装与使用之一——Windows下的插件》
http://blog.csdn.net/ubuntu64fan/article/details/7941167
[2]《Firebreath插件制作》
http://blog.csdn.net/oldmtn/article/details/46362135
[3]FireBreath Home
http://www.firebreath.org/display/documentation/FireBreath+Home
[4]《firebreath 在谷歌和火狐浏览器下的调试 以及打包》
http://www.cnblogs.com/drzhong/p/firebreath_dubug.html
[5]《Building a firefox plugin – part one》
http://colonelpanic.net/2009/03/building-a-firefox-plugin-part-one/
[6]《Introduction to Portable Native Client》
https://www.chromium.org/nativeclient/pnacl/introduction-to-portable-native-client
[7]《Distributing Your Application》
https://developer.chrome.com/native-client/devguide/distributing
[8]《Problems when develop ppapi plugins in NACL.》
https://groups.google.com/forum/embed/#!topic/native-client-discuss/hihnZnB8k0M
[9]《2DPaintingModel》
https://code.google.com/p/ppapi/wiki/2DPaintingModel
[10]《ppapi example》
https://chromium.googlesource.com/chromium/src/ppapi/+/master/examples

标签：插件,chrome,nacl,开发,PPAPI,cpp,NPAPI,hello
From： https://www.cnblogs.com/kn-zheng/p/17005726.html

相关文章

  • 7天入门小程序开发 | 04-使用云开发中云存储和数据库
            经过前面几节课的学习，对小程序开发套路有一定了解了吧。前面主要掌握了小程序的界面展示、JS前后端交互，但是小程序中的数据存储到哪里呢？之前将图片保存到小......
  • 7天入门小程序开发 | 05-表单处理让小程序动起来，自带组件让页面更丰富
        在前面的课程中已经能够对数据库插入静态数据并且进行查询，可实际上小程序中需要用户自己编辑和插入数据，那么今天我们来学习下小程序的表单部分，并且还会在最后扩......
  • ppapi,npapi
    PPAPI也就是PepperPluginAPI，是在原有网景NPAPI(NetscapePluginAPI)基础上发展而来的。NPAPI是当今最流行的插件架构，几乎所有浏览器都支持，不过存在很大的安全隐患，插件可......
  • 7天入门小程序开发 | 小程序版Hello World
            这里面向初学者整理快速掌握小程序开发入门的教程，阅读教程、完成相应的开发任务，相信7天之后肯定有另一番感悟和收获。    第一节课就是熟悉官方文......
  • 7天入门小程序开发 | 02-小程序页面内容填充
            作为第二节课，在今天的课程中我们主要介绍小程序的几块内容：表格WXSS使用页面跳转图片展示        再我们新建了一个模块learning，包含以下两个页面。......
  • 程序员必备的20多种开发工具
    想看更多算法题，可以扫描上方二维码关注我微信公众号“数据结构和算法”1：IntelliJIDEA这个是开发很常用的，不用在介绍了。​​​https://www.jetbrains.com/idea/download/......
  • 龙蜥开发者说：开源是场马拉松！来自广州大学姚同学的开源成长记 | 第 13 期
    「龙蜥开发者说」第13期来了！开发者与开源社区相辅相成，相互成就，这些个人在龙蜥社区的使用心得、实践总结和技术成长经历都是宝贵的，我们希望在这里让更多人看见技术的力量......
  • 为什么阿里的Java开发规范中禁止使用Executors创建线程池？
    一.问题概述最近壹哥有个学生出去面试，面试官的一个问题是：在开发中你使用什么方式创建线程池?这个学生答曰：使用jdk中自带的工厂类Executors创建线程池！该学生回答完问题后，感......
  • 超详细图文保姆级教程：App开发新手入门
    上文回顾，我们已经完成了一个应用项目创建、导入、代码更新、代码同步和代码提交，本章继续我们的新手开发之旅，讲述一下如何将开发完成的应用进行编译，生成可供他人安装、可上架......
  • 一文读懂什么是低代码开发？
    世界在应用程序上运行，商业世界也不例外。**面对变化，企业过去依赖的传统应用程序开发流程可能不再有效。从头开始构建软件解决方案需要花费数月甚至数年的时间来规划、设计......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99