Plugin for Firefox

1
Plugin for Firefox

• CS297 Vijay Rao

2
Plugin for Firefox

• Firefox has a very stable framework to create
  browser extensions.
• It uses XUL to specify overlays which then render
  the UI
• A combination of XUL and javascript allows the
  user to extend the browser

3
Steps to create a FF plugin

• Creating the right directory structure
• To create a plugin the following is the directory
  structure that should be present
• Say the plugin is called Foo then following is
  the dir structure
• Foo
• -chrome
• -content
• - foo.xul
• - foo.js
• -chrome.manifest
• -install.rdf

4
Install.rdf

• The install.rdf provides details of unique id of
  the application the application version etc. By
  also specifying the GUID of firefox we are
  telling it that this is an extension to Firefox.
• ltemtargetApplicationgt
• ltDescriptiongt
• ltemidgtec8030f7-c20a-464f-9b0e-13
  a3a9e97384lt/emidgt
• ltemminVersiongt1.5lt/emminVersiongt
  
• ltemmaxVersiongt2.0.0.lt/emmaxVers
  iongt
• lt/Descriptiongt
• lt/emtargetApplicationgt
• The first section describes the current plugin
• ltemidgttuttoolbar_at_borngeeklt/emidgt
• ltemnamegtTutorial Toolbarlt/emnamegt
• ltemversiongt1.0lt/emversiongt

5
chrome.manifest

• The chrome.manifest gives the location of the
  content including the location of the xul files.
• content tuttoolbar chrome/content/
• overlay chrome//browser/content/browser.xul
  chrome//tuttoolbar/content/tuttoolbar.xul

6
XUL and Javascript files

• The XUL files are encompassed in the following
  root tag
• ltoverlay id"TutTB-Overlay"
  xmlns"http//www.mozilla.org/keymaster/gatekeeper
  /there.is.only.xul"gt

7
Firefox Profiles

• It is best to create a separate profile to
  prevent the plugin from disrupting the bookmarks
  etc
• I created a test profile called dev

8
Integrating the plugin

• Integrating the plugin involves a simple step
• Drop a file with the same name as the application
  id in our case Foo in the extensions directory of
  the profile folder
• The file just has the path to the root folder of
  the plugin.
• On browser restart the plugin is picked up by FF
  and displayed.
• SWEET!!!

9
References

• http//www.borngeek.com/firefox/toolbar-tutorial/