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

  • By
    5 More HTML5 APIs You Didn’t Know Existed

    The HTML5 revolution has provided us some awesome JavaScript and HTML APIs.  Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers.  Regardless of API strength or purpose, anything to help us better do our job is a...

Incredible Demos

  • By
    CSS Counters

    Counters.  They were a staple of the Geocities / early web scene that many of us "older" developers grew up with;  a feature then, the butt of web jokes now.  CSS has implemented its own type of counter, one more sane and straight-forward than the ole...

  • By
    MooTools Text Flipping

    There are lots and lots of useless but fun JavaScript techniques out there. This is another one of them. One popular April Fools joke I quickly got tired of was websites transforming their text upside down. I found a jQuery Plugin by Paul...

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!