0
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 Persist...
Technology
Development environment <ul><li>DOM Inspector </li></ul><ul><li>Venkman (Javascript debugger) </li></ul><ul><li>Extension ...
An Extension
Install.RDF <RDF:RDF> <RDF:Description   RDF:about = &quot;rdf:#$iZRGb1&quot; em:id = &quot;{ec8030f7-c20a-464f-9b0e-13a3a...
Chrome.manifest content  fownce  content/ locale  fownce  en-US  locale/en-US/ skin   fownce  classic/1.0  skin/ overlay  ...
The Chrome <ul><li>Refers to the entire UI package </li></ul><ul><ul><li>XUL, javascript, css,… </li></ul></ul><ul><li>Can...
Chrome UI Menubar Statusbar Toolbar Toolbarbutton Toolbox Window Button Menulist
XUL <ul><li>Stands for XML User-interface Language </li></ul><ul><li>Defined by …. XML </li></ul><ul><li>Set of UI control...
Javascript <ul><li>Linked from UI (XUL) </li></ul><ul><ul><ul><li><script src=&quot;chrome://myextension/content/overlay.j...
Localization <ul><li>Individual folders per language under [content][locale]<language> </li></ul><ul><ul><li>en-US, zh-CN,...
Icons + Styles <ul><li>Typically in [content][skin] folder </li></ul><ul><li>Images are used as icons or graphics </li></u...
Piece it together <ul><li>Extension </li></ul><ul><li>+----- install.rdf </li></ul><ul><li>+----- chrome.manifest </li></u...
Piece it together
Piece it together var   fownce   =   {   get   prefs ()   {   return   Components.classes[ &quot;@mozilla.org/preferences-...
- Perry Loh - http://twitter.com/skeevs http://skeevs.com
Upcoming SlideShare
Loading in...5
×

Mozilla Firefox Extension Development

7,670

Published on

An introduction to Firefox extensions development. Presented in a talk at Barcamp Malaysia 2008

Published in: Technology
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,670
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
224
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide
  • Reference architecture : http://web.uvic.ca/~chunchiu/seng422/Assignment_1_(LHCF).pdf Modified to include extensions+themes
  • DOM Inspector : https://addons.mozilla.org/en-US/firefox/addon/6622 Extension developer : http://ted.mielczarek.org/code/mozilla/extensiondev/ Spket : spket.com
  • XPI – pronounced as “zippy”, is actually just a zip file The following slides describe each in order (1) metadata (2) content (3) locale (4) css
  • Metadata ------------
  • Metadata ------------ Links providers internally in extension package Content – main content folder Overlay – defines overlay that extends existing window Locale – folder for locale Skin – default skin for extension Style – applies stylesheet on the window
  • UI + Code -------------
  • UI + Code -------------
  • UI + Code -------------
  • UI + Code ------------- DOM Reference : http://developer.mozilla.org/en/docs/Gecko_DOM_Reference
  • Localization ---------------------- DTD – xml entities are called from XUL Properties – string values are used by javascript
  • Icons + Styles ------------------
  • UI + Code -------------
  • UI + Code -------------
  • Transcript of "Mozilla Firefox Extension Development"

    1. 1. Brunch Combo Firefox Extension Development - Perry Loh - http://twitter.com/skeevs http://skeevs.com
    2. 2. 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
    3. 3. Technology
    4. 4. Development environment <ul><li>DOM Inspector </li></ul><ul><li>Venkman (Javascript debugger) </li></ul><ul><li>Extension Developer’s Extension </li></ul><ul><li>IDE </li></ul><ul><ul><li>Notepad </li></ul></ul><ul><ul><li>SPKet IDE </li></ul></ul><ul><ul><li>XULbooster plugin </li></ul></ul>
    5. 5. An Extension
    6. 6. Install.RDF <RDF:RDF> <RDF:Description RDF:about = &quot;rdf:#$iZRGb1&quot; em:id = &quot;{ec8030f7-c20a-464f-9b0e-13a3a9e97384}&quot; em:minVersion = &quot;2.0&quot; em:maxVersion = &quot;3.0.*&quot; /> <RDF:Description RDF:about = &quot;urn:mozilla:install-manifest&quot; em:id = &quot;{8B30B659-1414-40a9-B886-A94631284CAB}&quot; em:name = &quot;Fownce&quot; em:description = &quot;Easily post a link from your address bar or post a message to your friends/public on Pownce&quot; em:version = &quot;0.1.6&quot; em:creator = &quot;Perry Loh&quot; em:homepageURL = &quot;http://skeevs.com&quot; em:iconURL = &quot;chrome://fownce/content/fownce.png&quot; </RDF:Description> </RDF:RDF>
    7. 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
    8. 8. The Chrome <ul><li>Refers to the entire UI package </li></ul><ul><ul><li>XUL, javascript, css,… </li></ul></ul><ul><li>Can be referenced from URI </li></ul><ul><ul><li>Chrome://browser/content/browser.xul </li></ul></ul><ul><ul><li>Chrome://myextension/content/overlay.xul </li></ul></ul>
    9. 9. Chrome UI Menubar Statusbar Toolbar Toolbarbutton Toolbox Window Button Menulist
    10. 10. XUL <ul><li>Stands for XML User-interface Language </li></ul><ul><li>Defined by …. XML </li></ul><ul><li>Set of UI controls </li></ul><ul><ul><li>Layout : groupbox,vbox,hbox,grid,… </li></ul></ul><ul><ul><li>Input: textbox, checkbox,listbox, … </li></ul></ul><ul><ul><li>Window : window, dialog, … </li></ul></ul>
    11. 11. Javascript <ul><li>Linked from UI (XUL) </li></ul><ul><ul><ul><li><script src=&quot;chrome://myextension/content/overlay.js&quot;/> </li></ul></ul></ul><ul><li>Respond to events raised from UI </li></ul><ul><ul><li>onload, oncommand, … </li></ul></ul><ul><li>Manipulate DOM tree </li></ul><ul><ul><li>window, document, content, … </li></ul></ul><ul><li>Communicate with XPCOM objects </li></ul><ul><ul><li>Preferences, LoginManager, … </li></ul></ul>
    12. 12. Localization <ul><li>Individual folders per language under [content][locale]<language> </li></ul><ul><ul><li>en-US, zh-CN, ja-JP, es-ES, … </li></ul></ul><ul><li>Language files consist of </li></ul><ul><ul><li>DTD files </li></ul></ul><ul><ul><ul><li><!ENTITY menu.refresh &quot; 刷新 &quot;> </li></ul></ul></ul><ul><ul><li>Properties file </li></ul></ul><ul><ul><ul><li>signin= 登录 </li></ul></ul></ul>
    13. 13. Icons + Styles <ul><li>Typically in [content][skin] folder </li></ul><ul><li>Images are used as icons or graphics </li></ul><ul><li>CSS styles elements in UI. To style a button </li></ul><ul><li>#fownce-toolbar-button </li></ul><ul><li>{ </li></ul><ul><li> list-style-image: url(&quot;chrome://fownce/skin/icon24.png&quot;); </li></ul><ul><li> -moz-image-region: rect(0px 24px 24px 0px) </li></ul><ul><li>} </li></ul>
    14. 14. Piece it together <ul><li>Extension </li></ul><ul><li>+----- install.rdf </li></ul><ul><li>+----- chrome.manifest </li></ul><ul><li>+----- [content] </li></ul><ul><li>+----- *.xul </li></ul><ul><li>+----- *.js </li></ul><ul><li>+----- [ locale] </li></ul><ul><li>+----- [en-us] </li></ul><ul><li>+----- *.dtd </li></ul><ul><li>+----- *.properties </li></ul><ul><li>+----- [skin] </li></ul><ul><li>+----- *.css </li></ul><ul><li>+----- *.png,*.jpg… </li></ul>Metadata UI + Code Localization Icons + Styles
    15. 15. Piece it together
    16. 16. Piece it together var fownce = { get prefs () { return Components.classes[ &quot;@mozilla.org/preferences-service;1&quot; ]. getService (Components.interfaces.nsIPrefService). QueryInterface(Components.interfaces.nsIPrefBranch). getBranch( &quot;extensions.fownce.&quot; ); }, ... ... 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); }, ... ... }
    17. 17. - Perry Loh - http://twitter.com/skeevs http://skeevs.com
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×