Tip:
Highlight text to annotate it
X
Hi, I'm Daniel Buchner, Product Manager for the Mozilla add-on builder.
Today, I'll show you how to create a simple add-on for Firefox using the builder.
The add-on builder is a web based development environment for the add-on sdk
that allows you to build FF add-ons with JS, HTML and CSS.
Before we start, I should note a major feature of all add-ons created
using the add-on builder or add-on sdk:
the ability to be installed without restarting FF.
Let's take a look at how you build a simple add-on with the add-on builder.
To start, cruise over to the add-on builder at: builder.add-ons.mozilla.org.
The add-on builder uses the same authentication as add-ons.mozilla.org
so if you have an AMO account already, use the same credentials to log in.
If you don't yet have an account on AMO,
click the link labelled 'get one' to create a new account.
We already have our AMO account, so let's begin creating our add-on.
When you click the 'create new add-on button'
you'll be taken to a development environment that features a code editor,
a file tree to the left of the page, and a few helpful tools in the editor toolbar.
Let's take a quick look at the file structure of the add-on in the file tree
before we jump to coding our add-on.
The lib directory in the file tree will contain
all the various JS modules you will use in your add-on.
The majority of your code will live in these modules.
The 'data' directory below 'lib' is the place
where you'll include any resources your add-on might rely on,
such as images, HTML files, or scripts used to interact with web content.
Finally, the 'libraries' directory is where you can select
the version of the add-on sdk you wish to use.
The latest stable version of the sdk is already selected for you
for every new add-on you create.
For this simple add-on, that's the only library you'll need.
Going back to the 'lib' directory,
you can see there's a file called 'main.js'
that has been created and opened for us.
This is the primary file for any new add-on
and we create it for you by default.
Let's start writing some code for our add-on in the main.js file.
The add-on we're going to build will allow the user
to instantly translate any selected text in the page
using Google's translation API.
The first step is accessing the various APIs we'll need
from the add-on SDK using the required statement.
For those of you who have used a common JS implementation like nodeJS
this will look very familiar.
Here we've required the context-menu API,
that we'll need for creating a new context menu item,
the request API, that will allow us to make network requests,
and the selection API to give us access to text selections
the user makes in the browser.
Let's create our new context menu item.
We've created a new context menu item,
given it a label, and provided a context.
The label is the string displayed to the user in the context menu,
and the context describes when the menu item should be visible.
In this case selectioncontext tells the browser to display the menu item
when any text context is selected in the page.
We need to define a function that will be called when the menu item is added.
This function takes the selected text from the web page
and passes it to the onMessage handler.
Now that we've created the code to pass the selected text
from the web page to our add-on,
let's define an onMessage handler to receive it.
By providing an onMessage parameter
we are giving the selection API something to execute when a selection occurs.
Our code here uses the Google translation API
to translate the text we received into English,
and replace the selected text with the translated version.
Now that we have our code done
let's make sure to save a version of our add-on.
You can save a version by clicking on the 'save' button.
Here you can assign a version number to your work.
At this early stage we suggest you give it a 0.1 version
and make a note that this is your first commit of code.
While we're at it, let's give our add-on a distinct name.
To do this, click the 'properties' button.
In this dialog we can change the name
and provide a short description of what our add-on does.
These two bits of metadata are important for the discoverability of your add-on
on the add-on builder's search page.
Looks good!
Now we can test our code and see how we did.
On our toolbar we press 'test' to test our add-on live in the browser.
At this point, if you haven't installed the add-on builder helper,
the application will prompt you to do so.
The add-on builder helper is an add-on that doesn't require a restart,
so there's only a small one-time delay.
At this point, our add-on has been created for us and installed.
To test, let's navigate to the French translation of the Mozilla Manifesto
and select some text.
We can now instantly translate the selected text with our add-on.
It's important to note that closing the browser will remove any test add-ons
installed by the add-on builder.
When you're happy with your add-on,
you can download it by pressing the download button in the editor toolbar.
This will allow you to test your add-on in a more persistent way,
share it with others by uploading it to AMO,
or offer it to users for download on your own web site.
That's just a quick look at the new add-on builder utilizing the new add-on SDK APIs.
As you can see, we were able to build a very useful add-on
with a small amount of JavaScript.
There's a lot more you can do with the add-on builder and add-on SDK,
so we encourage you to take a look, give it a try
and then help make FF add-ons even better.