学习日记 » chrome 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 chrome 扩展 插件 https://www.softwareace.cn/?p=47 https://www.softwareace.cn/?p=47#comments Wed, 16 Jan 2013 07:37:42 +0000 http://192.168.0.106/?p=47  chrome 有2种扩展 1.Browser Action；2.page actions

 

Chrome扩展就是几个网页，那么代码当然就是网页的JavaScript 
有帮助的网页：http://blog.neverbest.com/?p=276
{If you want to create an icon that isn't always visible, use a page action instead of a browser action. }
Browser Plugins vs Extensions – the difference  http://colonelpanic.net/2010/08/browser-plugins-vs-extensions-the-difference/
An extension could contain a plugin, but a plugin can’t contain an extension
 
半路出现个这个
 
google Browser extension framework
 
一个Chrme扩展是由HTML、CSS、JavaScript、图片等文件压缩而成。扩展实际上就是一个web页面，可以用任何浏览器提供给web页面的接口，从XMLHttpRequest 到JSON ，再到HTML本地缓存都可以使用。
Chrome扩展能做什么呢？我们会发现有些扩展在Chrome地址栏右侧区域增加一个图标。还有些扩展能够和浏览器的一些元素(如书签、tab导航标签)交互。扩展还可以和web页面交互，甚至是从web服务器获取数据。
每个扩展是 一个.crx文件（类似zip的 压缩文件），由下列文件组成
一个manifest文件(主文件,json格式)
至少一个HTML文件(主题可以没有HTML文件)
JavaScript文件 (可选，非必须)
任何其他你需要的文件(比如图片)
 
工作原理
 
 
 
 
读取用户计算机数据（NPAPI Plugins）

这个功能要用到dll（动态链接库）知识，可以启动用户电脑的程序，删除用户文件等功能。。相当于一个小Windows程序。利用Chrome提供的方法可以让扩展的后台页面与你的dll通信。

这些就API文档里的Implementation部分

2010-05-11_230436

 

 
 
Background page 和 PopUp  page

popup.html中定义的Javascript变量会在popup.html页面关闭时被释放，
background.html可以保存一些一直需要使用的变量的作用，这里定义的javascript变量会在Chrome浏览器生命期中一直存在，可以把要一直存在的数据保存在这里。
 
先在background.html中定义好变量，
 var global_email = "";
然后在popup.html中用以下方式来引用这些变量
 var bgpg = chrome.extension.getBackgroundPage();
bgpg.global_email = "somebody@domain.com";

 

 
分析 插件
 
manifest.json 主文件 Formats: Manifest Files 
 

NPAPI Plugins

 

JavaScript中调用本机二进制代码
 How to develop an NPAPI plugin is outside the scope of this document. See Mozilla's NPAPI plugin reference for information on how to do that.
 
“公共”属性指定你的插件是否可以访问一般的网页，默认值为false，这意味着您的分机可以加载插件。
 
 
  1. Add a section to your extension's manifest.json that describes where to find the plugin, along with other properties about it:

     

    {
  &quot;name&quot;: &quot;My extension&quot;,
  ...
  <b>&quot;plugins&quot;: [
    { &quot;path&quot;: &quot;content_plugin.dll&quot;, &quot;public&quot;: true },
    { &quot;path&quot;: &quot;extension_plugin.dll&quot; }
  ]</b>,
  ...}

    The "path" property specifies the path to your plugin, relative to the manifest file. The "public" property specifies whether your plugin can be accessed by regular web pages; the default is false, meaning only your extension can load the plugin.

  2. Create an HTML file that loads your plugin by mime-type. Assuming your mime-type is "application/x-my-extension":

     

    &lt;embed type=&quot;application/x-my-extension&quot; id=&quot;pluginId&quot;&gt;&lt;script&gt;
  var plugin = document.getElementById(&quot;pluginId&quot;);
  var result = plugin.myPluginMethod();  // call a method in your plugin
  console.log(&quot;my plugin returned: &quot; + result);&lt;/script&gt;

     
    This can be inside a background page or any other HTML page used by your extension. If your plugin is "public", you can even use a content script to programmatically insert your plugin into a web page.
     
     
    获取当前的页面的链接
     
    下一步封装库 fun(currentUrl);
     
     
    顺便看到个这个 LomoX常见问题
     
    qt plugin 
     
     
     
]]> https://www.softwareace.cn/?feed=rss2&p=47 8