Mozilla Add-ons Blog » mobilehttps://blog.mozilla.org/addons
Mon, 02 Mar 2015 21:16:16 +0000en-UShourly1http://wordpress.org/?v=4.1How to develop a Firefox extensionhttps://blog.mozilla.org/addons/2014/06/05/how-to-develop-firefox-extension/
https://blog.mozilla.org/addons/2014/06/05/how-to-develop-firefox-extension/#commentsThu, 05 Jun 2014 16:00:21 +0000http://blog.mozilla.org/addons/?p=7158Continue reading]]>It’s been a while since we published a guide on extension development in this blog, and we recently discovered that many of you are hitting a very old blog post about it. There’s plenty of documentation out there, but it can be hard to find, so here’s an overview of what you need to know about extension development.

As with everything Mozilla, the first place you should look for developer documentation is the Mozilla Developer Network. There’s an add-ons section there where you will find everything you need to know about how to develop Firefox extensions, as well as other add-on types.

There are a couple different ways to go about creating an extension for Firefox, so I covered each in the sections below.

Add-ons SDK extensions

The Add-ons SDK is a set of simple APIs you can use to quickly build good Firefox extensions. It’s what we recommend for new developers. It should be easy to work with, especially if you’re familiar with Google Chrome extensions or userscripts. It abstracts away most of the XUL / XPCOM infractrusture in Firefox, giving you a more familiar HTML and JS environment to work with.

The current approach to building an SDK extension is to download and set up the SDK, code locally, then package your extension (an XPI file) using the cfx tool included with the SDK. The SDK team is working on making this process much easier by integrating it into Firefox developer tools. Soon you’ll be able to build your extensions very quickly, right from Firefox.

Compared to the old way of making extensions (see Overlay extensions below), the only notable loss are overlays. Bootstrapped extensions have the bootstrap.js file instead, which is what serves as the starting point for your code. Otherwise, everything should be familiar to you: install.rdf, chrome.manifest and code files, all packed in a ZIP file with a .xpi extension.

Other than Bootstrapped extensions on MDN and the pages they link to, all the available developer resources are the same for overlay extensions (see below).

Firefox for Android extensions

Extensions in Firefox for Android are slightly different. Since the UI is native instead of XUL, the way extensions can modify it is different and a bit more limited. This also means overlay extensions are not supported, so your options are the SDK and bootstrapped extensions.

Since mobile applications have very limited screen real estate, browsers need to maximize the content area, meaning extensions can’t add buttons or toolbars to the browser. However, the Firefox for Android team recently developed the Firefox Hub API that lets extensions add their content to the home page. This is a smart place to put your extension UI if you need it.

You can learn more about Firefox for Android extensions and get help here:

Overlay extensions

Overlay extensions are the old way of making add-ons. It might still make sense for you to use this approach if you need to create a very complex overlay or have other specific needs. However, having to restart Firefox to install this kind of extension is annoying because it breaks the user’s workflow, so you should definitely consider using the SDK or bootstrapped extensions first.

]]>https://blog.mozilla.org/addons/2014/06/05/how-to-develop-firefox-extension/feed/26Jetpack, Fennec and NativeWindowhttps://blog.mozilla.org/addons/2013/06/13/jetpack-fennec-and-nativewindow/
https://blog.mozilla.org/addons/2013/06/13/jetpack-fennec-and-nativewindow/#commentsThu, 13 Jun 2013 08:00:20 +0000http://blog.mozilla.org/addons/?p=6486Continue reading]]>Mobile Firefox add-on development is getting more and more relevant. As Firefox for Android steadily adds users and continues to be top-rated on Google’s Play Store we are also seeing increased traffic from millions of Android users on the Add-ons site looking for themes and extensions. We’re even running a contest to get developers interested in writing mobile extensions!

The trouble is, we don’t have that many add-ons, in fact as of this writing there are only currently 122 extensions that are compatible with Firefox for Android. I suspect part of the problem is that Firefox on Android is different:

There is no XUL on Android.

All addons on Android need to be ‘restartless’.

Needless to say, Mobile Firefox extensions are different, and so some developers may be a bit wary of jumping in with both feet. This post is a guide to show you some of the main capabilities available to you on Android in particular around UI integration and tooling.

Prerequisites

If you want to do Android-oriented development you’re going to need to install the Android SDK in order to get the Android Debug Bridge ( aka ‘adb’ ). Head on over to the Android developer portal and follow their install instructions, and be warned it is a hefty download.

If you don’t have an android device handy, it should be possible to run the Android emulator and install Fennec into it. In practice we’ve found this to be quite slow, using the arm emulator – one workaround might be to use the x86 emulator and x86 builds of Fennec, which are now available.

In both cases, you will need to enable ‘USB Debugging’ in the developer options – if you are running Jelly Bean ( 4.2 ) you will need to first read about the trick to get the developer options to show up in settings.

UI Integration

Integrating with the Firefox for Android ( Fennec ) UI is fundamentally different than with traditional XUL add-ons due to the use of Android’s native UI. To help with this, the Fennec team has provided extension developers with two global objects they can use to do common tasks: BrowserApp and NativeWindow.

BrowserApp is a utility object that allows you to enumerate, fetch, open and close tabs, interact with user preferences and even quit the browser! While there is no exciting UI or system integration here, BrowserApp provides key functionality in a simple and usable way. Some annotated code samples:

Using the Add-on SDK

The Add-on SDK, which has built-in support for running and testing extensions with a device, as well as Fennec support for most relevant SDK modules. The great thing about this that if you are used to using the SDK, most modules will work as expected. For a complete of what is and isn’t supported, please see the documentation.

Deployment: just use cfx! You will need to add some mobile specific arguments to your cfx command-line though. To help with this, I’ve written a quick UNIX shell script that should help:

The Bare-bones Approach

If you’re more comfortable developing a restartless add-on Mark Finkle from the Firefox for Android team has created a great template as a Github repo to get you started. The template includes a full bootstrap.js implementation and examples of how to use NativeWindow and BrowserApp as well some simple scripts for building your extension and pushing it to a device or emulator via adb.

Pretty Pictures

To give you an idea what UI integration looks like on Android, I’ve added some screenshots to show off the various types of things:

Unless you’re hiding under a rock, you are probably aware that the Mozilla Project has released Firefox 21 today. Additionally, unless you’ve been completely ignoring my recentposts on this blog, you might also realize that Firefox 21 signals a new chapter in the life of the Jetpack project, as we ship the SDK’s module loader and APIs in Firefox 21.

To me this is a big deal, for add-on developers, for Firefox developers, for the entire project. I’d like to thank everyone involved for all the hard work, but in particular there are a few people who deserve special mention:

Atul Varma & Aza Raskin started Jetpack in 2009 in Mozilla Labs, then rebooted it in 2010, ushering in the modern era of content scripts, CommonJS modules the command-line cfx tool and Add-on Builder.

Dietrich Ayala, David Mason, Myk Melez & Brian Warner who guided the project through the ‘re-boot’ phase, always with an eye to landing Jetpack’s capabilities in Firefox and revolutionizing how Firefox features are made.

Dave Townsend, Irakli Gozalishvili and the rest of the current Jetpack team who have done a ton of work coordinating a series of important changes to make the SDK fit nicely into mozilla-central.

Various Mozilla Labs engineers including Shane Caraveo, Anant Narayanan, Andrew Sutherland & David Ascher who kicked the tires and built prototyped their own crazy ideas based on our shaky prototypes and beta releases.

Now that we ship with Firefox I have decided to dial back the frequency of these posts to every 6 weeks on uplift and instead highlight for developers the new features and bug fixes that have landed in the recent Nightly cycle. As always if you have questions, feedback or want to get involved you can find us on the wiki, on the email list and of course in #jetpack on irc.mozilla.org.

Quick Stats

Note: the stats above are based on the queries I linked to for each item. If you have suggestions on how these queries might be made more accurate,please comment below. Stats generated at 2013-05-14 10:39:08 PDT

Help out Jetpack by using Stack Overflow! You may not be aware, but one of the most common sites where people ask questions about the Add-on SDK is actually on Stackoverflow.com. Questions are marked with the [firefox-addon-sdk] tag, and several new ones appear each week. While you are there, you should also check out the many questions tagged with [firefox-addon] as well. If you’ve got questions about add-on development yourself or don’t mind helping others, Stack Overflow is a great place to contribute.

Quick Stats

Note: the stats above are based on the queries I linked to for each item. If you have suggestions on how these queries might be made more accurate,please comment below. Stats generated at 2013-04-09 08:23:50 PDT

Meeting Brief

we’ve landed the final work to make Panels work with per-Window private browsing, to be released in Firefox 22.

we’re close to landing platform support for cross-domain xhr in content scripts

the Firefox team dropped by to talk about collaborating on new Add-on friendly features in Australis.

We are releasing SDK 1.14rc2 tomorrow, which will also likely be tagged tomorrow as the 1.14 release candidate. In addition to this we are coordinating with the Firefox team and release-drivers to ensure that the code in 1.14 is exactly the same as what we will release in Firefox 21. If you’re maintaining an SDK-based add-on, please help and test your code with ths new RC!

Last week’s work week in Sunnyvale yielded all sorts of amazing work, look for a post over on hacks.mozilla.org tomorrow for the full details.

Eddy blogged yesterday about his work on getting Firefox’s Browser Debugger working with SDK-based add-ons.

Quick Stats

Note: the stats above are based on the queries I linked to for each item. If you have suggestions on how these queries might be made more accurate,please comment below. Stats generated at 2013-03-19 09:20:18 PDT

Meeting Brief

PWPB support is complete, but 1.14 & Firefox 21 will ship with only partial support for Add-ons that opt in to work in Private Browsing mode.

Cross-domain capabilities and Panel Positioning changes are close to landing, SDK 1.14 re-packs are on track, and we need to re-evaluate high-priority items as we move into Q2.

SDK: 1.14 RC1 was released today – test! test!

Roundtable: discussion on prioritizing deep integrators over work targeted at casual add-on developers.

Quick Stats

Note: the stats above are based on the queries I linked to for each item. If you have suggestions on how these queries might be made more accurate,please comment below. Stats generated at 2013-03-05 09:03:12 PST

Meeting Brief

High Priority: PWPB has lots of pull requests in review, need to focus on Panel work. Need to hash out Panel Positioning design next week in person, Gabor hopes to land cross-domain content script capabilities in Firefox 22.

Over the last couple of days I’ve published a couple of posts about the near future of the project as we land the SDK’s apis in Firefox: [part 1] & [part 2]. If you have any feedback on these posts, please comment there, below, or ideally post to the Google group.

We took a hard look at the work we need to ship in SDK 1.14 and decided that, given there is also a team work week coming up the best thing to do is to delay release by 2 weeks. This means that Add-on SDK 1.14 will be released on Tuesday, March 26th.

Quick Stats

Note: the stats above are based on the queries I linked to for each item. If you have suggestions on how these queries might be made more accurate, please comment below. Stats generated at 2013-02-26 10:08:05 PST

Quick Stats

Note: the stats above are based on the queries I linked to for each item. If you have suggestions on how these queries might be made more accurate,please comment below. Stats generated at 2013-01-22 08:46:25 PST

Meeting Brief

Alex is really, really back. Mossop is sick

Good progress on most high priority goals, considering lowering the priority of cfx-in-js for the time being.

SDK: we’re pushing out rc3 today, we need ALL THE PATCHES

Roundtable – new engineer starting in early March, which is conveniently timed with a likely work week.

Quick Stats

Note: the stats above are based on the queries I linked to for each item. If you have suggestions on how these queries might be made more accurate,please comment below. Stats generated at 2013-01-08 12:54:34 PST

Quick Stats

Note: the stats above are based on the queries I linked to for each item. If you have suggestions on how these queries might be made more accurate,please comment below. Stats generated at 2012-12-18 09:13:09 PST

Meeting Brief

SDK: high priority bugs, Per-Window Private Browsing, module versioning in the loader and 404s in the docs.