Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

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.

Download ZIP

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.

Download ZIP

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

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

  • By
    Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

  • By
    CSS Filters

    CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have...

Incredible Demos

  • By
    CSS Scoped Styles

    There are plenty of awesome new attributes we've gotten during the HTML5 revolution:  placeholder, download, hidden, and more.  Each of these attributes provides us a different level of control over an element on the page, but there's a new element attribute that allows...

  • By
    Vertically Centering with Flexbox

    Vertically centering sibling child contents is a task we've long needed on the web but has always seemed way more difficult than it should be.  We initially used tables to accomplish the task, then moved on to CSS and JavaScript tricks because table layout was horribly...

Discussion

  1. Lim Chee Aun

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

  2. David Walsh

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

  3. Foobar

    u mis-typed the word “chrome”…

  4. David Walsh

    @Foobar: Updated.

  5. Tyler Diaz

    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. Skakunov Alexander

    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. Home

    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!