If you've used Firefox add-ons before, you know that they're capable of some pretty impressive features — from inspecting the underlying framework of a website to displaying a scrolling 3-D wall of pictures and video. But some of the most popular add-ons just make minor changes to Firefox through easily learned languages like JavaScript, XUL, and CSS. If you have an idea for your first add-on, start out with something simple to learn the basics of how extensions are packaged and interact with Firefox.

  1. 1

    Learn the basics

    The easiest way to do that is to follow along with the Firefox Add-ons Developer Guide as it explains in detail the technologies used in extensions and walks through the creation of several basic extensions.

    If you'd rather dive right in, there are several other tutorials in our Getting Started section of the How-to Library that jump straight into code. And if you have some time to spare, you may prefer a video walkthrough of extension basics: Extension Bootcamp: Zero to Hello World! in 45 Minutes.

  2. 2

    Build your add-on

    Once you're familiar with the extension development environment, it's time to start on your first add-on. Back in the day, this meant climbing up a hill in the snow to find a suitable template to copy for your add-on's install manifest. Fortunately, the Add-on Developer Hub (that's this!) introduces the snowmobile of extension packaging: the Add-on Packager!

    Just follow the steps to enter your add-on's name, version number, supported applications, and other details, and it will make your extension package for download. Not only does it generate your install manifest, but you can select common interface elements like toolbars, sidebars, and context menus to make a working extension skeleton. We're practically writing your extension for you!

  3. 3

    Add some flair

    If your add-on needs more functionality than the empty sidebar the Packager made for you, there are several ways to find out how to add the functionality you want. One of the most common ways of learning how to do something in an extension is to look at what other extensions already do. Just remember that if the other extension's license doesn't allow you to copy its source, you can't.

    We also have two areas here in the Hub that may help you out: the API & Language References page has links to official documentation for extension languages and APIs like JavaScript, XUL, XPCOM, and FUEL. Secondly, the How-to Library is full of tutorials, walkthroughs, videos, and articles written by smart people on extension development and best practices.

    If you already know what you're looking for, just search for it! Our search will scour the best add-on resources to find that missing interface or common problem you're having. If search isn't cutting it, feel free to ask for help in our forums.

  4. 4

    Test your add-on

    Even entomologists don't like bugs in their software, so it's important to test your add-on thoroughly before it's ready for general consumption. At minimum, you should make sure your add-on works on all the platforms and applications it claims to support.

    To help detect common problems with packaging and security, you should run our Add-on Validator tool on your file. It's like Spell Check for add-ons. Your add-on will automatically be validated upon submission, but you may want to test it out beforehand. Plus, passing makes you feel good.

  5. 5

    Share your add-on with the world

    Woah, you finished your add-on already? Just so you know, Mozilla Labs is hiring. Alright, if you've tested your add-on out and it's free of problems, it's time to submit your add-on to Mozilla Add-ons. With over 1.5 billion add-on downloads served, it's the best place to let your new creation live. Before you submit it, there are a few things to go over.

    Mozilla cares a lot about user experience and security. That's why we have a team of volunteer Editors that review add-ons submitted to the site before they are allowed to roam free. We have a number of policies that we require add-on developers and their contributions to adhere to. Please review these policies before submitting your add-on to ensure your add-on is approved the first time.

    Everything in compliance? Great. There's only one thing left to do…

    Congratulations!

If you're feeling talkative, we'd love to hear your feedback on how your experience creating an add-on was. Hearing what new developers struggle with helps us make the experience better for future generations of add-on innovators. Whether you want to comment on the platform, the documentation, or the website, we'll listen. Better yet, since Mozilla is open, you might even be able to fix that bug or lack of documentation yourself! It's like the circle of life.