Firefox addons


Published on

Published in: Education, Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Firefox addons

  1. 1. Introduction to Firefox Add-ons
  2. 2. Firefox Add-ons Agenda •What is add-ons for firefox mean? •What you should have to write an extension? •Creating extension development profile •Configure settings •Creating folder structure & files •Understanding chrome & overlay •Understanding install.rdf & chrome.manifest •XUL, JavaScript & DOM •Examples •Packaging & Installation
  3. 3. Firefox Add-ons What is add-ons for Firefox mean? •To modify the core browser's functionality or appearance and add new features or user interface elements •It consists of three parts: • XUL files, which describe the layout of the user interface • CSS directives that define the appearance of interface elements, and • JavaScript code that determines the behavior of such elements What you should need to build an extension? •Basic HTML & CSS •JavaScript •XML •XUL •Extension Developer
  4. 4. Firefox Add-ons Creating extension development environment • Keep a separate Firefox profile for extension development • Windows: run firefox –P • Max OS: run firefox –profilemanager Configure Firefox Settings • Open Firefox through profile manager • Type in about:config in browser location bar • Change the recommended settings: • javascript.options.showInConsole = true nglayout.debug.disable_xul_cache = true browser.dom.window.dump.enabled = true Set optional settings: javascript.options.strict = true extensions.logging.enabled = true
  5. 5. Firefox Add-ons Creating folder structure & files - chrome - Content .xul .js - Skin .css .png chrome.manifest install.rdf Understanding Chrome & Overlay • Chrome: Firefox uses a pseudo-protocol called 'chrome://' to load XUL files; a chrome address points internally to Firefox application files Lets type: chrome://browser/content/browser.xul • Overlay: It's the primary method by which new components are inserted into Firefox interface. It allows you to modify Firefox's main window UI from your overlay.xul file
  6. 6. Firefox Add-ons Understanding install.rdf & chrome.manifest • Install.rdf: It’s a file about extension metadata. Format <?xml version="1.0"?> <RDF xmlns="" xmlns:em=""> <Description about="urn:mozilla:install-manifest"> <em:id></em:id> # Should be an email id <em:name>dna</em:name> # Name of your extension <em:version>1.0</em:version> # Current version of your extension. <em:type>2</em:type> # The type declares that it is an extension <em:creator>DNA</em:creator> <em:description>how to build an extension</em:description> <em:homepageURL></em:homepageURL> <em:optionsURL>chrome://dna/content/preferences.xul</em:optionsURL> # URL to set preferences of extension <em:targetApplication> <Description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> # Actual id of Firefox <em:minVersion>2.0</em:minVersion> # Min version of firefox to run extension <em:maxVersion>3.*</em:maxVersion> # Max version of firefox to run extension </Description> </em:targetApplication> </Description> </RDF> More Information:
  7. 7. Firefox Add-ons • Chrome.manifest: It is a tab-delimited text file that tells the extension where to find its overlay, content directory, and language directories. Format # Content pointer content dna chrome/content/ # Make content accessible from web pages in Firefox 3 content dna chrome/content/ contentaccessible=yes # Overlay browser skin overlay chrome://browser/content/browser.xul # Language versions locale dna en-US chrome://dna/content/browser.xul chrome/locale/en-US/ More Information
  8. 8. Firefox Add-ons XUL, JavaScript & DOM XUL - eXtendible User Interface Language / XML User Interface Language. It’s a language that lets you build feature rich cross-platform applications. Its a language for describing user interfaces. Features: • Powerful widget-based markup language • Platform portability • Easy customization, localization Some elements that can be created are: • Input controls such as textboxes and checkboxes • Toolbars with buttons or other content • Menus on a menu bar or pop up menus • Tabbed dialogs • Trees for hierarchical or tabular information • Keyboard shortcuts JavaScript – To handle input validations, dynamic content change, event handling. <script src="chrome://myextension/content/browser.js“ type="application/javascript"/> var myextension = { init: function() {}, anotherMethod: function() {}, aStringProperty: 'hello' };
  9. 9. Firefox Add-ons window.addEventListener('load', myextension.init, false); ‘Oncommand’ is the attribute to use the event-handling that associate interface actions. For example <menupopup id="menu_ToolsPopup"> <menuitem id="myextension-toolsmenuitem“ label="My Extension“ oncommand="myextension.hello(this)"/> </menupopup DOM (Document Object Model) The DOM is used to store the tree of XUL nodes. When an XUL file is loaded, the tags are parsed and converted into a hierarchical document structure of nodes, one for each tag. The three main documents are HTMLDocument, XMLDocument, and XULDocument, for HTML, XML and XUL documents respectively. • How to retrieve XUL element? The most common method to retrieve an element in a document is to give the element an id attribute and the use the document's getElementById() method. • Can you manipulate attributes of element? You can manipulate the attributes of an element using any of the methods getAttribute, setAttribute, hasAttribute, removeAttribute For example var box = document.getElementById('somebox'); var flex = box.getAttribute("flex"); var box2 = document.getElementById('anotherbox'); box2.setAttribute("flex", "2");
  10. 10. Firefox Add-ons Packaging & Installation A file with the ‘.xpi’, cross platform install, file extension is a Firefox Browser Extension Archive file. It’s just a zipped file, that contains an install script or a manifest at the root of the file and data files of an extension. Packaging • Select all files, and ZIP. • Rename ZIP file to .xpi Installation • Drag your XPI file into Firefox Tool for package creation Resources • • •
  11. 11. Thank You! Thank you!