提高firefox扩展开发效率
本文介绍一些技巧和开发扩展中使用的工具,主要参考:https://developer.mozilla.org/En/Firefox_addons_developer_guide的第五章(Chapter 5: Let's build a Firefox extension )。如有不清楚的地方可以参考原文,以及在我的博客中寻找这篇文章的翻译版。
创建开发者profile
详细的资料可以参考:设置扩展开发环境。为了将平常使用的profile和开发调试使用的profile区分开,强烈建议开发之前创建一个开发者profile。
创建开发者profile:关闭所有运行着的Firefox程序,运行->Firefox –p(XP中直接在运行中输入,WIN7中开始->所有程序->附件->运行),新建一个dev用户配置文件,我将其保存在E:\firefoxProfile\DEV中。如图示:
使用开发者profile打开Firefox。当然可以用前面那种方式打开profile管理器选择启动Firefox的profile。但通常是建立一个bat文件,其内容如下:
set MOZ_NO_REMOTE=1
start "" "D:\Program Files (x86)\Mozilla Firefox\firefox.exe" -P dev
set后面的参数是为了在用这个profile打开之后不会影响Firefox用其他profile运行。start后面的路径表明Firefox的安装路径, -P后面则是需要使用的profile名称。将上述内容保存为dev.bat,这样如果需要用dev profile运行Firefox则只需双击dev.bat即可。
当然还可以为这个bat文件创建一个快捷方式放在你认为方便的位置。
安装辅助开发的扩展
用刚创建的profile运行Firefox,发现Firefox默认会安装一些扩展,如下图:
由于我们这个profile是用来开发扩展的,所以我选择将除附加组件管理器之外的扩展全部移除。
然后建议安装以下几个扩展:
venkman
DOM Inspector
Firebug
当然你也可以有其他选择,上面这三个扩展我使用过DOM Inspector和Firebug而venkman我没有使用过,是用来调试JS的。这些扩展的功能可以找到相关介绍的资料,在此不赘述。
选择优秀的代码编辑器
好了,到这里才是本文的重点内容,前面的你都可以在其他地方找到相关陈述,但这一节在其他地方却不一定能够找到一样的内容。
我所说的优秀的代码编辑器仅仅针对Firefox扩展开发,我要介绍的是editplus,当然你也可以选择其他你认为方便的代码编辑器。Firefox扩展开发中需要编辑的代码主要有两种,一种是XUL文件,另外一种是JavaScript文件。要提高编辑代码的效率,需要代码编辑器能够提供自动完成功能,并尽量减少按键输入,为代码着色也是很实用很重要的功能。Editplus就能够做到这些,因此我认为它是Firefox扩展开发中的一款优秀的代码编辑器。下面我对如何让editplus实现自动完成和减少我们的按键输入。
介绍两个部分,首先介绍如何对editplus进行设置以使其能够完成我们需要的功能。然后介绍如何让editplus按照我们的需求,更加适应我们自己的习惯。
设置editplus
首先,假设我们已经有了XUL文件相关的userfile,运行editplus,如下图,选择工具\首选项。
弹出参数选择对话框,
选择设置&语法,然后点击“添加”按钮,添加XUL文件类型。
输入文件类型描述,点击确定。
输入文件扩展名为XUL。并按上图分别选择XUL文件对应的语法文件、自动完成文件,以及素材。
下面可以根据需要设置模板。如下图:
设置完成之后,我们来看看如何使用这些方便的功能。
选择文件->新建->XUL(按上面设置了模板之后,新建里面多出一个XUL)。如下图,新建了一个如下所示的XUL文件:
在上面的素材默认会选择XUL(tags),需要其他素材时可以点击下拉列表选择其他素材。接下来,体验一下方便快捷的自动完成功能,如下图,在素材窗口中找到window,双击则在光标处输入了window。
光标停在window的右边,然后按下空格,结果如下图:
自动将window补全成了:
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
>
</window>
且光标停在window开始标签的右括号前面,方便对window的id、title等属性进行设置。
注:不管是自动补全还是素材文件都可以指定在自动输入之后光标的位置。
Editplus的userfile
Editplus的userfile包括语法文件,素材文件以及自动完成文件,我将模板文件也当做userfile。Editplus的userfile可以在到这里去下载:http://www.editplus.com/html.html,前面使用到的与XUL有关的userfile我已经提交到了这个网站,有需要的可以自行下载http://www.editplus.com/dn.php?n=xul_ctl_acp_stx.zip也可以去下载其他你需要的userfile。
关于editplus的特性介绍这里给出两个链接,想深入了解的可以去看看:
http://icodon.com/the-experience-of-using-editplus-brief.html
http://polaris.blog.51cto.com/1146394/372353
如下图,(;开始的一行是注释),以#+keyword开头,#结尾。图中已经说明得比较清楚了,不过多的阐述。学写userfile最好的方式就是打开一个已经存在的userfile,仿照别人的userfile写,语法很简单。
利用editplus开发扩展
Firefox扩展的开发,所涉及到的文件,除了图像文件之外,其他文件都只需要一个文本编辑器就可以打开并编辑。下面为扩展开发者介绍一个editplus中非常不错的功能——建立工程。
打开editplus,在工具菜单前面就是工程菜单。选择工程->编辑工程..弹出如下工程对话框:
点击添加工程,以添加XUL userfile为例,输入XUL userfile,然后点击上图中的添加文件(根据不同需求也可以添加目录,不过我个人感觉添加文件比较实用),可以设置一下目录名称(无表示只显示文件名、从层1表示完整路径,从层2表示从目录第二层开始显示,以此类推)。如下图:
添加工程之后,工程->选择工程->就能看到我们创建的工程,选择这个工程,接下来在工程菜单下面就会依次列出我们为这个工程添加的文件,选择某个文件就可以打开并进行编辑了。
要提高扩展开发的效率其实根本上还是依赖于对各种技术掌握的掌握程度,使用工具仅仅是辅助性的。下一篇文章我将会详细介绍如何开发一个简单的Firefox扩展。
注:本文所使用的editplus的userfile文件也可以到我的资源中下载。免积分的。
提高firefox扩展开发效率相关推荐
- css显示内容越来越模糊_55 个提高你 CSS 开发效率的必备片段
这篇文章会记录我们平时常用到的 CSS 片段,使用这些 CSS 可以帮助我们解决许多实际项目问题中遇到的,墙裂建议点赞收藏再看,方便日后查找 附笔记链接,阅读往期更多优质文章可移步查看:前端笔记本 清 ...
- [55 个提高你 CSS 开发效率的必备片段]
[55 个提高你 CSS 开发效率的必备片段] 清除浮动 浮动给我们的代码带来的麻烦,想必不需要多说,我们会用很多方式来避免这种麻烦,其中我觉得最方便也是兼容性最好的一种是,在同级目录下再创建一个&l ...
- 55个提高你CSS开发效率的必备片段
55个提高你CSS开发效率的必备片段 来自:Join GitHub today 链接:https://github.com/Wscats/CV/issues/29 这篇文章会记录我们平时常用到的 CS ...
- C#(Net)软件开发常用工具汇总,提高你的开发效率
C#(Net)软件开发常用工具汇总,提高你的开发效率 写代码也要读书,爱全栈,更爱生活.每日更新原创IT编程技术及日常实用技术文章. 我们的目标是:玩得转服务器Web开发,搞得懂移动端,电脑客户端更是 ...
- firefox扩展开发(二):用XUL创建窗口控件
firefox扩展开发(二):用XUL创建窗口控件 2008-06-11 16:57 1.创建一个简单的窗口 <?xml version="1.0"?> <?xm ...
- 有关提高visual studio开发效率的方法
有关提高 visual studio 开发效率的方法见下面的参考文章: http://www.iplaysoft.com/vs2010-features.html http://www.cnblog ...
- firefox扩展开发(四) : 更多的窗口控件
firefox扩展开发(四) : 更多的窗口控件 2008-06-11 17:00 标签盒子 标签盒子是啥?大家都见过,就是分页标签: 对应的代码: <?xml version="1. ...
- firefox扩展开发(八) :控件激活
firefox扩展开发(八) :控件激活 2008-06-11 17:01 当我们用鼠标点击一个控件,或者用TAB键移动到一个控件上时,我们说这个控件被激活 了(focus),离开这个控件时,我们说这 ...
- 自定义snippet(代码段)就可以极大的提高你的开发效率 VScode快速一键生成html、vue、jsx、ajax、sass、docker等代码片段
学会添加自定义snippet(代码段)就可以极大的提高你的开发效率 1.文件 => 首选项 => 用户代码片段 2.选择你需要新建的代码片段的语言 3.进入代码片段编辑界面 1. 所有的代 ...
最新文章
- vivo解bl锁_黔隆科技刷机教程酷派B770S忘记密码刷机解锁降级救砖解屏幕锁账户锁教程...
- P1119 灾后重建(经典floyd)
- go语言之行--golang核武器goroutine调度原理、channel详解
- 想成功创业:要掌握“三笔钱”和“六三一”原则
- 对jvm 同步锁的理解
- MyEclipse中SVN的常见的使用方法
- 计算当前序列的字典序序号(洛谷P2524题题解,Java语言描述)
- “如果产品经理躺平接受需求,那程序员免不了想打一架”
- 访问 Confluence 6 的计划任务配置
- java接收ajax上传文件_使用ajax方式上传文件
- 在线合成车牌照片【模拟车牌,用于车牌识别项目测试】
- 查看计算机ping,通过ping命令检测主机的存活性
- android 获取微信二维码 DiffDevOAuth.auth
- HTML5桌面应用程序开发
- 英雄联盟 League of Legends for Mac(LOL美服)
- python 读取文件夹下文件,将文件名作为制作标签,训练样本
- 数据结构 图的邻接矩阵
- 聊天app开发——如何开发聊天app
- 计算机配机方案和理由,配机方案
- 那些人,那些事儿之小武
热门文章
- echarts 地图 加涟漪 加路线 加移入
- Partial Dependence and Individual Conditional Expectation plots
- 手机威客php源码,最新威客众筹系统完整版PHP源码+支持支付宝和微信多种支付方式+PC+WAP+微信三端数据同步...
- 灰度环保完成数千万元Pre-A轮融资,将着力搭建环保包装信息化物流产业链
- 根据词云寻找对应文章的Web开发
- 计算机上的游戏怎么不见了怎么办,电脑桌面上的游戏图标不见了怎么办
- thinkphp设计模式讲解
- 特斯拉入华,充电接口怎么办?
- 新概念2 课文和单词(10)
- 西工大里的河南烩面的五一故事(数模、作业、课题组、考试)