1 / 19

Firefox Addon development tutorial

Firefox Addon development tutorial. 谢烜 xxie@mozilla.com 2011-7-4. What we should learn. Learn what extension are, what they can do, the staff they are made of Configure your development environment Make an extension Package and test it. Required Gears. A Linux Mac or Windows machine

afya
Download Presentation

Firefox Addon development tutorial

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 Addon development tutorial • 谢烜xxie@mozilla.com • 2011-7-4

  2. What we should learn • Learn what extension are, what they can do, the staff they are made of • Configure your development environment • Make an extension • Package and test it

  3. Required Gears • A Linux Mac or Windows machine • A terminal application(Gnome Terminal, Terminal, Command Prompt) • A text editor(Notpad++, TextEdit, Komodo Edit, Vim or Emacs) • A zip archiver (zip or 7-zip) • Basic knowledge of HTML CSS and JavaScript

  4. What is an extension? • A package of files that modify Firefox's appearance and/or behavior • In the zip file archive format (but in .xpi file extension) • Two manifesto file describe content • Distribute, browse and search via AMO • Install, manage uninstall via Add-ons window

  5. What can they do? • Add and remove interface elements (menu, button, etc.) • Modify appearance of elements (color, border, icon, etc.) • Listen and response to events (page loads, mouse clicks, etc.) • Access modules and components (file manipulation,networking,datastorage,etc.) • Add their own modules and components and override the build-in ones

  6. Content vs. Chrome • Content is a webpage that Firefox load in browser tabs. • Chrome is Firefox user interface (i.e. everything around the browser tabs, including other windows like preferences and add-ons)

  7. Why use chrome? • Chrome privilege are the ability to do anything that Firefox can do. • Extensions are part of chrome and have chrome privilege!

  8. Extension building blocks • XUL and XHTML for structure, widgets • CSS for appearance and style • JavaScript for behavior • DTDs and properties for localization • JavaScript and C++ for modules/components

  9. XUL • XML Interface Language • XML vocabulary for building interfaces • Like HTML, but for application • Tags like <menu> <button> <tab> • Different layout(box) model • Much of Firefox’s interface is built with XUL • You can mix XUL and XHTML

  10. Develop environment • Firefox profile (firefox -P) • Developer preferences • Developer extensions • Extension dictionary

  11. Profiles • A hidden feature of Firefox • Directory that store user’s data(preferences, bookmarks, saved passwords, etc.) • Extensions are profile-specific • Use develop profile to develop your add-on and default profile for normal use

  12. How to use profile • Use “–P” argument, on Windows platform, add this argument to shortcut, on Linux and Mac, use command line. • Use two profiles at the same time, use “–no-remote” argument or add “MOZ-NO-REMOTE=1” to environment variable. • Use “-console” to display console window.

  13. Developer preferences • Make it easier for developer • Type “about:config” at url bar • extensions.logging.enable(true): show logging error in Error Console • javascript.opitions.showInConsole(true):show JavaScript error in Error Console • browser.dom.window.dump.enable(true):use “dump” function at dom context, and show information at console window

  14. Developer Extension • DOM Inspector • Console² • Firebug • Chrome Bug • Rainbow • XPCOM Viewer • SQLite Manager

  15. The install manifest • Tell Firefox about the extension(its name, versions, compatible Firefox versions, etc.) • Written in RDF, an XML vocabulary. • Must be at the top level of extension directory • Must be called install.rdf

  16. The chrome regestration • Tell Firefox about the location of source code files and resource files. Also tell Firefox how they add themselves to Firefox • Must be at the top level of extension directory • Must be called chrome.manifest

  17. Install your Extension • Link file method for developer • Create a text file inside the extensions/ sub directory of your develop profiles • The name of the file must be the ID of your extension, no suffix! • The content of the file must a single line specify the path of your extensions directory D:\xxie\helloworld /home/xxie/helloworld

  18. Show How to write an addon • Write a XUL • Write a JavaScript • Include css file • Include DTD file • Include property file

  19. References • https://developer.mozilla.org/en/Setting_up_extension_development_environment • https://developer.mozilla.org • https://wiki.mozilla.org • http://mxr.mozilla.org • https://addons.mozilla.org/en-US/developers • http://www.google.com/ • https://developer.mozilla.org/en/JavaScript/Guide

More Related