SlideServe
Télécharger Obtenir Pro
Menu
Accueil Pro
Préférences
ApparenceLight Aide et commentaires
© SlideServe · v2026

Firefox Addon development tutorial

afya avatar
afya
19 diapositives · 356 Views · Aug 23, 2014

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

Firefox Addon development tutorial - slide 1
01 / 19Firefox Addon development tutorial
1 / 17

Télécharger la présentation

Firefox Addon development tutorial
Une image / un lien ci-dessous est fourni (tel quel) pour télécharger la présentation

Politique de téléchargement : le contenu du site vous est fourni TEL QUEL pour votre information et votre usage personnel ; il ne peut être vendu, concédé sous licence ni partagé sur d’autres sites sans l’accord de son auteur.Le contenu vous est fourni TEL QUEL, pour votre information et votre usage personnel uniquement. Téléchargez la présentation en cliquant sur ce lien. Lors du téléchargement, si vous ne parvenez pas à télécharger une présentation, l’éditeur a peut-être supprimé le fichier de son serveur.Pendant le téléchargement, si vous ne parvenez pas à obtenir une présentation, le fichier a peut-être été supprimé par l’éditeur.

F I N

Plus de contenu associé

Transcription de la présentation

  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