Page 0: Page 1: Brunch Combo Firefox Extension Development - Perry Loh http://twitter.com/skeevs http://skeevs.com Page 2: Firefox architecture User Interface UI Toolkit(XPToolkit) Gecko Necko (Networking) Spidermonkey (Javascript) Expat (XML) Extensions + Themes Data Persistence XPCOM http://web.uvic.ca/~chunchiu/seng422/Assignment_1_(LHCF).pdf Page 3: Technology javascript dom xml xpcom xul css ajax Page 4: Development environment • • • • DOM Inspector Venkman (Javascript debugger) Extension Developer’s Extension IDE – Notepad – SPKet IDE – XULbooster plugin Page 5: An Extension *.xul UI + Code *.js *.dtd Localization *.properties Chrome.manifest Install.rdf Metadata xpi *.css Icons + Styles *.png Page 6: 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> Page 7: 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 Page 8: 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 Page 9: Chrome UI Toolbox Menubar Toolbarbutton Toolbar Window Menulist Statusbar Button Page 10: 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, … Page 11: 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, … Page 12: 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=登录 Page 13: 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) } Page 14: Piece it together Extension +----- install.rdf +----- chrome.manifest +----- [content] +----- *.xul +----- *.js +----- [locale] +----- [en-us] +----- *.dtd +----- *.properties Metadata UI + Code Localization +----- [skin] +----- *.css +----- *.png,*.jpg… Icons + Styles Page 15: Piece it together <!DOCTYPE overlay SYSTEM "chrome://fownce/locale/fownce.dtd"> <overlay id="fownce-overlay"> <script src="overlay.js"/> <stringbundleset id="stringbundleset"> <stringbundle id="fownce-strings" src="chrome://fownce/locale/fownce.properties"/> </stringbundleset> <toolbarpalette id="BrowserToolbarPalette"> <toolbarbutton id="fownce-toolbar-dropdown" label="&fownceToolbar.label;" tooltiptext="&fownceToolbar.tooltip;" type="menu"> <menupopup id="fownce-popup"> <menuitem id="post-to-pownce-link“ label="&fownceToolbarButton.link;“ oncommand="fownce.onMenuItemPostLink()" /> </menupopup> </toolbarbutton> </toolbarpalette> </overlay> Page 16: Piece it together var fownce = { get prefs() { return Components.classes["@mozilla.org/preferencesservice;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); }, ... ... } Page 17: It’s not that hard ;) Page 18: KTHXBAI - Perry Loh http://twitter.com/skeevs http://skeevs.com Page 19: