- 浏览: 984111 次
- 性别:
- 来自: 杭州
文章分类
- 全部博客 (826)
- 硬件 (8)
- 软件 (24)
- 软件工程 (34)
- JAVA (229)
- C/C++/C# (77)
- JavaScript (8)
- PHP (1)
- Ruby (3)
- MySQL (14)
- 数据库 (19)
- 心情记事 (12)
- 团队管理 (19)
- Hadoop (1)
- spring (22)
- mybatis(ibatis) (7)
- tomcat (16)
- velocity (0)
- 系统架构 (6)
- JMX (8)
- proxool (1)
- 开发工具 (16)
- python (10)
- JVM (27)
- servlet (5)
- JMS (26)
- ant (2)
- 设计模式 (5)
- 智力题 (2)
- 面试题收集 (1)
- 孙子兵法 (16)
- 测试 (1)
- 数据结构 (7)
- 算法 (22)
- Android (11)
- 汽车驾驶 (1)
- lucene (1)
- memcache (12)
- 技术架构 (7)
- OTP-Erlang (7)
- memcached (17)
- redis (20)
- 浏览器插件 (3)
- sqlite (3)
- Heritrix (9)
- Java线程 (1)
- scala (0)
- Mina (6)
- 汇编 (2)
- Netty (15)
- libevent (0)
- CentOS (12)
- mongod (5)
- mac os (0)
最新评论
-
kingasdfg:
你这里面存在一个错误添加多个任务 应该是这样的 /** * ...
Quartz的任务的临时启动和暂停和恢复【转】 -
kyzeng:
纠正一个错误,long型对应的符号是J,不是L。
Jni中C++和Java的参数传递 -
zhaohaolin:
抱歉,兄弟,只是留下作记录,方便学习,如果觉得资料不好,可以到 ...
netty的个人使用心得【转】 -
cccoooccooco:
谢谢!自己一直以为虚机得使用网线才可以与主机连接呢。。
主机网卡无网线连接与虚拟机通信 -
yuqilin001:
要转别人的东西,请转清楚点嘛,少了这么多类,误人子弟
netty的个人使用心得【转】
搭建你的应用开发环境
Firefox相关设置的调节
创建Profile
新建一个Firefox的Profile,以便拥有一个纯净的开发环境,另外易于安装开发者插件。
使用以下方法创建一个新的Profile:
UNIX用户
firefox -no-remote -P develop
Windows NT用户
创建Firefox的快捷方式,传入参数 -no-remote -P develop
修改Firefox配置
使用该Profile打开Firefox,在地址栏内输入about:config
,按下enter
(或者return
按钮。
修改以下参数为给出的值。下面将解释这些参数的含义。
-
javascript.options.showInConsole = true
-
nglayout.debug.disable_xul_cache = true
-
browser.dom.window.dump.enabled = true
-
javascript.options.strict = true
-
extensions.logging.enabled = true
-
nglayout.debug.disable_xul_fastload = true
(仅限Gecko 2.0+ (Firefox 4.0+)) -
dom.report_all_js_exceptions = true
将chrome文件中的错误显示在Console里。
关闭XUL缓存,这允许不重启而改变窗口以及对话的内容。这里,可以使用目录而不是Jar。但是Overlay改变后,overlay文档必须重载。
这将允许dump()函数输出到stdout里。参考window.dump函数。特权应用也可用nsIConsoleService。
启用严格JavaScript错误提示。
这将给出更多关于安装以及更新插件的信息。
Mozilla插件简介
什么是Mozilla插件
Mozilla插件是一段程序。通常,界面使用XUL语言(XML的一个子集)或者XUL内嵌HTML编写,而程序逻辑使用ECMAScript (Standard ECMA-262)(俗称JavaScript)编写。
XUL可以是独立的窗体,可以是对话,也可以是overlay。Overlay可以用于修改已经构建好的界面。下面是一段示例的XUL代码:
<overlay id="main-overlay" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <menu id="file_menu"> <menuitem name="Example One"/> <menuitem name="Example Two"/> <menuitem name="Example Three"/> <menuitem name="Example Four" position="1"/> </menu> </overlay>
而JavaScript可以用来定义程序的行为。按照惯例,我们给出一段“你好世界”程序。
alert("Hello World!");
CSS可以用于自定义样式,而XPCOM可以用于调用Firefox提供的接口。另外,现在有一些JavaScript Library,可以直接使用而降低代码难度。
几个重要的文件
一个Mozilla插件大致由以下文件组成:
. │ chrome.manifest │ install.rdf │ ├─defaults │ └─preferences │ pref.js │ └─chrome │ ├─content │ ├─overlay │ │ ff_overlay.xul │ │ │ └─tools │ ├─skin │ └─locale
最重要的两个文件是chrome.manifest和install.rdf。看字面意思,第一个是&ldquote;Chrome&rdquote;的声明,而第二个则是与安装有关的文件。
chrome是用来形容XUL应用中的所有GUI结构性元素的名词。例如,Firefox浏览器中除了网页内容之外的所有内容都是chrome。
chrome.manifest
下面是一个示例文件:
content imgview chrome/content/ overlay chrome://browser/content/browser.xul chrome://imgview/content/overlay/ff_overlay.xul
可以按照需要进行修改。特别注意的是,overlay行中第三个元素将被附加在第二个元素上,第一个关键词是overlay。
install.rdf
本文件较简单。请参考下面给出的文件进行修改。
<RDF:RDF xmlns:em="http://www.mozilla.org/2004/em-rdf#" xmlns:NC="http://home.netscape.com/NC-rdf#" xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <RDF:Description RDF:about="urn:mozilla:install-manifest" em:id="imgview@osqdu.org.cn" em:name="OSQDU Image Viewer" em:iconURL="" em:version="0.0.0.1" em:type="2" em:creator="OSQDU::Alex" em:developer="OSQDU::Alex" em:description="" em:homepageURL="http://blog.osqdu.org/code-review-of-osqduimg_xx.shtml"> <!-- firefox --> <em:targetApplication RDF:resource="rdf:#$eAzAq3"/> </RDF:Description> <RDF:Description RDF:about="rdf:#$eAzAq3" em:id="{ec8030f7-c20a-464f-9b0e-13905321042f}" em:minVersion="3.1a1pre" em:maxVersion="3.6.*" /> </RDF:RDF>
代理文件
在开发应用时,可以使用代理文件代替build好的插件。这类似UNIX中的软链接。
打开Profile目录内的应用ID目录(例如 $MOZ_PROFILE/extensions/{ec8030f7-c20a-464f-9b0e-13905321042f}
/)。
如果不愿使用GUID(Global Unique Identification Number),也可以使用 “name@domain” 的方式命名,例如
imgview@osqdu.org
。
开始我们的开发之旅
创建项目
也许大家都已经习惯了使用集成开发环境来开发应用,但使用IDE并不是好主意,这里,我推荐使用Vi IMproved
作为主要的编辑器,原因不再赘述,如果不会使用vim,则可以使用Emacs—两个总是要会一个的,其他
推荐的编辑器有Notepad ++,为使用Windows而不想学习高级编辑器的程序员准备。
在Mozilla网站上,我们可以通过简单的通过Add-on Builder插件
生成一个新的插件。下载zip文件,使用你喜爱的存档管理器或unzip
实用程序解压缩,修改install.rdf
以及chrome.manifest
.
代码的编写
这一部分其实我并不想完成,因为代码归根结底还是程序员自己写的,而不是看Tutorial得到的。但是考虑到
有些同学是第一次接触Mozilla开发,对XUL, JavaScript并不熟悉,因此我们以Firefox应用挑战赛
的例程作为例程来讲解怎样开发一个真正的
插件。请
点击这个链接(http://dl1.g-fox.cn/campus/20100618/demo.xpi)
下载本例程。关于应用挑战赛,
请
点击这个链接(2010Firefox火狐浏览器应用挑战赛揭幕!——参加大赛,赢取笔记本电脑和就业机会,抱着本本上班去!)
了解详细情况。
解压缩demo.xpi,列目录,我们可以看到下面的文件:
total 224 drwxr-xr-x 3 alex staff 102B 4 23 09:13 chrome -rw-r--r--@ 1 alex staff 231B 4 22 16:19 chrome.manifest drwxr-xr-x 3 alex staff 102B 4 23 09:13 defaults -rw-r--r-- 1 alex staff 102K 6 17 13:35 demo.xpi -rw-r--r--@ 1 alex staff 923B 4 28 12:16 install.rdf
修改install.rdf
以及chrome.manifest
可以修改本项目的描述。下面我们将主要
以讲解chrome/content
内的代码。
main.xul
是在chrome.manifest
里定义的overlay
,打开,我们可以看到
这是一个标准的XML文档,但命名空间是特殊定义的,元素均是window
的child。其中,包含了一些
script,这些script就是用于控制程序逻辑的了,例如tools/dom.js
控制DOM相关的程序。
XUL
的元素有很多,但是个人认为并不需要完全记忆。只要记住一些基本的元素,例如window
, popup
, vbox
, hbox
等即可。XUL的样式可以通过CSS来订制,这也是
有些Firefox插件可以做的非常漂亮的技术基础。目前,Firefox支持CSS3以及HTML 5,可以在此基础上开发
大量美轮美奂的插件。
有些时候,需要在XUL内插入HTML,这时,只需用<html:{HTMLTAG}>即可。但是要记住的是这是XML,
标签一定要闭合,否则会在parse时出错,导致浏览器无法正常使用,特别是在overlay到浏览器时。当然,最要命的
是chrome.manifest
出现问题。曾经在我开发Firefox插件时,有一天浏览器总是崩溃,只要在终端
里输入firefox -P
,选择我的开发profile之后,浏览器就立即segfault。百思不得其解,最终重
新编译Firefox (在Linux下),上了gdb,慢慢调试,才发现是chrome.manifest
让浏览器疯掉了。
有一个非常好用的工具,XUL
Periodic Table
。这个工具可以用于查询各种各样的布局,直接拿过来copy and paste即可。
下面讲解怎开发程序逻辑。首先要介绍的是dump("String")
函数。本函数非常有用,随时可以在
终端里dump出一行信息,用于监视程序的运行。
JavaScript很简单,语法松散,当然后果就是有时候行为有点怪异。这里举几个简单的例子,告诉大家如何调用
Mozilla提供的接口。截图可能是非常常用的功能,而HTML 5里的canvas
元素正好可以做这件事情。
function CaptureEntirePage() { var doc = getBrowser().selectedBrowser.contentDocument; var win = window.top.getBrowser().selectedBrowser.contentWindow; var left = 0; var top = 0; var width = doc.documentElement.scrollWidth; var height = doc.documentElement.scrollHeight; var fName = "shot.png"; var canvas = document.createElementNS("http://www.w3.org/1999/xhtml", "html:canvas"); canvas.style.width = String(width) + "px"; canvas.style.height = String(height) + "px"; canvas.width = width; canvas.height = height; var ctx = canvas.getContext("2d"); ctx.clearRect(left, top, width, height); ctx.save(); ctx.drawWindow(win, left, top, width, height, "rgb(255,255,255)"); ctx.restore(); var file = SaveTemp(canvas, fName, 'S'); return canvas; }
上面的程序是我曾经开发过的一个插件的一部分。由于上段程序调用的函数都很简单,这里不再讲述如何使用。函数的
使用方法可以去MDC(Mozilla Developer Center)查询。MDC/Code snippets
里有很多现成的非常常用的代码用来参考,有一些CPAN的意思,当然不如CPAN大且全。
下面简单提一下文件操作,以此为例讲解如何使用XPCOM函数。
var file = Components.classes["@mozilla.org/file/directory_service;1"]. getService(Components.interfaces.nsIProperties). get("ProfD", Components.interfaces.nsIFile);
这里,file
是一个nsIFile
类型的变量。ProfD
是Profile目录,其他常用
的目录还有Home,操作系统的家目录,例如/home/alex
或者/Users/alex
。TempD是
操作系统的临时目录,例如/tmp
或/var/tmp
。
下面介绍如何取一个nsIFile 类型变量的路径。
var filePath = file.path;
其实就是这么简单。可以用file.create 的方法添加目录,然后用下面的代码确认:
file.append("NewDirectort"); if( !file.exists() || !file.isDirectory() ) { file.create(Components.interfaces.nsIFile.DIRECTORY_TYPE, 0777); }
上面就添加了一个权限是777(drwxrwxrwx)
的目录。777这个选项似乎对于Windows这类没有安全
特性的操作系统无效。
关于nsIFile的更多信息可以在MDC上查询,这里采用文件操作仅为了讲解较有代表性的函数,带领大家入门。
如何查找更多的信息
有一本书叫做Creating Applications with Mozilla
,但这似乎是Netscape时代的书,
参考价值不大,建议大家不要购买。这里
可以合法的在网上阅读。
我推荐的学习方法是在写代码的过程中进行学习,这样才会有最好的学习效果。只看书,看资料而不写代码是
学不好写程序的。但是,资料仍然是必备的。下面推荐一些互联网资源,希望能帮助到大家。
Copyright (c) 2010 Alex Zhang Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.2 or any later version published by the Free Software Foundation; with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. A copy of the license is included in the section entitled "GNU Free Documentation License".
发表评论
-
网站统计中的数据收集原理及实现[转]
2012-11-04 23:27 774网站数据统计分析工具是网站站长和运营人员经常使用的一种工 ... -
CentOS 6.2 yum安装配置lnmp服务器(Nginx+PHP+MySQL)
2012-10-22 20:22 894准备篇: 1、配置防火墙,开启80端口、3306 ... -
Maven assembly实现自定义打包(转)
2012-10-12 00:40 1444maven-assembly-plugin : 是maven中 ... -
基于CentOS下Nagios的安装
2012-05-23 22:10 8971.确定Centos系统中是否 ... -
主机网卡无网线连接与虚拟机通信
2012-05-04 15:38 1516环 境: 宿主主机windows xp 虚拟机centos4. ... -
Nginx 简单的负载均衡配置示例[转]
2012-02-28 11:52 952[ 2007-10-29 20:50 | by 张 ... -
简明批处理教程
2011-09-13 16:44 659前言 最近对于批处理技术的探讨比较热,也有不少好的 ... -
WINDOWS批处理命令详解
2011-09-13 16:44 932另外3篇文章: 1. 高手必备:简明批处理教程 2.此 ... -
Windows 批处理bat程序设计简明教程
2011-09-13 16:42 1669Windows 批处理bat程序设 ... -
windows bat 批处理
2011-09-13 16:40 969echo、@、call、pause、rem(小技巧:用::代替 ... -
nslookup工具的使用方法
2011-07-23 14:13 856配置好DNS服务器,添加 ... -
Eclipse 调试器和 Debug 视图
2011-06-24 12:32 1792Eclipse 调试器和 Debug 视图 2007-11- ... -
提高代码质量及字节码如何防止内存错误
2011-06-01 12:26 945大多Java 程序员 知道他们的程序通常不会被编译为本机代 ... -
需求的管理
2011-05-31 09:14 1近年来,信息系统项目的规模越来越大,复杂度越来越高。由于管理上 ... -
需求分析的原则
2011-05-31 09:13 5不重视需求过程的项目队伍将自食其果。需求工程 中的缺陷将给项 ... -
如何进行软件需求分析
2011-05-31 09:11 6需求的定义包括从用户 ... -
客户需求文档 MRD 和项目需求分析文档
2011-05-31 09:01 14682008/07/23, 12:00 上午 ... -
亿级数据的高并发通用搜索引擎架构设计
2011-05-15 18:00 1321Author: study | May be ... -
Socket笔记【转】
2011-05-07 22:08 16081、 为了增加效率,可以考虑采用无异常的函数 ... -
给右键菜单加入CMD命令行快速通道
2011-05-04 23:56 944很多人都很喜欢在CMD命令行下来操作计算机,我也是其中之一。 ...
相关推荐
版本号:Firefox 火狐浏览器 14.0.1 2012年7月17日最新发布 简体中文版 更新内容: 谷歌搜索中默认使用SSL:默认在谷歌搜索中启用HTTPS,帮助用户远离某些可能会收集数据,修改或审查搜索结果的网络基础设置。同时...
第一步,我们需要安装Firefox30,不能高于30; http://ftp.mozilla.org/pub/firefox/releases/30.0b9/win32/zh-CN/Firefox Setup 30.0b9.exe 安装浏览器后关闭自动升级: 打开Firefox浏览器--打开菜单(右上角三条...
Mozilla Firefox 英文正式版的介绍: <br>Mozilla开发组的新作,是一个干净、完整的浏览器 <br> 使用前请您先阅读以下条款: <br> 1) 本站仅对原软件包“依样”打包,但不保证所提供软件或程序的完整性和...
下面我们就给大家推荐一款CSS减肥的工具–Firefox插件 CSS Usage. 首先,我们需要安装Firefox(点击此处下载),或者确定你已经安装的版本已经高于3.1;第二步,安装前端开发人员最普及的开发工具 Firebug;第三步,...
rebug是firefox下的一个扩展,能够调试所有网站语言,如Html,Css等,但FireBug最吸引人的就是javascript调试功能,使用起来非常方便,而且在各种浏览器下都能使用(IE,Firefox,Opera, Safari)。除此之外,其他功能还...
/*实现客户端不同域页面间Javascript...目前在IE,Firefox,Chrome浏览器上均可正常运行 本品不跟JQUERY有任何关系,因此适合任何JS开发人员,只要想在已在客户端打开的几个不同域的页面间进行JS交互,就可以使用此插件.
本插件利用开源ajax-js代码NicEdit作为核心,使得Wordpress的评论输入框成为一个所见即所得(WYSIWYG)的图文编辑框,从而提高评论输入内容的精彩程度。 浏览器支持: IE6.0以上,FireFox,Opera,Safari,Chrome ...
侧边翻译是一个简单实用的翻译插件,支持Chrome浏览器、火狐浏览器、360安全浏览器等主流浏览器。我们开发它的主要目的是辅助用户阅读外文文献。为此,我们一直遵循着用户阅读体验第一的原则,并做出了如下努力。
该Firefox附加组件的第一个版本以垂直方式而不是水平方式排列选项卡。 它的灵感来自出色的VerticalTabs附加组件,并从中汲取了灵感。 随意,阅读或提出! 如果您想参与进来并可能 ,我们也有一个。 不兼容说明 ...
本章会向你介绍常用的JavaScript库和它们的设计目标,以及为什么...因为Firebug有一个极其出色的JavaScript测试控制台,本书从头到尾所有的练习都假定你使用的是安装了Firebug插件的Firefox浏览器。 1.2.1 安装Firefox
第一步:运行avast!安装程序,双击下载的文件。 第二步:确认安装,点击“是”在系统上的对话窗口以批准开始您的avast!安装。如图: 第三步:请按照安装说明,在安装程序窗口中点击蓝色按钮开始安装。...
:grinning_face: 「即刻喵」是一个为社区平台「即刻」开发的Chrome浏览器插件,主要用来了网页端无法查看消息内容的缺陷,让「即刻」用户能够在不接触手机的本身下,并获得接近客户端的完整体验。基于Vue.js和...
目前市场上有很多,做的都挺不错,但是他们都有一个共同点,那就是90%以上都是前端工程师开发的,导致我们引入这些UI的时候,很难和程序绑定Monk.UI是一款开源的表单美化插件!目前包涵基础所有表单和第三方插件。...
d)修改 一个form中同时存在两个datetime的input时,第二个不能选择时分的bug; e)增加 input的 kind与datatype的自动对应关系默认对应关系为: Kind为 int、float时 datatype默认为 “1” Kind 为 data时 ...
d)修改 一个form中同时存在两个datetime的input时,第二个不能选择时分的bug; e)增加 input的 kind与datatype的自动对应关系默认对应关系为: Kind为 int、float时 datatype默认为 “1” Kind 为 data时 ...
d)修改 一个form中同时存在两个datetime的input时,第二个不能选择时分的bug; e)增加 input的 kind与datatype的自动对应关系默认对应关系为: Kind为 int、float时 datatype默认为 “1” Kind 为 data时 ...
d)修改 一个form中同时存在两个datetime的input时,第二个不能选择时分的bug; e)增加 input的 kind与datatype的自动对应关系默认对应关系为: Kind为 int、float时 datatype默认为 “1” Kind 为 data时 ...
侧边翻译是一个简单实用的翻译插件,支持Chrome浏览器、火狐浏览器、360安全浏览器等主流浏览器。我们开发它的主要目的是辅助用户阅读外文文献。为此,我们一直遵循着用户阅读体验第一的原则,并做出了如下努力:* ...
侧边翻译是一个简单实用的翻译插件,支持Chrome浏览器、火狐浏览器、360安全浏览器等主流浏览器。我们开发它的主要目的是辅助用户阅读外文文献。为此,我们一直遵循着用户阅读体验第一的原则,并做出了大量的努力!...
Venus 世界上第一款3D浏览器 2010年11月17日发行 【内含PDF操作指南】 如果安装时弹出“runtime error”,请重试安装! 网页界面将以3D全景窗口方式展现?17日的深圳高交会上,以色列VisualDomain软件公司开发的3D...