2. 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
3. Some facts!
W3C Web Browser Statistics
4. Some Interesting add-ons
I read BBC Arabic????
5. Part I. Using Add-on SDK
6. 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
7. Making a translator add-on
8. 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
9. 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
10. Google APIs
Google provides us many of its apis so we can use Googles
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:
11. Create translator.js
Change this to |vi if you would like it to be in Vietnamese
12. In the main.js
13. 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.
14.
15. Resource Description Framework (RDF) 16. XML User Interface
Language (XUL) 17. Tabbed Browser 18. Firefox Interfaces and
ServicesDeveloping a Firefox Add-On from scratch
19. Simple structure of an add-on
sampleapp/
chrome.manifest
install.rdf
content/
sampleapp.js
sampleapp.xul
somedialog.js
somedialog.xul
skin/
sampleapp.css
20. chrome.manifest
Use to help Firefox to find where to add our xul component
Typical manifest file:
21. Resource Description Framework (RDF)
RDF is a language for representing information about resources in
the World Wide Web
Its 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
.
RDF can be written in form of xml.
22. install.rdf
23. XML User Interface Language (XUL)
Window/Dialog/Overlay
Boxes
Widgets: label, toolbarbutton, menu, menuitem, contextmenu,
etc
24. emailsplugin.xul
25. DOM Inspector
Firefox add-on DOM Inspector helps us to inspect the browser
chrome://browser/content/browser.xul
26. Disable XUL Cache
Firefox caches some xul so it could work faster
During development its 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
27. emailsplugin.css
28. 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
29. Option dialog
Sometimes, if we need to input some options into your Firefox
add-on.
Thats the time, you use a xul dialog.
30. 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:
chrome://emailsplugin/content/optionsDialog.xul
31. 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
32. Read from a file
33. Writing to a file
34. Thank you and QA?
Further interests: contact [email protected]
QA?
35. 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
Top Related