Brunch Combo

Firefox Extension Development

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

http://skeevs.com

Firefox architecture

UI Toolkit(XPToolkit)

Gecko Data Persistence

Expat(XML)

Spidermonkey(Javascript)

Necko(Networking)

XPCOM

Extensions + Themes

http://web.uvic.ca/~chunchiu/seng422/Assignment_1_(LHCF).pdf

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.xulstyle 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

MenubarMenubar

StatusbarStatusbar

ToolbarToolbarToolbarbuttonToolbarbutton

ToolboxToolbox

WindowWindow

ButtonButton

MenulistMenulist

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 filesignin= 登录

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…

MetadataMetadata

UI + CodeUI + Code

LocalizationLocalization

Icons + StylesIcons + Styles

Piece it together

Piece it togethervar 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); }, ... ...}

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

http://skeevs.com