Package Your Firefox Extension into an XPI

By  on  

Yesterday I detailed the file/folder structure of a Firefox extension. Once you have your extension ready for testing, you need to package everything together into an XPI file. Luckily there's a quick and easy way to do so.

chrome.manifest Review

content myExtension jar:chrome/myExtension.jar!/content/
overlay chrome://browser/content/browser.xul chrome://myExtension/content/myExtension.xul
skin myExtension classic/1.0 jar:chrome/myExtension.jar!/skin/

Remember that the XPI build is based upon the chrome.manifest file.

The Shell / Cygwin Directives

cd myExtension/chrome
zip -r myExtension.jar content/* skin/*

We enter the chrome directory and generate a myExtension.jar file which holds all of the extension assets.

cd ..
zip myExtension.xpi install.rdf chrome.manifest chrome/myExtension.jar

We navigate to the top level extension directory and generate a myExtension.xpi file which serves as the extension's install package. That's all!

Now you have no excuses not to create your Firefox extension! When you have one completed, post it in the comments below -- I can't wait to see what you come up with!

Recent Features

  • By
    Page Visibility API

    One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back?

  • By
    9 Mind-Blowing WebGL Demos

    As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us.  Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos.  Another technology available...

Incredible Demos

  • By
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

  • By
    MooTools & Printing – Creating a Links Table of Contents

    One detail we sometimes forget when considering print for websites is that the user cannot see the URLs of links when the page prints. While showing link URLs isn't always important, some websites could greatly benefit from doing so. This tutorial will show you...

Discussion

  1. @blaka: Ant is awesome but if I posted that without a few Ant tutorials I’d be assassinated!

  2. ryan

    can you explain your chrome.manifest example? i’m confused

  3. Most excellent, Walsh!

  4. Your a step forward yourself now! Good

  5. Rodrigo

    Nice tip! Thks

  6. Usefull tip!
    Thanks

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