Mozilla Firefox Extension Development

Brunch Combo Firefox Extension Development - Perry Loh - http://twitter.com/skeevs http://skeevs.com

Firefox architecture http://web.uvic.ca/~chunchiu/seng422/Assignment_1_(LHCF).pdf UI Toolkit(XPToolkit) Gecko Data Persistence Expat (XML) Spidermonkey (Javascript) Necko (Networking) XPCOM Extensions + Themes

Technology

Development environment

DOM Inspector

Venkman (Javascript debugger)

Extension Developer’s Extension

IDE

Notepad

SPKet IDE

XULbooster plugin

An Extension

Install.RDF <RDF:RDF> <RDF:Description RDF:about = "rdf:#$iZRGb1" em:id = "{ec8030f7-c20a-464f-9b0e-13a3a9e97384}" em:minVersion = "2.0" em:maxVersion = "3.0.*" /> <RDF:Description RDF:about = "urn:mozilla:install-manifest" em:id = "{8B30B659-1414-40a9-B886-A94631284CAB}" em:name = "Fownce" em:description = "Easily post a link from your address bar or post a message to your friends/public on Pownce" em:version = "0.1.6" em:creator = "Perry Loh" em:homepageURL = "http://skeevs.com" em:iconURL = "chrome://fownce/content/fownce.png" </RDF:Description> </RDF:RDF>

Chrome.manifest content fownce content/ locale fownce en-US locale/en-US/ skin fownce classic/1.0 skin/ overlay chrome://browser/content/browser.xul chrome://fownce/content/overlay.xul style chrome://global/content/customizeToolbar.xul chrome://fownce/skin/overlay.css

The Chrome

Refers to the entire UI package

XUL, javascript, css,…

Can be referenced from URI

Chrome://browser/content/browser.xul

Chrome://myextension/content/overlay.xul

Chrome UI Menubar Statusbar Toolbar Toolbarbutton Toolbox Window Button Menulist

XUL

Stands for XML User-interface Language

Defined by …. XML

Set of UI controls

Layout : groupbox,vbox,hbox,grid,…

Input: textbox, checkbox,listbox, …

Window : window, dialog, …

Javascript

Linked from UI (XUL)

<script src="chrome://myextension/content/overlay.js"/>

Respond to events raised from UI

onload, oncommand, …

Manipulate DOM tree

window, document, content, …

Communicate with XPCOM objects

Preferences, LoginManager, …

Localization

Individual folders per language under [content][locale]<language>

en-US, zh-CN, ja-JP, es-ES, …

Language files consist of

DTD files

<!ENTITY menu.refresh " 刷新 ">

Properties file

signin= 登录

Icons + Styles

Typically in [content][skin] folder

Images are used as icons or graphics

CSS styles elements in UI. To style a button

#fownce-toolbar-button

{

list-style-image: url("chrome://fownce/skin/icon24.png");

-moz-image-region: rect(0px 24px 24px 0px)

}

Piece it together

Extension

+----- install.rdf

+----- chrome.manifest

+----- [content]

+----- *.xul

+----- *.js

+----- [ locale]

+----- [en-us]

+----- *.dtd

+----- *.properties

+----- [skin]

+----- *.css

+----- *.png,*.jpg…

Metadata UI + Code Localization Icons + Styles

Piece it together

Piece it together var fownce = { get prefs () { return Components.classes[ "@mozilla.org/preferences-service;1" ]. getService (Components.interfaces.nsIPrefService). QueryInterface(Components.interfaces.nsIPrefBranch). getBranch( "extensions.fownce." ); }, ... ... optionsAccept : function() { var username = document.getElementById( 'p.username' ).value; var password = document.getElementById( 'p.password' ).value; var sendto = document.getElementById( 'p.sendto' ); var addnote = document.getElementById( 'p.addnote' ); this .prefs.setCharPref( 'sendto' ,sendto.value); this .prefs.setBoolPref( 'addnote' ,addnote.checked) this .clearAuth(); this .setAuth(username,password); }, ... ... }

It’s not that hard ;)

KTHXBAI - Perry Loh - http://twitter.com/skeevs http://skeevs.com