Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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
  • 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?

like image 686
dorserg Avatar asked Dec 05 '13 19:12

dorserg


People also ask

How do I create a custom Firefox extension?

Open the Windows Start menu and choose the Run option (on Vista, it might not be there – just press Windows key + R in that case). In the run dialog, write firefox -P and press enter /click OK. Choose Create Profile in the dialog and follow the steps.

What are Firefox extensions coded in?

Add-ons allow developers to extend and modify the functionality of Firefox. They are written using standard Web technologies - JavaScript, HTML, and CSS - plus some dedicated JavaScript APIs.

How easy is it to make a browser extension?

Conclusion. As a web developer, it's very easy to create a Chrome extension in a short amount of time. All you need is some HTML, CSS, JavaScript and a basic knowledge of how to add functionality through some of the JavaScript APIs that Chrome exposes.

Is Firefox developer Edition fast?

Compared to Firefox six months ago, today's Developer Edition is twice as fast on benchmarks like Speedometer 2.0 that simulate the real-world performance of modern web applications.


4 Answers

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.

like image 195
dorserg Avatar answered Oct 06 '22 22:10

dorserg


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.

like image 25
serv-inc Avatar answered Oct 06 '22 21:10

serv-inc


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
like image 10
Subodh Ghulaxe Avatar answered Oct 06 '22 20:10

Subodh Ghulaxe


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.

like image 6
iraj jelodari Avatar answered Oct 06 '22 20:10

iraj jelodari