mozilla firefox extension development
Post on 12-May-2015
7.640 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related