Firefox Hub Add-ons for Firefox for Android

Firefox for Android focuses on turning the browser’s homepage into a platform called Firefox Hub, a project to make your home page more customizable and extensible. At its core, this feature is a set of new APIs that allows add-ons to add new content to the Firefox for Android home page. As you may know, the home screen of the browser displays by default top sites, history, bookmarks and the reading list. After installing the add-ons, a new panel will be added to home page, near the default ones. To access a panel, swipe to the left or right after opening a new tab. If you ever want to make changes to these or other home page panels, you can do so in Settings, in the Customize / Home section. You can remove the panel added, by using the remove option which is present only for the dynamic panels, while the other default ones have the “Hide” option. Also you can decide which panel to be your default one, or change their order in about:home. It is possible to hide existing panels, for instance the reading list or history if you do not want it to appear on the home screen, or to hide all four default panels to only display custom feeds or a single feed instead.

Pocket Panel

To install the add-on, you have to go to the Pocket Panel AMO Page. From the add-on management screen, after tapping the OPTIONS check-box “Log in”, the “Log in to Pocket” page appears and the user can log in with his credentials. Also log out can be done through the Firefox add-on management screen. Now, Pocket panel access your Pocket reading list from Firefox for Android. This add-on adds your Pocket reading list feed to your home page and opens them in reader mode.

Instagram Panel

After installing the add-on from the Instagram Panel AMO Page, the new panel will be added to homepage, containing feeds of popular instagram photos. After you log in, you can see your own feeds. Also log-out can be done through the add-on management screen.

Vimeo panel

After installing the add-on, a new panel will be added to homepage and clicking on an item opens the video on Vimeo’s website. You can find it available on the AMO Page.

Wikipedia Panel

To install the add-on, you have to go to Wikipedia AMO Page. After this, you can use the add-on options from the add-on management screen to choose different feeds: choosing “Picture of the day” option, wikipedia panel will display feeds for different dates, containing the picture of that day, choosing “Featured” option, the panel will have feeds for different dates, containing the featured article, choosing “On this day” option, the panel from about:home will have feeds for different dates, containing all important things that happened in that day and last choosing the “Nearby” option, the panel will have feeds containing the places near your current location.

Cat Facts Panel

Cat Facts Panel installed from the AMO Page adds a new panel to your homepage, containing facts about cats.

Goal.com Panel

After you install the add-on from the Goal.com Panel AMO Page, you can choose your country edition from the pop-up dialog “Welcome to your Goal.com panel!”. Also this can be done through add-on management screen. Now you can get the latest football news from Goal.com on your Firefox for Android homescreen. This add-on provides breaking news directly from Goal.com so you can keep up with the football competitions, teams and players that matter to you.

Home Feeds Panel

Now you can subscribe to your favorite websites and have their news feeds show up right on your Firefox home page, installing the add-on “Home Feeds” from the AMO Page. To add a feed, simply tap the RSS icon when it appears in the title bar. A click on the icon opens a dialog to add it to one of the supported applications and services. Here you need to select Firefox homepage to add it as a panel to the about:home page of the browser. Once done, you can access feed items directly from there whenever you open it.

If you want to see the developer’s perspective, Margaret Leibovic wrote an article about building Firefox Hub Add-ons for Firefox for Android available on MDN.

Here are the open source add-ons that use these hub APIs:

As usual, you can join us on our IRC channel, I’ll be pleased to help you up with testing Firefox Hub and to hear your feedback about the experience you encountered.