学习日记 » 浏览器插件开发 https://www.softwareace.cn 时刻想着为自己的产品多做一些对他好的事情 Fri, 20 Mar 2026 06:58:28 +0000 zh-CN hourly 1 NPAPI和PPAPI开发 https://www.softwareace.cn/?p=1435 https://www.softwareace.cn/?p=1435#comments Wed, 17 Feb 2016 06:13:36 +0000 http://www.softwareace.cn/?p=1435 http://blog.csdn.net/lee353086/article/details/49302917

NPAPI和PPAPI开发

Author: kagula

Revison: 1
Last modify date：2015-10-20

环境：

[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:\SDK\firebreath-FireBreath-105dcc6\”目录下
从官网上下载firebreath-boost-1.50.0.zip
位置参考下面摆放：
<FB_ROOT>/src/3rdParty/boost/boost/
<FB_ROOT>/src/3rdParty/boost/libs/

Step2:先建一个Hello工程。
打开控制台，切换到“D:\SDK\firebreath-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:\SDK\firebreath-FireBreath-105dcc6\build\bin\hello\Debug”路径下，使用“regsvr32 nphello.dll”注册控件。
“D:\SDK\firebreath-FireBreath-105dcc6\build\projects\hello\gen”路径下打开“FBControl.htm”文件，就可以在IE中正常运行hello控件。
如果有问题，参考资料[2]。
[S3-2]Firefox下运行插件
我是把dll复制到“C:\Users\kagula\AppData\Roaming\Mozilla\Firefox\Profiles\ie1ypj6h.default\plugins”路径就Ok了，如果没有“plugins”目录就新建一个。
不同的计算机Win7下，参考下面的格式就Ok了。
“C:\Users\XXX\AppData\Roaming\Mozilla\Firefox\Profiles\XXX.default\plugins”
[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-105dcc6\examples\BasicMediaPlayer”目录下的源代码。

备注
[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\nacl_sdk\pepper_39”。
CHROME_PATH环境变量为“C:\Program Files (x86)\Google\Chrome\Application\chrome.exe”。
[Step2]管理员权限启动控制台转到“E:\SDK\nacl_sdk\vs_addin”路径下，输入“Install”命令安装“vs_addin”。
以后你还可以通过输入“Install  –uninstall”命令来反安装。
[FinalStep-PPAPI]现在可以转到“E:\SDK\nacl_sdk\vs_addin\examples\hello_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\newlib\Debug路径下只生成一个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:\nginx-1.8.0\html”是你Web服务器的webroot路径，把“E:\SDK\nacl_sdk\pepper_39\getting_started\part1”目录下的
hello_tutorial.nmf和hello_tutorial.pexe两个文件复制到”E:\nginx-1.8.0\html”。把“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\nacl_sdk\pepper_39\examples”路径下新建“hello_nacl_cpp”目录。
[Step3]复制“E:\SDK\nacl_sdk\vs_addin\examples\hello_nacl_cpp\hello_nacl_cpp\PNaCl\newlib\Debug”路径下的pexe、nexe扩展名的四个文件
到新建的“E:\SDK\nacl_sdk\pepper_39\examples\hello_nacl_cpp”路径下面。
复制“E:\SDK\nacl_sdk\vs_addin\examples\hello_nacl_cpp\hello_nacl_cpp\index.html”文件到新的路径下。
复制“E:\SDK\nacl_sdk\vs_addin\examples\hello_nacl_cpp\hello_nacl_cpp\PNaCl\hello_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\nacl_sdk\pepper_39\examples\httpd.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_addin\examples”下的hello_nacl_cpp项目，第二种参考“hello_world_gles”项目，
开发包自带的例子基本上都属于这种风格。
典型的代码如下：

[cpp] view plain copy

  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%\Documents\Visual Studio 2012\Addins\ 到 %user%\Documents\Visual Studio 2013\Addins
[Step2] 复制  C:\Program Files (x86)\MSBuild\Microsoft.Cpp\v4.0\V110\NaCl\  到  C:\Program Files (x86)\MSBuild\Microsoft.Cpp\v4.0\V120\NaCl\
[FinalStep] 复制 C:\Program Files (x86)\MSBuild\Microsoft.Cpp\v4.0\V110\Platforms\ 下的以下文件夹
ARM NaCl32 NaCl64 NaClARM PNaCl PPAPI
到 C:\Program Files (x86)\MSBuild\Microsoft.Cpp\v4.0\V120\Platforms\

C:\Users\kagula\AppData\Local\Google\Chrome\User Data
C:\Program Files (x86)\Google\Chrome\Application

如何重新编译NaCi的ppapi_cpp？
打开Visual Studio Command Prompt然后使用下面的命令：
$ cd $NACL_SDK_ROOT\src\ppapi_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的消息
最简单的例子是..\nacl_sdk\vs_addin\examples\hello_nacl\hello_nacl下的index.html源文件。

常见问题
Q 编译项目提示。
Error 1  error MSB6006: “C:\sdk\nacl_sdk\pepper_39\toolchain\win_x86_newlib\bin\x86_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 运行“…\nacl_sdk\pepper_39\examples”下的例子,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]在“…\nacl_sdk\pepper_39\examples”路径下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

]]> https://www.softwareace.cn/?feed=rss2&p=1435 0 kindeditor 粘贴网络图片保存到服务器 https://www.softwareace.cn/?p=1100 https://www.softwareace.cn/?p=1100#comments Thu, 08 Jan 2015 05:05:36 +0000 http://www.softwareace.cn/?p=1100 人老了，记忆也衰退了。写代码时，只有思路，具体写起来确总忘这忘那。还有的特性或功能，脑子里朦胧记得曾经看到过或曾经写过却总也记不起来。在网 上找好多人的文章也就是转载别人，而图片因原作者空间失效而失效。于是想在自己blog 在转载好文章备份时，能顺便把里面图片也保存到自己服务器上。

由于对javascript 的了解不够深入，要在一个完全陌生的编辑器上做插件还真有点困难，加上php 也不是常用，边学边做发了三天终于将这样一个 粘贴网络图片保存到服务器 小插件做成功了。

贴出部分代码：

// 图片另存到服务器
		editor.addContextmenu({
	        title : '另存到服务器',
	        click : function() {
	         var img = getImageFromRange(editor.edit.cmd.range, function(img) {
	        	 	return !/^ke-\w+$/i.test(img[0].className);
	         	});
	         var imgsrc = img.attr('src');
	         K.ajax('./editor/php/saveToServer.php', function(data){var newsrc = K.formatUrl(data.url,'absolute');
	         editor.exec('insertimage', newsrc, '', '', '', '', '');
	         editor.hideMenu();} , 'POST' ,{imgurl:imgsrc});
	        },
	        cond : function() {
	        return getImageFromRange(editor.edit.cmd.range, function(img) {
	            return !/^ke-\w+$/i.test(img[0].className);
	        });
	        }
		});

服务器端代码：

require_once 'JSON.php';
require_once '../../globals.php';
$php_path = ADMIN_ROOT . '/';
$php_url = dirname($_SERVER['PHP_SELF']) . '/../../';
$root_path = $php_path . OPTION::UPLOADFILE_PATH.'image/netimg/';
$root_url = $php_url . OPTION::UPLOADFILE_PATH.'image/netimg/';
set_time_limit(0);
$filepath=urldecode($_POST['imgurl']);
$imgArray=array('.gif','.jpg','.png','.jpeg','.bmp');
$typeArray=array();
ob_start();
$type=strrchr(trim($filepath),".");
$result = false;
if($filepath!='' && in_array($type,$imgArray))
{
	$now=time();
	$filename=$now.strrchr(trim($filepath),".");
			//$filename=md5_file(trim($files[$i])).strrchr(trim($files[$i]),".");
	$ret = create_folders($root_path);
	if($ret != false){ 
		$savetime=SaveHTTPFile(trim($filepath),$root_path.$filename);
		$result = true;
	}
}
ob_end_flush();
if($result){
		header('Content-type: text/html; charset=UTF-8');
		$json = new Services_JSON();
		echo $json->encode(array('error' => 0, 'url' => $root_url.$filename));
		exit;		
}else{
		alert('创建目录失败！');
}

function getmicrotime(){
    list($usec, $sec) = explode(" ",microtime());
    return ((float)$usec + (float)$sec);
}

function SaveHTTPFile($fFileHTTPPath,$fFileSavePath)
{
	//记录程序开始的时间
	$BeginTime=getmicrotime();

	//取得文件的内容
	ob_start();
	readfile($fFileHTTPPath);
	$img = ob_get_contents();
	ob_end_clean();
	//$size = strlen($img);

	//保存到本地
	$fp2=@fopen($fFileSavePath, "a");
	fwrite($fp2,$img);
	fclose($fp2);

	//记录程序运行结束的时间
	$EndTime=getmicrotime();

	//返回运行时间
	return($EndTime-$BeginTime);
}

 

]]> https://www.softwareace.cn/?feed=rss2&p=1100 0 kindeditor编辑器高级篇：如何通过监听kindeditor编辑器的粘贴(CTRL+V)事件直接过滤掉复制内容内所有的标签包括超链接 https://www.softwareace.cn/?p=1098 https://www.softwareace.cn/?p=1098#comments Wed, 07 Jan 2015 09:56:33 +0000 http://www.softwareace.cn/?p=1098 昨天写个一篇如何在执行一键清除HTML功能键的同时去掉kindeditor编辑器内容的所有超链接的博客，地址为：http://www.stepday.com/topic/?688 今天琢磨了一下是否可以更加直接地在粘贴内容至kindeditor编辑器内的时候就清楚HTML标签和去掉所有的超链接，换句话说就是只能够粘贴纯文本进入kindeditor编辑器内。

通过翻看kindeditor-min.js源码文件，查找“b.pasteType === 1”关键词，我们看到的代码片段如下所示：

b.pasteType === 1 && (d = d.replace(/<br[^>]*>/ig, "\n"), d = d.replace(/<\/p><p[^>]*>/ig, "\n"), d = d.replace(/<[^>]+>/g, ""), d = d.replace(/&nbsp;/ig, " "), d = d.replace(/\n\s*\n/g, "\n"), d = d.replace(/ {2}/g, " &nbsp;"), b.newlineTag == "p" ? /\n/.test(d) && (d = d.replace(/^/, "<p>").replace(/$/, "</p>").replace(/\n/g, "</p><p>")) : d = d.replace(/\n/g, "<br />$&")), b.insertHtml(d, !0))

 

这段代码就是实现了CTRL+V的粘贴功能，获取粘贴板内的内容d，然后对其进行简单性的处理然后赋值给编辑器b。

在这里我们不难发现并未去除过多的HTML代码且清楚超链接，所以我们需要在这里对编辑器对象b做一些后加处理，我们通过b.text()就可以拿到编辑器内的纯文本内容了，然后再将其赋值给编辑器b不就行了么？

所以得到了修改后的代码片段：

b.pasteType === 1 && (d = d.replace(/<br[^>]*>/ig, "\n"), d = d.replace(/<\/p><p[^>]*>/ig, "\n"), d = d.replace(/<[^>]+>/g, ""), d = d.replace(/&nbsp;/ig, " "), d = d.replace(/\n\s*\n/g, "\n"), d = d.replace(/ {2}/g, " &nbsp;"), b.newlineTag == "p" ? /\n/.test(d) && (d = d.replace(/^/, "<p>").replace(/$/, "</p>").replace(/\n/g, "</p><p>")) : d = d.replace(/\n/g, "<br />$&")), b.insertHtml(d, !0), b.html(b.text()))

不难看出只是在最后的地方追加了

b.html(b.text())

]]> https://www.softwareace.cn/?feed=rss2&p=1098 0 kindeditor编辑器高级篇：如何做到一键清除HTML格式的同时去掉kindeditor编辑器内全部超链接(a) https://www.softwareace.cn/?p=1095 https://www.softwareace.cn/?p=1095#comments Wed, 07 Jan 2015 09:51:02 +0000 http://www.softwareace.cn/?p=1095 在使用kindeditor编辑器的时候，大多数可能都是从某些网页直接粘贴内容复制到kindeditor编辑器内，这样可能内容就包含很多HTML标签和超链接。为了最快地进行内容编辑往往都使用kindeditor的“一键清除HTML”的功能，但是这个功能默认情况下是不会清除超链接的标签的。这一点往往令很多做编辑的人很是头疼，最后这个光荣的任务就落到了我们程序员的身上。

为了解决在清除HTML标签的同时也清除掉超链接，不得不研究了一番kindeditor的源码。最后将其问题的解决方案归咎到了一键清除HTML的对应plugins/clearhtml/clearHTML.js文件内。通过深入分析得出了这样两个解决方案：

1、修改formatHtml格式化方法

见plugins/clearhtml/clearHTML.js的formatHtml格式化方法如下所示：

html = K.formatHtml(html, {
			a : ['href', 'target'],
			embed : ['src', 'width', 'height', 'type', 'loop', 'autostart', 'quality', '.width', '.height', 'align', 'allowscriptaccess'],
			img : ['src', 'width', 'height', 'border', 'alt', 'title', '.width', '.height'],
			table : ['border'],
			'td,th' : ['rowspan', 'colspan'],
			'div,hr,br,tbody,tr,p,ol,ul,li,blockquote,h1,h2,h3,h4,h5,h6' : []
});

 

view sourceprint?

从格式化方法不难看出它始终保持了a标签的href和target两个属性，所以问题的根本就在这里了的，解决方案就是去掉a标签的一切，修改后的代码如下所示：

html = K.formatHtml(html, {
			embed : ['src', 'width', 'height', 'type', 'loop', 'autostart', 'quality', '.width', '.height', 'align', 'allowscriptaccess'],
			img : ['src', 'width', 'height', 'border', 'alt', 'title', '.width', '.height'],
			table : ['border'],
			'td,th' : ['rowspan', 'colspan'],
			'div,hr,br,tbody,tr,p,ol,ul,li,blockquote,h1,h2,h3,h4,h5,h6' : []
});

 

view sourceprint?

2、直接调用取消超链接的方法

通过查找源码内的方法，可以直接调用去掉超链接的方法，同样修改plugins/clearhtml/clearHTML.js文件内，在

view sourceprint?
1.self.addBookmark();

后面追加一句语句：

view sourceprint?
1.self.exec('unlink', null); //去掉编辑器内所有的超链接
]]> https://www.softwareace.cn/?feed=rss2&p=1095 0 thunderbird 二次开发 xpcom 获取 pref 配置 https://www.softwareace.cn/?p=1093 https://www.softwareace.cn/?p=1093#comments Tue, 06 Jan 2015 02:56:46 +0000 http://www.softwareace.cn/?p=1093 

bool showProgress = false;
nsCOMPtr<nsIPrefBranch> prefBranch (do_GetService(NS_PREFSERVICE_CONTRACTID));
if (prefBranch)
prefBranch->GetBoolPref("mailnews.show_send_progress", &showProgress);

 

]]> https://www.softwareace.cn/?feed=rss2&p=1093 0 js ctypes 操作注册表 https://www.softwareace.cn/?p=1047 https://www.softwareace.cn/?p=1047#comments Fri, 28 Nov 2014 11:19:47 +0000 http://www.softwareace.cn/?p=1047 

function getLocalVersion(){
  //::RegSetValueExA(m_hkey, key.c_str(), 0, REG_SZ, (BYTE*)val.c_str(), (DWORD)val.size());
  //if (::RegOpenKeyExA(hkey, subKey.c_str(), 0, KEY_ALL_ACCESS, &m_hkey) != ERROR_SUCCESS)
  var lib = ctypes.open("Advapi32.dll");
  var RegQueryValueExW = lib.declare("RegQueryValueExW", ctypes.winapi_abi, ctypes.int32_t, HKEY, ctypes.jschar.ptr, LPDWORD, LPDWORD, ctypes.jschar.ptr, LPDWORD);
  var RegOpenKeyExW = lib.declare("RegOpenKeyExW", ctypes.winapi_abi, ctypes.int32_t, HKEY, ctypes.jschar.ptr, LPDWORD, LPDWORD, HKEY.ptr);
  var m_hkey = HKEY();
  var version = ctypes.jschar.array(1024)("");;
  if (RegOpenKeyExW(HKEY(HKEY_LOCAL_MACHINE), ctypes.jschar.array()("SOFTWARE\\Wow6432Node\\xxx\\appname"),
    LPDWORD(0), LPDWORD(KEY_QUERY_VALUE), m_hkey.address()) == ERROR_SUCCESS)
  {
    var len = DWORD(1024 * 2);
    var ret = RegQueryValueExW(m_hkey,
      ctypes.jschar.array()("UpdateVersion"),
      LPDWORD(0),
      LPDWORD(0),
      version,
      len.address());
  }

  lib.close();
  var resutVersion = version.readString();
  return "["+resutVersion+"]";
}

 

]]> https://www.softwareace.cn/?feed=rss2&p=1047 0 用Visual Studio创建XPCOM组件 https://www.softwareace.cn/?p=818 https://www.softwareace.cn/?p=818#comments Mon, 26 May 2014 01:47:03 +0000 http://www.softwareace.cn/?p=818 一、开发环境设置
下载XULRunner和XULRunner SDK，当前版本是1.8.1.3。可以在http://releases.mozilla.org/pub/mozilla.org/xulrunner/releases/找到最新的版本。

解压到一个目录下，我的目录结构：

这个SDK里还需要两个dll文件，下载wintools.zip，从buildtools/windows/bin/x86里拷贝libIDL-0.6.dll、glib-1.2.dll到xulrunner/gecko-sdk/bin下。

二、XULRunner：Hello World!
在xulrunner创建tests目录，如下：
tests
|–application.ini
|–defaults
|   |–preferences
|   |   |–prefs.js
|–chrome
|   |–chrome.manifest
|   |–HelloWorld
|   |   |–test.xul

application.ini

[App]
Vendor=Duo
Name=tsetApp
Version=0.1
BuildID=20070530

[Gecko]
MinVersion=1.8
MaxVersion=1.8

prefs.js:

pref("toolkit.defaultChromeURI", "chrome://tests/content/test.xul");

chrome.manifest:

content tests HelloWorld/

test.xul:

 
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window id="controller-example" title="Hello World"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<label value="Hello World!"/>

</window>

 

在命令行下，进入xulrunner目录：

xulrunner.exe tests/application.ini

三、创建XPCOM组件
参考：How to build a binary XPCOM component using Visual Studio
VC++ Express Project：xpcom-test.zip
主要有6步：

  • 把”xulrunner/gecko-sdk/include”加到Additional Include Directories里
  • 把 “xulrunner/gecko-sdk/lib”加到Additional Library Directories里
  • 添加”nspr4.lib xpcom.lib xpcomglue_s.lib”库
  • 添加”XP_WIN;XP_WIN32″宏
  • 不使用]预编译头
  • 自定义XPCOM IDL编译步骤(右击*.idl文件，属性->自定义->命令行，输入$(ProjectDir)xpidl-build.bat $(InputFileName))

四、测试XPCOM组件
在上面建立的tests下创建components目录，把生成的.xpt、.dll文件拷贝到components。
修改test.xul文件：（注意，要保存为uft-8编码。）

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window id="controller-example" title="Controller Example"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<script>
function doXPCOM() {
    try {
        const cid = "@starkravingfinkle.org/specialthing;1";
        var obj = Components.classes[cid].createInstance();
        obj = obj.QueryInterface(Components.interfaces.ISpecialThing);
    }
    catch(err) {
        alert(err);
        return;
    }

    var res = obj.add(3, 4);
    alert('3+4 = ' + res);

    var name = obj.name;
    alert('Name = ' + name);

    obj.name = 'New Name';
    name = obj.name;
    alert('Name = ' + name);
}
</script>

<button id="testXPCOM" label="测试XPCOM" oncommand="doXPCOM();"/>

</window>

修改application.ini的BuildID，我改为20070601，运行这个程序就可以测试了。

]]> https://www.softwareace.cn/?feed=rss2&p=818 0 Mozilla plugin的MIME类型注册 https://www.softwareace.cn/?p=177 https://www.softwareace.cn/?p=177#comments Tue, 19 Feb 2013 10:07:26 +0000 http://www.softwareace.cn/?p=177 1.最简便的方法：修改npp_gate.cpp中的

char*
NPP_GetMIMEDescription(void)
{
return &quot;application/mozilla-scriptable-plugin:.Suffixes:Description&quot;;
}

引号中的字段：MIME type：.扩展名：MIME type描述
2.如何在一个plugin中注册多个MIME type
格式是这样的：用“；”来分隔多个完整的MIME type描述（包括MIME type：.扩展名：MIME type描述），如果一个MIME type要支持多种扩展名则扩展名间用“，”做分隔符。

]]> https://www.softwareace.cn/?feed=rss2&p=177 0 使用NPAPI编写浏览器插件的调用本机上的程序 https://www.softwareace.cn/?p=175 https://www.softwareace.cn/?p=175#comments Tue, 19 Feb 2013 06:18:48 +0000 http://www.softwareace.cn/?p=175 from:csdn
使用NPAPI编写浏览器插件的源码实例
 
 
用于种种原因,最近对制作浏览器(chrome,firefox)的插件非常感兴趣
搜了一下,讲的几乎全都是在讲的方法和API,找个简单可以运行的代码实例,还真是难!
不过最终还算幸运,终于找一个例子(http://geeklu.com/2010/10/getting-started-with-npapi-plugin/comment-page-1/).
很遗憾这个例子在我的linux机器上无法正常工作.所以我以此例子为基础写了个新例子,顺路我还写了个chrome的扩展作为演示.
关于NPAPI和chrome的扩展:
NPAPI:
[1] http://colonelpanic.net/2009/05/building-a-firefox-plugin-part-two/
[2] http://rintarou.dyndns.org/2010/04/23/scriptable-plugin-%E6%8E%A2%E8%A8%8E-20090408/
[3] http://blogold.chinaunix.net/u3/94039/showart_2004756.html
[4] https://developer.mozilla.org/en/Plugins
 
[5] 如何在chrome的扩展中使用:http://code.google.com/chrome/extensions/npapi.html
[6] 如何编写chrome的扩展:http://code.google.com/chrome/extensions/getstarted.html
 
插件的功能:
提供网页的javascript可以调用本机上的程序的能力,
所以本插件其实是很危险的,当然任何可以让网页调用本机上程序的插件都是很危险的.
不过这里只是一个演示插件编写的例子,看到的人不要惊慌哦…
 
关于源码的说明
npapi/npapi.h
npapi/npfunctions.h
npapi/npruntime.h
npapi/nptypes.h
直接来自:http://code.google.com/p/npapi-headers/
 
plugin_exec.c中的一些函数:
char*
NP_GetMIMEDescription()
return的字符串的格式必须是:"text/html:htm,html:HTML Document;application/x-texinfo:tex,texi,texinfo:TexInfo Document;"
详情请看[3]
 
NPError
NP_GetValue (void *future,
     NPPVariable variable,
     void *value)
一定要处理 variable为NPPVpluginNeedsXEmbed的case,否则chrome不会启用插件(firefox还算正常)
 
插件的演示方法:
$cp libplugin_exec.so ~/.mozilla/plugins
$firefox wkt.html 
$google-chrome wkt.html ###在网页输入一个命令(必须运行后能跳出窗口,例如gnome-terminal,否则看不见效果),然后点"Run"按钮.
使用NPAPI编写浏览器插件的源码实例 - wkt55555 - wkt的博客
使用NPAPI编写浏览器插件的源码实例 - wkt55555 - wkt的博客

  

chrome扩展的演示方法:
扩展在chrome_extension目录下
加载扩展(加载方法看[6]的第4步),
然后页面上每个link的右键菜单会多出一个菜单项"save link to /tmp/link.log",
点击该菜单项后link的url就会被保存到/tmp/link.log
使用NPAPI编写浏览器插件的源码实例 - wkt55555 - wkt的博客
本例源码地址:http://u.115.com/file/f23aeb448f
注意此例仅在debian sid/ubuntu10.10 编译/测试.
]]> https://www.softwareace.cn/?feed=rss2&p=175 0 我的Firefox插件开发之旅（8）——插件的安装与更新 https://www.softwareace.cn/?p=152 https://www.softwareace.cn/?p=152#comments Wed, 30 Jan 2013 03:19:42 +0000 http://www.softwareace.cn/?p=152 插件写好了，下面就该做一个安装包了。最好再提供更新功能，以便在插件有更新的时候，及时通知用户进行插件更新。

我们开发的时候，直接将生成的dll丢到Firefox安装目录下的plugins目录就可以工作了，但是你如何说服让用户来手动完成这件事情？估计很难。因此，提供一个安装包，可能是最好的选择。用户只需要点几下鼠标就可以完成插件的安装了。

不过到写这篇文章的时候，我还不清楚怎么让安装包经过Mozilla的验证，因为没有经过验证的插件，在安装的时候会出现“仅安装信任作者的附加组件”提示对话框，提示用户仅安装受信任作者的插件。如果有人知道怎么去掉这个警告对话框，还望不吝赐教。

最最简单的插件安装包在这篇文章中开头处写的很清楚了：https://developer.mozilla.org/en/Shipping_a_plugin_as_an_extension

安装包的目录结构：

install.rdf
plugins/
    pluginlib.dll
    plugintypes.xpt

其中xpt文件可选。install.rdf的内容为：

<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#">
  <Description about="urn:mozilla:install-manifest">
    <em:id>mypluginid@myplugin.com</em:id>
    <em:name>My Plugin</em:name>
    <em:version>1.0</em:version>
    <em:targetApplication>
      <Description>
        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
        <em:minVersion>1.5</em:minVersion>
        <em:maxVersion>3.0.*</em:maxVersion>
      </Description>
    </em:targetApplication>
  </Description>
</RDF>

将上面内容安装目录结构用zip格式压缩，将后缀名改为xpi就OK了。

但是我们要做得事情远不止这些：

  • 如何提供插件的更新自动通知？
  • 如何将扩展和插件捆绑在一起让用户安装？（因为可能你不仅仅要安装插件，还希望在用户的FF工具栏或菜单上添加一些扩展功能）
  • 如何对插件进行签名？
  • 如何发布你的插件和扩展，以便让更多人知晓？

要做的事情还很多。那么我们就一个个来研究吧。

一、如何提供插件的更新自动通知？

关于Install manifest（即install.rdf）文件内容，Mozilla有篇很详细的文章：https://developer.mozilla.org/en/Install.rdf，可以进行参考。

其中有个节点名称是：updateURL。用这个标签包含一个可查询更新信息的URL连接，今后当FF在查询插件是否有更新时，会到你指定的这个URL上去查询。

这个URL可以是一个cgi程序、servlet、asp(x)，也可以是一个固定的rdf文件链接。另外文章中也提到了另外一种办法：如果你没有提供updateURL，FF的附加组件管理器会向addons.mozilla.org发送请求，当你上传了一个新版本的插件或者通过作者接口（author interface）更改了兼容性参数，一个更新的manifest文件将会被自动产生。另外，Mozilla建议updateURL使用https而非http，否则你应该提供updateKey（可以用McCoy生成）。

那么，负责更新的rdf怎么编写呢？你可以参考这篇文章：https://developer.mozilla.org/en/Extension_Versioning%2c_Update_and_Compatibility#Update_RDF_Format。由于文章中写的很清晰，并且提供了详细的例子代码，这里我就不废话了。

二、如何将扩展和插件捆绑在一起让用户安装？

这个很简单。之前的章节我们已经做过一个简单的Extension安装包，如果想附加一个插件的话，只需要和chrome的同级目录下新建一个plugins目录，然后将dll及相关文件放在里面，最后一起打包即可。

当在FF中安装此xpi时，FF会将Extension和Plugin解压到FF的Profiles目录下。插件和扩展即可生效。

注意这里与我们之前将插件dll放在FF安装目录下的plugins目录下有些不同（至少位置不同），FF同样能够正确地识别我们的插件。另外Mozilla也推荐做成安装包，这样，在用户卸载组件的时候，可以同时将Extension和Plugin都卸载掉。

三、如何对插件进行签名？

很抱歉，还没找到答案……

四、 如何发布你的插件和扩展，以便让更多人知晓？

首先需要在Mozilla网站上注册一个账号（需要提供合法E-mail，因为要激活）。

登录后，在Mozilla 附加组件首页上你会看到一个“开发者工具”的链接。进入后，会有明显的导航链接，如“提交附加组件”。通过这个页面，按照向导，你就可以将你的插件发布出来了。剩下的事，就是宣传咯，呵呵。

OK，《我的Firefox插件开发之旅》系列文章就先到这里。将来我也许还会写一些关于编写FF的Extension和Plugin方面的技术细节文章。看心情吧，呵呵。

]]> https://www.softwareace.cn/?feed=rss2&p=152 0