在寻找插件开发资料的过程中找到了一个开发浏览器插件的开源项目——firebreath。参考:firebreath主页。根据其介绍可以实现各种浏览器插件的开发。于是我进行了尝试,并试图搜索利用firebreath开发插件的中文资料。搜索到的相关中文资料有一个:徐凡的博客。其中有使用firebreath开发浏览器插件(一、二、三)三篇关于firebreath开发插件的文章。看完了,但是还是不怎么会。

经过两周的摸索,基本上掌握了用firebreath开发插件的初步流程,但是没法熟练运用。主要根据firebreath上的getting started进行,这里记录一下用firebreath开发插件的基本流程(开发环境我用的是VS2010中文旗舰版)。

准备工作

要使用firebreath来开发插件,需要下载以下东西:firebreath的源代码、python、CMake。安装python(可以是2.5 2.6 2.7版本,我下载的是2.7版本),注意python最好安装在firebreath的工程目录中。安装CMake(我下载的最新版本),注意安装过程中请选择添加到环境变量。Firebreath源代码可以在github上签出(需要安装git bash),也可以直接下载压缩包文件,我直接下载zip程序包,firebreath 1.6 zip包下载地址
下面是详细步骤,将源代码下载下来之后解压到:D:\Users\zcf\Documents\My Program\2012\FireBreath\中。我将python安装在D:\Users\zcf\Documents\My Program\2012\FireBreath\Python27\注意即使不安装在firebreath目录也 不要安装在目录路径有特殊字符(特别是空格)的路径下,与firebreath文件夹的相对路径没有空格也行。

创建新的plugin

运行cmd(win7请以管理员身份运行)。
转到firebreath的根目录下:
cd /d D:\Users\zcf\Documents\My Program\2012\FireBreath
运行fbgen.py
Python27\python.exe fbgen.py
运行到此截图:

输入需要输入的东西
 

完成之后在firebreath根目录下会产生一个projects文件夹,里面就是刚刚建立的工程的源文件了。这些文件在firebreath的网站上有详细介绍,看得很模糊,我就不罗嗦了,需要看的自己去看原文说明吧。

创建工程

还是在刚才那个cmd窗口中运行prep2010.cmd,如下图:

我使用VS2010来开发,因此运行prep2010.cmd、如果你使用其他版本请使用相应的prep文件。另外,如果需要创建给出的两个例子,则可以运行prep2010.cmd examples。

运行完毕就创建好工程了,在firebreath根目录下的build文件夹下面会生成很多文件,其中有一个FireBreath.sln就是我们熟悉的VS解决方案文件了。双击这个文件就可以用VS打开这个解决方案了。如下图:

最后一个项目就是我们建立的项目,其他的是自己生成的。当我们新建第二个plugin时就会在这个之后再添加一个项目吧!(不过我还没试过)。
 
接下来就在VS中生成解决方案。整个过程完成之后就会在~FireBreath\build\bin\demo\Debug\下面找到npdemo.dll,这就是我们生成的plugin了。在~FireBreath\build\projects\demo\gen\目录下可以找到FBControl.htm文件,这个文件就是我们这个plugin的测试页面了,当然你也可以自己编写测试页面。
将产生的npdemo.dll复制到用来测试的Firefox profile文件中plugins目录(没有的话自己新建吧)下,然后用这个profile运行Firefox,打开FBControl.htm文件。如下图:(也可以采用其他方式注册plugin,请参考相关资料)

点击确定之后:
 

这样这个plugin就创建完毕了,还没看明白呢,就结束了?太快了吧。。。
 
我刚开始建立完就是这个感觉:我可以创建plugin了,可是我感觉我又什么都不会。一般的有关创建plugin的说明都是到这个地方就结束了,给我的感觉就是还没开始就结束了。。。

实现一个简单的功能

其实上面这个例子已经实现了很多比较实用的功能了,可是我比较菜,只能看懂一小部分。我想实现一个用鼠标在plugin窗口上画线的功能。经过摸索,终于可以实现我想实现的这个功能了。下面是我的步骤:
看程序的过程中我发现已经实现了鼠标按下,抬起,移动等事件的函数,但是函数体只有一个return语句,下图是所有已经实现的函数:

看到这些函数,我想画线的函数就可以利用这三个鼠标事件来来完成吧。于是我做了如下工作。
 
1,定义几个私有成员变量(demo.h文件中):

2,在构造函数中初始化一下(demo.cpp文件中):
 

3,先写onMouseDown和onMouseUp两个函数中的代码(作用:修改鼠标是否按下的状态)。如下图,框住的是添加的内容:
 

4,再来写鼠标移动时实现的功能,首先获取鼠标指针所在的点,与前面一样:m_mousePosXnew=evt->m_x; m_mousePosYnew=evt->m_y;就搞定了;然后就是画线的功能了(如果你对windows编程很熟悉就直接看后面的程序截图吧,因为我不熟悉,所以我将这个过程描述得详细一点,请理解),从old 的点画到new这个点。我虽然对windows程序开发不是很熟练,但是还是知道有个LineTo的函数,因此先就假设是LineTo(old,new)吧。于是就接下来写:

if (b_isDown)
{
LineTo(old, new);
}
最后,将new这一点保存为old的点: 
m_mousePosXold= m_mousePosXnew; m_mousePosYold= m_mousePosYnew;
所以这里就剩下搞清楚 LineTo这个函数了,要实现从一个点画线到另一个点在windows中其实是这样实现的:
HDC hDC;
hDC=GetDC(hWnd);
MoveToEx(hDC,m_mousePosXold,m_mousePosYold,NULL);
LineTo(hDC,m_mousePosXnew,m_mousePosYnew);
ReleaseDC(hWnd,hDC);
上面这样实现了,要使用HDC以及MoveToEx和LineTo需要包含头文件PluginWindowWin.h。还差个HWND,如何得到这个HWND,我也说不清楚,我是看到例子FBTestPlugin中的代码才知道可以这样获取的:FB::PluginWindowWin *wnd = dynamic_cast<FB::PluginWindowWin*>(win); HWND hWnd=wnd->getHWND();下面是FBTestPlugin 的FBTestPlugin.cpp文件中的代码片段截图:

经过尝试,终于完成了我想要实现的这个简单功能,再次感慨一下开发plugin对windows编程的基础能力还是有相当需求的。下面是完整的onMouseMove函数代码截图,框住的是添加的内容(注意在文件最前面添加头文件的引用#include "PluginWindowWin.h"):


做完这些修改之后,在demo这个项目上选择仅用于项目->仅重新生成demo。等生成完毕之后,去前面的位置找到npdemo.dll复制到Firefox相应profile下的plugins目录,重新启动Firefox,打开那个测试页面。

下面是运行效果,请忍受我的涂鸦,\(^o^)/~

差不多了吧,这个简单的功能就这样了。或许再添加一个鼠标移出区域的事件,在其中将鼠标按下状态设为false会更好。
 
我做插件的目的是要播放浏览器不支持的媒体文件,我会继续慢慢研究,希望研究插件开发的能一起共同交流,交流群:81424441。
 

http://www.firebreath.org/display/documentation/FireBreath+Home