firefox扩展插件开发笔记(一)add-on sdk的cfx使用和helloworld

firefox扩展插件开发笔记(一)add-on sdk的cfx使用和helloworld

一直对Firefox的插件插件情有独钟,对adb、fireftp等插件都十分惊叹,所以一直想做一个自己的扩展插件出来,可是限于个人水平不足,也因为也没太多firefox教程,直到最近发现add-on sdk简单方便,果断官网学习一下,自己摸索一下开发技术:官方教程,貌似中文教程还不完善。

导航目录

  1. Addon-SDK安装和CFX使用
  2. 编写运行第一个扩展程序
  3. 进一步学习

根据MDN上说目前可以使用三种方式创建扩展:基于Add-on SDK方式、自引导型(bootstrapped)扩展、包含覆盖接口程序段(overlay)的传统形式扩展。第三种就是使用xul和一些底层的浏览器接口开发(不懂),第二种由Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 之后引入,它们不使用覆盖界面来将它们的用户界面应用到应用程序中,而是用程序将它们自己插入到应用程序,所以安装后无需重启浏览器。Add-on SDK我个人觉得就是将第二种的常用API和功能经过封装后的SDK直接给初级开发者使用的。所以我还是直接使用Add-on SDK开始我的第一个扩展插件吧

  1. Add-on SDK的安装和使用cfx
    安装
    首先需要以下准备:

    • 根据官方说明,首先需要安装python2.5/2.6/2.7,注意不支持python 3.x版本
    • Firefox浏览器较新版本,比如我的是firefox 33,测试了一下发现好像26以上版本才支持add-on sdk开发的扩展
    • SDK稳定版:zip文件

    将SDK压缩包解压,进入到addon-sdk-1.17\bin目录下,按住shift然后空白处右键,点击右键菜单中“在此处打开命令窗口”,然后在命令行中输入activate,出现以下提示,命令行标识前也会出现(addon-sdk-1.17)的标识:

     D:\addon-sdk\addon-sdk-1.17\bin>activate
     Welcome to the Add-on SDK. For the docs, visit https://addons.mozilla.org/en-US/developers/docs/sdk/latest/
    
     (D:\addon-sdk\addon-sdk-1.17) D:\addon-sdk\addon-sdk-1.17\bin>
    

    命令提示符出现新的前缀表明你的已经搭建好了SDK的运行环境,可以使用Add-on SDK来开发的命令行工具了,目前主要是使用CFX命令行程序,CFX是主界面加载项的SDK,可以使用它来启动firefox,打包和测试扩展等,你可以输入cfx查看cfx的可用参数。

     (D:\addon-sdk\addon-sdk-1.17) D:\addon-sdk\addon-sdk-1.17\bin>cfx
         
    

    CFX命令
    CFX现在主要就使用以下三个命令
    初始化模板:

     cfx init
    

    启动浏览器并安装测试插件:

     cfx run
    

    打包插件:

     cfx xpi
    

  2. 编写测试扩展程序代码

    现在可以在电脑上任何位置创建一个扩展开发的目录,然后cd 到创建好的目录使用cfx init初始化开发模板:

     (D:\addon-sdk\addon-sdk-1.17) D:\addon-sdk>md myaddon
    
     (D:\addon-sdk\addon-sdk-1.17) D:\addon-sdk>cd myaddon
    
     (D:\addon-sdk\addon-sdk-1.17) D:\addon-sdk\myaddon>cfx init
     * lib directory created
     * data directory created
     * test directory created
     * generated jID automatically: jid1-Z6IJHYZOxACq8g
     * package.json written
     * test/test-main.js written
     * lib/main.js written
    
     Your sample add-on is now ready.
     Do "cfx test" to test it and "cfx run" to try it.  Have fun!
    

    你会发现myaddon下面创建了很多文件,其中packge.json中打开是

     {
       "name": "myaddon",
       "title": "myaddon",
       "id": "jid1-Z6IJHYZOxACq8g",
       "description": "a basic add-on",
       "author": "",
       "license": "MPL 2.0",
       "version": "0.1"
     }
    

    这是插件包的一些信息和配置文件,一目了然(竟然发现跟nodejs中的非常相似,以及后面的一些函数实现也是,MDN上还说cfx用python开发的,firefox39以上使用jpm替代cfx,jpm是nodejs开发的,搞不懂Addon-SDK和nodejs什么联系),lib文件夹是放主程序js代码的目录,data目录存放一些html、图片、网页内嵌脚本(content js)等数据。
    好吧,按照常理,现在开始开发第一个helloworld程序,编辑lib/main.js,将MDN中教程里的源代码复制过来:

     ///使用require导入内建sdk模块,可以看到跟nodejs用法一致
     var buttons = require('sdk/ui/button/action');// sdk/ui/button/action模块可以创建工具栏按钮
     var tabs = require("sdk/tabs"); // sdk/tabs是控制标签页的相关API
    
     var button = buttons.ActionButton({ //设置大小图标,按钮事件等等,这些API函数什么的MDN上有的还是很详细的,注意是有的
       id: "mozilla-link",
       label: "Visit Mozilla",
       icon: {
         "16": "./icon-16.png",
         "32": "./icon-32.png",
         "64": "./icon-64.png"
       },
       onClick: handleClick
     });
    
     function handleClick(state) {
       tabs.open("http://www.mozilla.org/"); //tabs.open(url)可以打开一个新标签页
     }
    

    然后保存以下的三个图标文件到 "data" 文件夹中:
    firefox-icon-16
    firefox-icon-32
    firefox-icon-64

    然后使用cfx run测试程序:

     (D:\addon-sdk\addon-sdk-1.17) D:\addon-sdk\myaddon>cfx run
     I can't find the application binary in any of its default locations
     on your system. Please specify one using the -b/--binary option.
    

    出错了什么情况,根据英文解释是找不到firefox执行文件,好吧我的firefox安装包是直接解压用的,提示来使用-b参数指定firefox二进制文件:

     (D:\addon-sdk\addon-sdk-1.17) D:\addon-sdk\myaddon>cfx run -b "D:\Program Files\Firefox Developer Edition\firefox.exe"
    

    如果嫌麻烦每次都输一大串路径的话,也可以通过编辑addon-sdk-1.17/local.json文件:

     {
           "configs": {
               "mcf": ["-b", "D:\\Program Files\\Firefox-Dev\\firefox.exe","-p","D:\\Program Files\\Firefox\\Profiles\\ffdebug"]
           }
     }
    

    然后使用参数-g来运行配置:

     (D:\addon-sdk\addon-sdk-1.17) D:\addon-sdk\myaddon>cfx run -g mcf
    

    回到主题,如果cfx run运行正确的话,应该蹦出来个使用新配置文件的除了不带任何扩展(除了自己的一个)的firefox,右上角工具栏应该有我们刚才放到data里的狐狸图标,点击后跳转到Mozilla主页大功告成!什么,你说没有hello world!算了吧。。。

     //main.js中加一下,这下完美了吧
     console.log("Hello World!");
    

    接着使用cfx xpi就可以打包扩展了

  1. 进一步学习

    现在可以使用Addon-SDK进行简单开发了,说起最近防火墙又加高了,我一直喜欢用的翻译扩展Gtranslator连接google不好使了,于是乎想想原理也挺简单,于是乎利用以上所学用Add-on SDK做了一个连接baidu API的翻版扩。主要是用了Addon-SDK的request模块(跟nodejs里request一样的用法),实现还是很简单的,详细见下一篇编写内嵌content script脚本。。。

标签: firefox, addon, 扩展插件

仅有一条评论

  1. zccoder zccoder

    掉渣天啊

添加新评论