Firefox Extension Template

By  on  

Creating a Firefox extension can be difficult if you don't know the files involved and how to structure your extension folder. Fear not -- I have created a very basic Firefox extension template file/folder structure for you to get your first plugin going.

File & Folder Structure

  • MyExtension/
    • chrome/
      • content/ - contains the extensions XUL and JavaScript files.
        • myExtension.xul - The XML that creates the layout of the extension.
        • options.xul - The XML that creates proviedes extension options. Empty for this template.
        • myExtension.js - The JavaScript that manages the action of each extension object.
      • locale/ - contains language files. None included in this template. Assume English.
      • skin/ - contains images and CSS to control extension object layout.
        • myExtension.css - a CSS file controling presentation, just like a website.
        • logo.png - a sample image. All images go in this folder as well.
    • chrome.manifest - maps out the file/structure layout of the extension for Firefox.
    • install.rdf - provides information about the extension.
    • update.rdf - gets pinged to check for extension updates.

Note that this structure isn't required but is a very commonly used structure. Also, make sure to check out my David Walsh Blog Toolbar post to see an example of my file contents.

Stay tuned for my post on creating the XPI file that packages the extension!

Recent Features

  • By
    I’m an Impostor

    This is the hardest thing I've ever had to write, much less admit to myself.  I've written resignation letters from jobs I've loved, I've ended relationships, I've failed at a host of tasks, and let myself down in my life.  All of those feelings were very...

  • By
    Responsive Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...

Incredible Demos

  • By
    Downloadify:  Client-Side File Generation Using JavaScript and Flash

    The following tools is in its very beta stages and works intermittently. Its so damn useful that I had to show it off now though! I recently stumbled upon Downloadify, a client-side file generation tool based on JavaScript and Flash ActionScript code. A...

  • By
    Using jQuery and MooTools Together

    There's yet another reason to master more than one JavaScript library: you can use some of them together! Since MooTools is prototype-based and jQuery is not, jQuery and MooTools may be used together on the same page. The XHTML and JavaScript jQuery is namespaced so the...

Discussion

  1. I guess both of us think alike :) http://github.com/cheeaun/example-fx

  2. @Lim Chee Aun: As always! :) This setup is pretty common.

  3. u mis-typed the word “chrome”…

  4. @Foobar: Updated.

  5. Thanks a bunch David, I’ve always wanted to try my hand at creating my own Firefox tool bar but never really knew how to start. Thanks for the jump start. ;)

  6. You can use an Extension Wizard for that purpose.

  7. Scott Morris

    I have been tasked to create an add on and through all the searching and examples yours was the best. Thank you.

  8. andrew

    I have defind a new action that to call other program In my myExtension.js ,
    Am i input the program with myExtension.js in content too ?

  9. I always to the star to make my Firefox toolbar, but knew how to really wanted to try my hand but never.
    ——————————–
    ruthallen

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!