源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

firefox 扩展开发技巧

  • 时间:2020-09-09 03:14 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:firefox 扩展开发技巧
Firefox Extension 参考:[url=http://developer.mozilla.org/en/Extensions]http://developer.mozilla.org/en/Extensions[/url] [url=http://www.ibm.com/developerworks/cn/web/wa-lo-firefox-ext/]http://www.ibm.com/developerworks/cn/web/wa-lo-firefox-ext/[/url] 目录结构: chrome.mainfest        // 定义整个扩展的目录结构 install.rdf        // 定义扩展的ID,名称等等信息 chrome/ chrome/content/        // 定义扩展界面(.xul文件),定义扩展界面实现功能的逻辑(.js文件) chrome/skin/        // 定义扩展界面上用到的图片,属性风格,皮肤文件等(.css,.ico,.png) chrome/locale/ chrome/locale/en-US/        // 定义翻译字符串(.dtd文件),属性翻译字符串(.properties文件) chrome/locale/zh-CN/     // 定义翻译字符串(.dtd文件),属性翻译字符串(.properties文件) defaults/ defaults/preferences/    // 定义需要保存的信息默认值(.js文件) components/        // 定义扩展逻辑用的方法接口(.xpt, .dll文件) 安装扩展: 将上面目录结构的文件打包成.zip文件,然后改后缀为.xpi,拖到firefox界面上就会弹出安装界面安装就可以了 chrome.mainfest详读 // 示例代码详解 # 在前面加"#"表示注释 # 注册chrome.manifest # 指定将要读取的修改内容的路径,后面必须带"/" 可以修改Toolbars, menu bars, progress bars, # and window title bars are all examples of elements that are typically part of the chrome content    my_extension_name    chrome/content/ # 指定将要加载的皮肤路径,后面必须带"/" skin    my_extension_name        classic/1.0     chrome/skin/ # 指定将要读取的语言路径,后面必须带"/" locale    my_extension_name        en-US            chrome/locale/en-US/ locale    my_extension_name        zh-CN            chrome/locale/zh-CN/ # 将后面的文件添加到前面的文件里 overlay    chrome://browser/content/browser.xul    chrome://my_extension_name /content/statusbarOverlay.xul # 都是可选参数 # style         chrome://URI-to-style                                 chrome://stylesheet-URI [flags] # override     chrome://package/type/original-uri.whatever     new-resolved-URI [flags] # resource     aliasname                                             uri/to/files/ [flags] # application = app-ID # appversion 操作符 version    (操作符为"=", "<", ">", "<=", ">=") # os = WINNT(操作系统) # osversion >= 10.5 # platform格式如下: # content     global-platform jar:toolkit.jar!/toolkit/content/global-platform/     platform install.rdf详读     参考:[url=http://developer.mozilla.org/en/Building_an_Extension]http://developer.mozilla.org/en/Building_an_Extension[/url] <?xml version="1.0"?> <RDF xmlns="[url=http://www.w3.org/1999/02/22-rdf-syntax-ns]http://www.w3.org/1999/02/22-rdf-syntax-ns[/url]#" xmlns:em="[url=http://www.mozilla.org/2004/em-rdf]http://www.mozilla.org/2004/em-rdf[/url]#"> <Description about="urn:mozilla:install-manifest"> // 下面的参数是必须要添加的 // <em:id>    当前平台下生成的GUID // <em:version>      由"."连接的数字 // <em:type>    指定的数字.         // 2代表Extensions,4代表Themes,8代表Locale,32代表Multiple Item Package // <em:targetApplication>    指定这个扩展是为那个应用程序使用的 // 格式如下:    <em:id>指定的应用程序的GUID; //        <em:minVersion>,<em:maxVersion>分别为应用程序的最小最大版本号 //<em:targetApplication> //  <Description> //   <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> //    <em:minVersion>1.5</em:minVersion> //    <em:maxVersion>2.0.0.*</em:maxVersion> //  </Description> //</em:targetApplication> // <em:name>    显示在应用程序界面上的扩展名称 // 下面的参数是可选择添加的 // <em:description>        描述该扩展的功能 // <em:creator>        创始人 // <em:homepageURL>        主页 // <em:updateURL>        更新主页 // <em:optionsURL> // <em:aboutURL> // <em:iconURL> // <em:developer>        开发者 // <em:translator>        翻译者 // <em:contributor>         捐助者 // <em:targetPlatform>    目标程序的系统平台 // <em:localized>        集中显示一些扩展的信息 // <em:locale>    指定将来用那种语言来显示信息(必要),在使用了<em:localized>后用 // 例子: <em:id>{69354808-F0D7-40CC-BB5F-8C1B8F57CECC}</em:id> <em:version>0.91</em:version> <em:type>2</em:type> <em:name>statusbar settor</em:name> // 目标程序为firfox <em:targetApplication>     <Description>         <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> //firefox的GUID         <em:minVersion>1.5</em:minVersion>         <em:maxVersion>2.0.0.*</em:maxVersion>     </Description> </em:targetApplication> // 添加可选的信息 // <creator>Federico Parodi</creator> // <creator>Stefano Verna</creator> // <creator>Nils Maier</creator> // <developer>Federico Parodi</developer> // <developer>Stefano Verna</developer> // <developer>Nils Maier</developer> // <aboutURL>chrome://dta/content/about/about.xul</aboutURL> // <iconURL>chrome://dta/skin/common/icon.png</iconURL> // <homepageURL>http://downthemall.net/</homepageURL> // <optionsURL>chrome://dta/content/preferences/prefs.xul</optionsURL> </Description> </RDF> chrome 详解: 1 chrome/content/ content这个文件夹里的文件类型主要包括.js和.xul两种 .xul文件主要用来实现界面布局的,当然也可以实现简单的逻辑操作,建议所有逻辑都放到相应的.js里去处理,下面给出实例代码statusbarOverlay.xul: <?xml version="1.0" encoding="UTF-8"?> // 定义xul中用到的多语言字符串 <!DOCTYPE overlay SYSTEM "chrome:// my_extension_name/locale/statusbarOverlay.dtd"> // 所有的.xul文件都要加的项,id可以随便设置的 <overlay id="bc_ext_overlay" xmlns="[url=http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul]http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul[/url]">     //申明要用到的.js文件     <script src=" statusbarOverlay.js"/>        //申明要用到的属性多语言字符串     <stringbundleset id="stringbundleset">         <stringbundle id="ext-strings" src="chrome:// my_extension_name/locale/ statusbarOverlay.properties"/>     </stringbundleset> //添加xul元素到firefox界面上 //相关xul元素特性请查看xul教程 //参考:[url=http://developer.mozilla.org/en/XUL_Tutorial]http://developer.mozilla.org/en/XUL_Tutorial[/url] <popup id="contentAreaContextMenu"> <menuitem image="chrome://my_extension_name/skin/download_all.png"  class="menuitem-iconic" id=" download_all_item"   label="&download_all_text;" insertafter="context-selectall" oncommand=" onCmdDownloadAll(event)"/> <menuitem image="chrome:// my_extension_name/skin/download_link.png" class="menuitem-iconic" id="download_link_item"  label="&download_link_text;" accesskey="&download_link_text.accesskey;" insertafter="context-selectall" oncommand="onCmdDownloadSingleLink(event)"/> <menuseparator id="seperator_1" insertafter="context-selectall" /> </popup> </overlay> .js文件主要用来相应.xul里逻辑处理,下面给出实例代码statusbarOverlay.js: 参考javescription脚本语法 onLoad: function() {     // initialization code     this.initialized = true;     this.strings = document.getElementById("bc_ext-strings");     document.getElementById("contentAreaContextMenu").addEventListener("popupshowing", onContentPopupMenu, false);   }, onCmdDownloadSingleLink: function(e) { alert(“download single link”); }, onCmdDownloadAll: function(e) { alert(“download all link”); } window.addEventListener("load", function(e) { onLoad(e); }, false); 2 chrome/skin/ 存放.xul中用到的图片,属性风格,皮肤文件等(.css,.ico,.png) 3 chrome/locale/ chrome/locale/en-US/        // 定义翻译字符串(.dtd文件),属性翻译字符串(.properties文件) chrome/locale/zh-CN/     // 定义翻译字符串(.dtd文件),属性翻译字符串(.properties文件) .dtd文件中定义要翻译的字符串 示例代码: 在zh-CN文件夹中的statusbarOverlay.dtd <!ENTITY download_link_text "下载此连接"> <!ENTITY download_all_text "下载全部连接"> 在en-US文件夹中的statusbarOverlay.dtd <!ENTITY download_link_text "download this link"> <!ENTITY download_all_text "download all links"> .properties文件中保存着要保存的属性的多语言字符 示例代码: 在zh-CN文件夹中的statusbarOverlay.properties extensions.{69354808-F0D7-40CC-BB5F-8C1B8F57CECC}.description=常用来下载http链接。 在en-US文件夹中的statusbarOverlay.properties extensions.{69354808-F0D7-40CC-BB5F-8C1B8F57CECC}.description=it used to download http links. defaults 详解 4 defaults/preferences/     // 定义需要保存的信息默认值(.js文件) .js文件中描述的是需要永久保存起来的变量的值,每次启动时会载入.js中字段中保存的值来初始化.xul文件中的元素 示例代码: // 给变量定义默认值 pref("login.time",""); pref("username, "ghostjeky"); pref("extensions.{69354808-F0D7-40CC-BB5F-8C1B8F57CECC}.description", "chrome://my_extension/locale/statusbarOverlay.properties");//引用多语言属性字符串 5 components/        // 定义扩展逻辑用的方法接口(.xpt, .dll文件) 6 开发扩展时常用的几个扩展 DOM Inspector 主要用来检测目标位置的元素的id,例如:你想在主菜单-》工具-》选项菜单的后面再增加一个菜单,则只要用DOM Inspector检测出选项菜单的id为 menu_preferences,则你的xul就可以这么写<menuitem id=”myid” insertafter=” menu_preferences” label=”mymenuitem”/> 下载地址:[url=https://addons.mozilla.org/zh-CN/firefox/addon/6622]https://addons.mozilla.org/zh-CN/firefox/addon/6622[/url] Extension Developer's Extension 主要用来测试你写的那段javascript代码是不是能够正确执行,预览xul代码是不是你想要的布局. 在about:config中设置(只有安装了这个扩展才有的配置项) browser.dom.window.dump.enabled  = true //允许使用 dump() 语句向标准控制台输出信息,真正能看到dump()语句的输出还有使用-console参数启动firefox 下载地址:[url=https://addons.mozilla.org/zh-CN/firefox/addon/7434]https://addons.mozilla.org/zh-CN/firefox/addon/7434[/url] Javascript debugger 主要用来调试js代码用的,但要能在里面找到你写的js文件前提是你的js已经正确加载了,先将Debug菜单下面的Exclude Browser Files前面的勾去掉 下载地址:[url=https://addons.mozilla.org/zh-CN/firefox/addon/216]https://addons.mozilla.org/zh-CN/firefox/addon/216[/url] Firebug 听很多人说很好用 调试js,查找错误,但我一直没有领略到它的好处,只是用来查找js的错误 下载地址:[url=https://addons.mozilla.org/zh-CN/firefox/addon/1843]https://addons.mozilla.org/zh-CN/firefox/addon/1843[/url]
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部