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: <ul> <li>https://developer.mozilla.org/en-US/docs/Extensions</li> <li>https://developer.mozilla.org/en-US/docs/Building_an_Extension</li> <li>How do I write a Firefox Addon?</li> </ul> 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?

<blockquote> It's 2013, isn't there an easier way of building Firefox extensions? </blockquote> 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): <ul> <li>Download the SDK from https://addons.mozilla.org/en-US/developers/builder, unpack it.</li> <li>Quickly glance over the README file (always useful).</li> <li>Execute <code>source bin/activate</code> from the SDK dir (the same dir the README file is in).</li> <li>Execute <code>cfx docs</code> -- this bootstraps local copy of SDK docs and opens it in your browser.</li> <li>Leave the SDK dir, create an empty dir for your extension.</li> <li>Execute <code>cfx init</code> inside the extensions dir -- this generates all the necessary files/directories.</li> <li>Follow the rest of getting-started-with-cfx page: <ul> <li>Update <code>lib/main.js</code> with just a few lines of JS to place a custom widget onto add-on bar.</li> <li>Execute <code>cfx run</code> -- this opens fresh Firefox instance with your new shiny extension in it.</li> </ul> </li> </ul> 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! <h3>Update</h3> There is a new standard, called WebExtensions From MDN <blockquote> 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. </blockquote>

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 <ul> <li> either the <code>web-ext</code>-tool that can be installed via <pre class="prettyprint"><code>npm install --global web-ext </code></pre> </li> <li>or simply use Firefox's <code>about:debugging</code> or Chromium's <code>chrome:extensions</code> to temporarily load the webextension.</li> </ul> Either way, you need a <code>manifest.json</code> 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.

What is the easiest way to develop Firefox extension?

Tags:

javascript

google-chrome

firefox

firefox-addon

firefox-addon-sdk

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?

686

asked Dec 05 '13 19:12

dorserg

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.

195

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.

answered Oct 06 '22 21:10

serv-inc

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

Add-on SDK-based extensions
manually bootstrapped restartless extensions
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

Installation
- Installation on OS X, FreeBSD, Linux
- Installation on OS X using Homebrew
- Installation on Windows
Create user interfaces
Interact with the browser

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.

answered Oct 06 '22 20:10

iraj jelodari

Related questions
                            
                                How to auto-size an iFrame? [duplicate]
                            
                                Why does Object.assign() require a polyfill when babel-loader is being used?
                            
                                Why is `.catch(err => console.error(err))` discouraged?
                            
                                Math.round(num) vs num.toFixed(0) and browser inconsistencies
                            
                                Multiline strings that don't break indentation
                            
                                Is jQuery .text() method XSS safe?
                            
                                Debug message "Resource interpreted as other but transferred with MIME type application/javascript"
                            
                                What are the benefits to using anonymous functions instead of named functions for callbacks and parameters in JavaScript event code?
                            
                                How to use normalize.css using npm install with webpack?
                            
                                d3 js - loading json without a http get
                            
                                Angular.js and HTML5 date input value -- how to get Firefox to show a readable date value in a date input?
                            
                                React.js: how to decouple jsx out of JavaScript
                            
                                Does JavaScript have a Map literal notation?
                            
                                Removing an anonymous event listener
                            
                                Reading JavaScript variables using Selenium WebDriver
                            
                                Is setTimeout a good solution to do async functions with javascript?
                            
                                mongoose save vs insert vs create
                            
                                Disposing of view and model objects in Backbone.js
                            
                                What is the node.js equivalent of window["myvar"] = value?
                            
                                Why is it called XMLHttpRequest?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!

Donate Us With

What is the easiest way to develop Firefox extension?

Tags:

javascript

google-chrome

firefox

firefox-addon

firefox-addon-sdk

dorserg

People also ask

4 Answers

Update

dorserg

serv-inc

Subodh Ghulaxe

iraj jelodari

Recent Activity

Donate For Us