66

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?

Community
  • 1
  • 1
dorserg
  • 5,454
  • 3
  • 24
  • 29

5 Answers5

73

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.

Mehdi Dehghani
  • 10,970
  • 6
  • 59
  • 64
dorserg
  • 5,454
  • 3
  • 24
  • 29
  • Create a convenient shortcut in `.bashrc`, so you don't have to manually cd to the add-on directory any more: `alias addon-sdk="cd /opt/addon-sdk && source bin/activate; cd -"`. Since you've mentioned "Chrome extension", I want to add that I've also created a module called a [browser-action](https://github.com/Rob--W/browser-action-jplib) module that makes porting an extension that uses Chrome's [`chrome.browserAction`](https://developer.chrome.com/extensions/browserAction.html) API very easy. – Rob W Dec 05 '13 at 20:56
  • When i start `bash cfx init` in my new folder I get this error: `/opt/addon-sdk-1.16/bin/cfx: line 12: syntax error near unexpected token '(' /opt/addon-sdk-1.16/bin/cfx: line 12: 'cuddlefish_root = os.path.dirname(os.path.dirname(os.path.realpath(sys.argv[0])))' ` – rubo77 May 21 '14 at 18:33
  • you have to start cfx via phyton, so I created `alias cfx="python /opt/addon-sdk-1.16/bin/cfx"` – rubo77 May 21 '14 at 18:34
  • https://addons.mozilla.org/en-US/developers/builder the content with this link has been removed=( – kurumkan May 28 '16 at 12:59
  • @ArslArsl: you are supposed to install the tool via `npm`. But the SDK cannot be used to develop new extensions any more. See https://stackoverflow.com/a/41107443/1587329 – serv-inc Jul 25 '17 at 07:37
11

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.

serv-inc
  • 35,772
  • 9
  • 166
  • 188
10

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
  2. Create user interfaces
  3. Interact with the browser
Subodh Ghulaxe
  • 18,333
  • 14
  • 83
  • 102
  • The `bin\activate` part in Windows is broken when Python is installed in `Program Files (x86)`. – ysap May 10 '15 at 01:48
6

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.

iraj jelodari
  • 3,118
  • 3
  • 35
  • 45
5

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

How to develop a Firefox extension with the addon SDK

ejectamenta
  • 1,047
  • 17
  • 20