What is the easiest way to develop Firefox extension?

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:

• https://developer.mozilla.org/en-US/docs/Extensions
• https://developer.mozilla.org/en-US/docs/Building_an_Extension
• https://stackoverflow.com/questions/24772/how-do-i-write-a-firefox-addon

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?

> 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][2] 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][3] 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.

[2]: https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/tutorials/getting-started-with-cfx.html "getting-started-with-cfx" [3]: https://github.com/Rob--W/toolbarwidget-jplib

As of https://blog.mozilla.org/addons/2016/11/23/add-ons-in-2017/, the only way going forward will be to use WebExtensions. The last SDK extensions will be accepted for Firefox 52, while Firefox 57 will end all other extension support, supporting only WebExtensions.

Firefox copied Google Chrome's extension API. So you could just use your Chrome extension and see if all the APIs are already supported in Firefox (they should be as of now). Programmers such as NoScript's Giorgio Maone actively support the change to WebExtensions.

To develop a WebExtension, you need

• either the web-ext-tool that can be installed via

    npm install --global web-ext
  

• or simply use Firefox's about:debugging or Chromium's chrome:extensions to temporarily load the webextension.

Either way, you need a manifest.json file in a directory created by you, which glues all functionality together. See https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Your_first_WebExtension for a first example. Or the Google docs at https://developer.chrome.com/getstarted.

Yes there are three different techniques you can use to build extensions:

1. Add-on SDK-based extensions
2. manually bootstrapped restartless extensions
3. overlay extensions

You can read comparison between here

> If you can, it's advisable to use the Add-on SDK, which uses the > restartless extension mechanism but simplifies certain tasks and > cleans up after itself. If the Add-on SDK isn't sufficient for your > needs, implement a manual restartless extension instead.

Steps to get started with Add-on SDK-based extensions

1. Installation
   • Installation on OS X, FreeBSD, Linux
   • Installation on OS X using Homebrew
   • Installation on Windows
2. Create user interfaces
3. Interact with the browser

There are two official ways for developing add-ons, each of them has pros and cons:

1- WebExtensions (newer method):

WebExtensions are the future of Firefox add-ons. If you can use the WebExtensions API, it's the best choice. You can develop and publish WebExtensions right now, but they're still in an early state.

2- Add-on SDK (older method):

The Add-on SDK provides APIs for developing Firefox add-ons, and a tool for developing, testing, and packaging them.

I made a tutorial on developing extensions using the Firefox addon SDK:

How to develop a Firefox extension with the addon SDK