Why Firefox? Performance Security User friendly (ease to use) Security Memory efficiency Extensibility Extension, extension and extensions It has a strong development foundation www.developer.mozilla.com www.builder.mozillalabs.com And many more
Some facts! W3C Web Browser Statistics
Some Interesting add-ons I read BBC Arabic????
Part I. Using Add-on SDK
Firefox profiles You can run Firefox in many different profiles Each profiles has its own configuration Caching Histories Network settings Add-ons Etc For our development we should create a new profile for Firefox. In order to run Firefox in with a specific profile the following command is used > firefox -no-remote -P profileName
Making a translator add-on
SDK commands Go to the add-on folder and type > binactivate.bat Now the add-on sdk is ready. You can now type >cfx docs This will bring you to http://127.0.0.1:8888/ This documentation has a complete guide on how to make one add-on
Initializing the package Type the following commands to create a folder and move to that folder > mkdirtestaddon > cd testaddon Initialize the configuration of one add-on > cfxinit
Google APIs Google provides us many of its apis so we can use Google’s service You can go to www.code.google.com and then go to APIs and Tools. Look for “Language…” and then go to “Translate” We are going to use the google REST service. One example of use is:
Create translator.js Change this to “|vi” if you would like it to be in Vietnamese
In the main.js
Deployment Type the following to deploy it in Firefox and test > cfx run Packaging the add-on, Firefox add-on is actually a zip package with the extension “xpi” Type the following to package the add-on > cfxxpi Drag and drop the xpi file to Firefox to install and run.
Add-on typical structure
Resource Description Framework (RDF)
XML User Interface Language (XUL)
Firefox Interfaces and Services
Developing a Firefox Add-On from scratch
Simple structure of an add-on sampleapp/ chrome.manifest install.rdf content/ sampleapp.js sampleapp.xul somedialog.js somedialog.xul skin/ sampleapp.css
chrome.manifest Use to help Firefox to find where to add our xul component Typical manifest file:
Resource Description Framework (RDF) RDF is a language for representing information about resources in the World Wide Web It’s about “Making Statements About Resources” Statement: “Mr. A creates www.mra.com” Subject is “Mr. A” Predicate is “creates” Object is the page (“www.mra.com”) How can we make this as machine-processable <http://www.mra.com> <http://purl.org/dc/elements/1.1/creator> <http://www.mra.com/staffs/Mr.A> . RDF can be written in form of xml.
XML User Interface Language (XUL) Window/Dialog/Overlay Boxes Widgets: label, toolbarbutton, menu, menuitem, contextmenu, etc…
DOM Inspector Firefox add-on DOM Inspector helps us to inspect the browser chrome://browser/content/browser.xul
Disable XUL Cache Firefox caches some xul so it could work faster During development it’s better that we disable the xul caching: Open Firefox in development profile and type “about:config” Right click > New > boolean Name: nglayout.debug.disable_xul_cache and value false
emailsplugin.js You can go to the following page, it will help you about the “Tabbed Browser” https://developer.mozilla.org/en/Code_snippets/Tabbed_browser
Option dialog Sometimes, if we need to input some options into your Firefox add-on. That’s the time, you use a xul dialog.
Option Dialog We add the following files optionsDialog.xul optionsDialog.js optionsDialog.css Change the way we add new tab when user clicks the Open Mails button. Make a for loop and open all pages in the option file Add in the install.rdf one line describe about the option dialog: <em:optionsURL>chrome://emailsplugin/content/optionsDialog.xul</em:optionsURL>
Filefox IO You can do the IO operation (read/write to file) using Firefox XPCOM component The followings are snippets to: take current directory of the extension read from a file write to a file
Read from a file
Writing to a file
Thank you and QA? Further interests: contact firstname.lastname@example.org QA?
References Add-on SDK: www.builder.mozillalabs.com Google APIs: www.code.google.com RDF: http://www.w3.org/RDF/ XUL: Firefox Programming Book or https://developer.mozilla.org/en/XUL DOM Inspector: https://addons.mozilla.org/en-us/firefox/addon/dom-inspector-6622/ Tabbed browser: https://developer.mozilla.org/en/Code_snippets/Tabbed_browser IO with Firefox: https://developer.mozilla.org/en/Code_snippets/File_I%2F%2FO