1 / 19

firefox add-on developmentfirefox add-on development

bernad
Download Presentation

firefox add-on developmentfirefox add-on development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

    1. Firefox Add-on Development Why and How

    3. Overview

    4. Introduction Senior Design Project – Page Sleuth Browser toolbar to analyze web page design Inherited add-on on top of Greasemonkey Bad interface Drew toolbar onto page Covered up page elements Certain cites disabled functionality Entire project code in one file Hard to read and understand Difficult to add/change Implicit variable declaration (JavaScript) resulted in many bugs

    5. Introduction Decided to refactor the project Garbage in, garbage out Adding more bad code to a bloated project We needed a better interface Shouldn’t get in the way of user Should always be functional The future of the code It was likely someone else would inherit our code For our and future developers, the code should follow good design

    6. Why a Firefox Add-on? Why an add-on at all? Convenience If you want to create some internet browsing functionality or just something while you’re browsing it’s just convenient No reinventing the wheel In creating an independent client, a lot of functionality probably needs to be rewritten There is no point in rewriting what someone else has done, especially if it is right at your fingertips

    7. Why a Firefox Add-on? Why Firefox? Popularity The amount of Firefox users is always increasing, IE users decreasing Ease of use Security Customizability Universal Windows Mac Linux/Unix Even Solaris

    8. Why a Firefox Add-on? Easier Development Firefox add-ons only require basic knowledge of XML and JavaScript IE add-ons need to be written using languages like C++ and Visual Basic Easy packaging (.xpi) Built in Add-on management Extensive amount of existing add-ons, many free and open source

    9. Building the Add-on Basic Framework install.rdf chrome.manifest chrome folder content folder .xul file JavaScript files skins folder (optional) image/icons Style sheet

    10. Building the Add-on Dynamic Development This is so we don’t have to repackage every time we make a change Create a new user using profilemanager place reference file in the user’s profile system folder reference file is named your add-ons unique id contains absolute path to your add-ons install.rdf

    11. Building the Add-on install.rdf (Resource Description Framework) <em:id> tag This id is a unique identifier used to distinguish your add-on from others Format: youraddonname@yoursite.com Name, version, description, creator homepageURL iconURL aboutURL Target Application id tag Min/Max Versions

    12. Building the Add-on chrome.manifest This is how we tell Firefox what packages and overlays the add-on will use content Sets our package name and location Name must be all lowercase overlay Tells where our overlay file is and on top of what overlay to modify

    13. Building the Add-on .xul ("zool“) – XML using widgets overlay tag (everything else is a child to this) Unique id <toolbox> <toolbar> toolbarname accesskey class context hidden persist Button/Menu Elements

    14. Building the Add-on JavaScript simple .js files that go in /content must be referenced in the .xul to be called from it logic and functionality comes from these files

    15. Building the Add-on Skins Using image files and a style sheet we can customize how our elements look Images/icons as well as .css (style sheet) go in skins folder In the style sheet we use rules which reference the images for our .xul elements The .xul must contain the reference to the style sheet

    16. Building the Add-on Packaging Create .jar - Optional this zips up your /content and /skins Create .xpi (“zippy”) essentially a renamed .zip file zips your install.rdf, chrome.manifest, and /chrome Firefox recognizes .xpi as add-on installation files

    17. Summary As far as add-ons go, ones on Firefox are good on any platform, are easier to develop, and there is a much larger pool of code from which to learn and use from. Creating an add-on is really as easy as some XML and JavaScript, two very simple and well-documented languages. Understanding the structure and layout of add-ons will help in realizing the potential of what they are really capable of doing.

    18. Reference Sites http://www.borngeek.com/firefox/toolbar-tutorial/ http://roachfiend.com/archives/2004/12/08/how-to-create-firefox-extensions/ http://xulplanet.com/

More Related