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
    Convert XML to JSON with JavaScript

    If you follow me on Twitter, you know that I've been working on a super top secret mobile application using Appcelerator Titanium.  The experience has been great:  using JavaScript to create easy to write, easy to test, native mobile apps has been fun.  My...

  • By
    JavaScript Promise API

    While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready?  Promises are becoming a big part of the JavaScript world...

Incredible Demos

  • By
    Cross Browser CSS Box Shadows

    Box shadows have been used on the web for quite a while, but they weren't created with CSS -- we needed to utilize some Photoshop game to create them.  For someone with no design talent, a.k.a me, the need to use Photoshop sucked.  Just because we...

  • By
    CSS Ellipsis Beginning of String

    I was incredibly happy when CSS text-overflow: ellipsis (married with fixed width and overflow: hidden was introduced to the CSS spec and browsers; the feature allowed us to stop trying to marry JavaScript width calculation with string width calculation and truncation.  CSS ellipsis was also very friendly to...

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!