What is the easiest way to develop Firefox extension?

javascript google-chrome firefox firefox-addon firefox-addon-sdk
dorserg picture dorserg · Dec 5, 2013 · Viewed 37.3k times · Source

I'm planning to develop a simple Firefox extension that will shorten URL of a currently active tab, display a popup with the shortened URL, and place it into the clipboard.

In Google Chrome, this would be pretty easy (according to http://developer.chrome.com/extensions/getstarted.html) -- pure JavaScript plus a few calls to JavaScript API-s of interacting with the browser's UI.

However, after searching around for a good Firefox extensions tutorial, the most officially-looking links I found are:

According to them, it looks like I will have to learn the XUL language for even the simplest interactions with the browser's UI. On top of that, I will have to set up custom Firefox profile so as not to hose my default profile during development, create complicated directory structure, write manifest in obscure XML, figure out how to package and test whatever I implement, etc.

It's 2013, isn't there an easier way of building Firefox extensions?

Answer

dorserg picture dorserg · Dec 5, 2013

It's 2013, isn't there an easier way of building Firefox extensions?

Yes there is!

The links you provided in the question are unbelievably outdated. There is a new, much better way of developing Firefox extensions -- Firefox Add-on SDK.

However it's pretty hard to stumble upon it by just googling along the lines of 'firefox addon tutorial'. I'm amazed Mozilla doesn't advertise it more aggressively, or at least mention it on those pages you found.

Steps to get started (Mac/Linux, but should be pretty similar for PC):

  • Download the SDK from https://addons.mozilla.org/en-US/developers/builder, unpack it.
  • Quickly glance over the README file (always useful).
  • Execute source bin/activate from the SDK dir (the same dir the README file is in).
  • Execute cfx docs -- this bootstraps local copy of SDK docs and opens it in your browser.
  • Leave the SDK dir, create an empty dir for your extension.
  • Execute cfx init inside the extensions dir -- this generates all the necessary files/directories.
  • Follow the rest of getting-started-with-cfx page:
    • Update lib/main.js with just a few lines of JS to place a custom widget onto add-on bar.
    • Execute cfx run -- this opens fresh Firefox instance with your new shiny extension in it.

All in all, it took me just a few hours to read the documentation, get familiar with the SDK API-s, find SDK module to place a widget onto a navigation bar instead of add-on bar, and develop fully-functional extension in just about 50 lines of JavaScript.

HTH!

Update

There is a new standard, called WebExtensions

From MDN

There are currently several toolsets for developing Firefox add-ons, but WebExtensions will become the standard by the end of 2017.

If you are writing a new add-on, we recommend that you write a WebExtension.

Related questions

Detecting the onload event of a window opened with window.open

window.popup = window.open($(this).attr('href'), 'Ad', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); $(window.popup).onload = function() { alert("Popup has loaded a page"); }; This doesn't work in any browser I've tried it with (IE, Firefox, Chrome). How can …

Read More
new Date() is working in Chrome but not Firefox

I am creating a datetime string that looks like this: 2010-07-15 11:54:21 And with the following code I get invalid date in Firefox but works just fine in Chrome var todayDateTime = year + '-' + month + '-' + day + ' ' + hour + ':…

Read More
Is it possible to display a custom message in the beforeunload popup?

When using window.onbeforeunload (or $(window).on("beforeonload")), is it possible to display a custom message in that popup? Maybe a small trick that works on major browsers? By looking at existing answers I have the feeling this was possible …

Read More