AddOns

Building Firefox Hub Add-ons for Firefox for Android

The Firefox Hub APIs allow add-ons to add new panels to the Firefox for Android home page, where users normally find their top sites, bookmarks and history. These APIs were introduced in Firefox 30, but there are more features and bug fixes in Firefox 31 and 32. You can already find some of these add-ons on addons.mozilla.org, and there is some boilerplate code on github to help you get started.

image01
image00

Overview

There are two main parts to building a Firefox Hub add-on: creating a home panel, and storing data to show in that panel. Home panels consist of different views, each of which displays data from a given dataset.

Creating a new home panel

To create a home panel, first use the Home.panels API to register a panel. The register API takes a panel id and an options callback function as parameters. This options callback is called to dynamically generate an options object whenever a panel is installed or updated, which allows for dynamic locale changes.

function optionsCallback() {
  return {
    title: "My Panel",
    views: [{
      type: Home.panels.View.LIST,
      dataset: "my.dataset@mydomain.org"
    }]
  };
}
 
Home.panels.register("my.panel@mydomain.org", optionsCallback);

You must always register any existing panels on startup, but the first time you want the panel to actually appear on the user’s home page (e.g. when your add-on is installed), you also need to explicitly install the panel.

Home.panels.install("my.panel@mydomain.org");

You can modify the options callback function to customize the way data is displayed in your panel. For example, you can choose to display your data in a grid or a list, customize the view that is displayed when no data is available, or choose to launch an intent when the user taps on one of the items.

Storing data for the panel

To actually show something in your new home panel, use the HomeProvider API to store data. This API allows you to asynchronously save and delete data, as well as register a callback to allow the browser to periodically sync your data for you.

The HomeProvider API gives you access to HomeStorage objects, which you can interact with to save and delete data from a given dataset. These methods are designed to be used with Task.jsm to execute asynchronous transactions within a task.

let storage = HomeProvider.getStorage("my.dataset@mydomain.org");
Task.spawn(function() {
  yield storage.save(items);
}).then(null, Cu.reportError);

In Firefox 31, we expanded the save API to support replacing existing data for you, which is convenient for periodically refreshing your dataset.

function refreshDataset() {
  let items = fetchItems();
  Task.spawn(function() {
        yield storage.save(items, { replace: true });
  }).then(null, Cu.reportError);
}
 
HomeProvider.addPeriodicSync("my.dataset@mydomain.org", 3600, 
refreshDataset);

This code snippet will ensure that our dataset is refreshed once every 3600 seconds (1 hour).

What’s new in Firefox 32 Beta

In addition to bug fixes, Firefox 32 also adds a few more features to the set of Firefox Hub APIs.

Refresh handler

In addition to support for periodically updating data, we also added support for “pull to refresh”, which gives users the power to manually refresh panel data. To take advantage of this feature, you can add an onrefresh property to your view declaration.

function optionsCallback() {
  return {
    title: "My Panel",
    views: [{
      type: Home.panels.View.LIST,
      dataset: "my.dataset@mydomain.org",
      onrefresh: refreshDataset
    }]
  };
}

With this new line added, swiping down on your panel will trigger a refresh indicator and call the refreshDataset function. The refresh indicator will disappear after a save call is made for that dataset.

Authentication view

We added support for an authentication view, to make it easier for your add-on to use data that requires authentication. This view includes space for text and an image, as well as a button that triggers an authentication flow. To use this feature, you can add an auth property to your panel declaration.

function optionsCallback() {
  return {
    title: "My Panel",
    views: [{
      type: Home.panels.View.LIST,
      dataset: "my.dataset@mydomain.org"
    }],
    auth: {
     authenticate: function authenticate() {
        // … do some stuff to authenticate the user …
       Home.panels.setAuthenticated("my.panel@mydomain.org", true);
     },
     messageText: "Please log in to see your data",
     buttonText: "Log in"
   }
  };
}

By default, the authentication view will appear when your panel is first installed, and the authenticate function will be called when the user taps the button in the view. It is up to you to call setAuthenticated(true) when the user successfully completes an authentication flow, and you can also call setAuthenticated(false) when a user becomes unauthenticated. This authentication state will persist between app runs, so it is up to you to reset it if you need to.

Future work

We have ideas about ways to expand these APIs, but please let us know if there is anything you would like to see! We’re also always looking for new contributors to Firefox for Android, and we’d love to help you get started writing patches.

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Create Add-ons for Australis to Win a Firefox OS Phone

Firefox 29 (“Australis”) includes significant design and customization improvements, and we’re challenging you to create add-ons that look and feel great in it.

Between March 11 – April 15, 2014, create add-ons that take full advantage of the new design, which opens up new customization opportunities and streamlines the add-on experience in your browser. A panel of judges will pick one winner and two runners-up from each prize category.

All winners will receive Firefox OS phones, and the first-prize winners in each category will also receive a collection of Mozilla gear.

The Categories

  • Best overall add-on – an add-on that best makes use of the new Australis features, like the new toolbar widgets and tab appearance.
  • Best complete theme – a complete theme that most creatively alters the look and feel of Australis.
  • Best bookmark add-on – an innovative bookmarking add-on that works well with the Australis theme.

Add-ons in Australis

In order to create great entries for this contest you will need to know what’s new in Australis. Following is a quick summary of what we’ve been publishing in the Add-ons Blog.

Changes

The toolbars have changed significantly in Australis. The Add-on Bar at the bottom has been removed, and instead there is a new menu panel that extends the toolbar with buttons and widgets. It is activated by clicking on the button at the right end of the main toolbar. All the items in this new menu are customizable and it’s possible to add add-on buttons and widgets to it as well.

The icons in the main toolbar are 18×18 pixels. However, a 1px padding is expected, so the 16×16 pixel icons you should be using for the main toolbar in modern versions of Firefox will work without any changes. Icons are 32×32 pixels in the menu panel and also during customization. So, if you have an add-on that adds a toolbar button to the main toolbar using the usual guidelines of overlaying the button to the palette and then adding it to the toolbar using JS on first run, everything should work the same and you should only change your CSS to something like this:

/* Original CSS */
#my-button {
  list-style-image: url(“chrome://my-extension/skin/icon16.png”);
}
 
/* Added for Australis support */
#my-button[cui-areatype="menu-panel"],
  toolbarpaletteitem[place="palette"] > #my-button {
  list-style-image: url(“chrome://my-extension/skin/icon32.png”);
}

Note that buttons in the Australis theme have the cui-areatype attribute set when placed in in the UI. The possible values are menu-panel and toolbar. You can use the toolbar value to have different style for the button in Australis and non-Australis themes.

Australis for Add-on Developers: Part 1 contains more details.

New Customization API

Another exciting addition to Australis is the ability to create toolbar widgets using the CustomizableUI module. You will be able to easily create simple buttons and more interesting widgets with very little code, both for restartless and more conventional add-ons. Here’s a sample:

CustomizableUI.createWidget({
    id : "aus-hello-button",
    defaultArea : CustomizableUI.AREA_NAVBAR,
    label : "Hello Button",
    tooltiptext : "Hello!",
    onCommand : function(aEvent) {
      let win = aEvent.target.ownerDocument.defaultView;
 
      win.alert("Hello!");
    }
});

Australis for Add-on Developers: Part 2 demonstrates how to leverage this API with two demos and plenty of code to play with.

Get Started!

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Compete in the “Amp Your Firefox” Add-ons Contest

People love their add-ons—85% of Firefox users have them installed, and there have been over 3 billion downloads since they revolutionized browsing in 2004. There are add-ons for almost everything under the sun: fun, productivity, personalization, even for making tea. Between June 13 – July 18, 2013, we challenge you to delight these fans by creating or updating add-ons that amp up their Firefox.

We’re also challenging you on the mobile front—with more than 10 million people using Firefox for Android, this is your chance to take the fun and personalization of add-ons to a fast-growing and passionate fan base.

A panel of judges will pick the best add-on from each prize category, and the community will choose which category winner is the best overall add-on. Category winners will receive Android tablets, and the Best Overall winner will receive an 11-inch Macbook Air. All participants whose entry is approved (fully reviewed) for AMO will receive “Amp Your Firefox” t-shirts! The winning add-ons will also get tons of exposure on AMO and other Mozilla properties.

The Categories

Best Mobile Add-on

Create add-ons that take Firefox for Android to the next level for over 10 million users by improving readability, enhancing the web experience across devices, and rounding out browsing features—get creative!

Best Mobile Add-on Port

If you’ve created an add-on for desktop and think it would be great for a mobile audience, port it over to Firefox for Android!

Best Game Add-on

It takes creativity and imagination to make a great game add-on like Cheevos or Destroy the Web—are you up for taking the challenge?

Best Complete Theme

Complete themes can dramatically change the look of your Firefox—everything from buttons, window frames, tabs, and menus can be customized—the sky’s the limit. Create complete themes that are both aesthetically pleasing and transform the appearance of Firefox.

Best Updated Add-on

If you’ve created an add-on and want to freshen it up by adding new features, making it restartless, or porting it to the SDK, this is the category for you.

Mobile Next!

One of the key categories we’re excited about for this competition is Mobile. Firefox for Android has done incredibly well in terms of user uptake and reviews in the Play marketplace, and the Android and Jetpack teams have both been working hard to make developing Add-ons for Mobile Firefox as easy as possible. Having said that, developing mobile add-ons is different enough that we thought we’d call out some of the highlights.

NativeWindow & BrowserApp

NativeWindow and BrowserApp are privileged JavaScript APIs that allow developers to add their own custom functionality to the Native Java UI that is used on Firefox for Android instead of XUL. BrowserApp provides add-on developers the ability to interact with mobile browser tabs. NativeWindow allows developers to add menu items to the main and context menus, and to trigger native notifications.

Mark Finkle has created a handy github repo that includes all of the boilerplate code you’ll need to get started. Using this restartless add-on skeleton as the basis for your work, NativeWindow and BrowserApp are easy to access as properties off of the window object:

// show a toast immediately
aWindow.NativeWindow.toast.show("Showing you a toast", "short");
 
// add a menu item that shows a toast when clicked
let menuId = aWindow.NativeWindow.menu.add(“Hello!, icon, function() {
    aWindow.NativeWindow.toast.show("I ran the callback!", "short");
});

Jetpack – mobile ready

If you’re more comfortable with the Add-on SDK, I’m happy to report that the Jetpack team has done a lot of work to support mobile development. Most ( but not all ) Jetpack APIs work on Mobile, and the cfx command-line tool has been enhanced to be able to easily push your add-on onto the device for testing.

It is relatively simple to use NativeWindow from a Jetpack-based add-on:

// get the most recent window
const utils = require('api-utils/window/utils');
const recent = utils.getMostRecentBrowserWindow();
 
// show a toast notification
recent.NativeWindow.toast.show(opts.message, duration);
 
// listen for tabs events
let tabs = require('tabs');
tabs.on('ready', function(tab) {
    console.log(recent.BrowserApp.selectedTab.id, tabs.activeTab.id);
});

Caveats

Mobile phones present unique challenges for web browsers like Firefox mobile, so there are some very real limitations on what you can do with extensions as compared to desktop Firefox:

  • Add-on Builder does not support packaging or running extensions on a phone
  • Firefox for Android does not support XUL overlays
  • not all of the Add-on SDK’s modules are compatible with Firefox for Android, please consult this compatibility guide for more information.

For even more detail on using the NativeWindow api and Jetpack for hacking on mobile extensions, see the Jetpack, Fennec and NativeWindow blog post in the Mozilla Add-ons blog.

Get going!

Have fun, and good luck!

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Optimizing Memory Usage for Add-ons

Editor’s note: This is a short excerpt from Nicholas Nethercote’s personal blog. Nicholas is a programmer from Melbourne, Australia, who works for Mozilla on improving the quality of software. Here’s the good news in a nutshell:

“Over the past year, Mozilla has made great progress in reducing Firefox’s memory consumption. However, the excessive memory consumption caused by add-ons with memory leaks has remained an ongoing problem.

Firefox 15 fixes that problem. We have confirmed, via in-house testing and from real-world telemetry data, that it prevents the vast majority of leaks that occur in existing add-ons.

Users who upgrade to Firefox 15 won’t have to upgrade their add-ons to see the benefits. While it is hard to predict the effect of this improvement on any individual user, many users should experience greatly reduced memory consumption, particularly on long browsing sessions. This should result in better performance, fewer pauses, and fewer crashes.

Mozilla’s MemShrink efforts are ongoing. We have various projects in the pipeline that aim to further reduce Firefox’s memory consumption, and help users understand better how Firefox is using memory. ”

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)