Extensions in Firefox 61

Firefox 60 is now in the Release channel, which means that Firefox 61 has moved from Nightly to the Beta channel. As usual, Mozilla engineers and volunteer contributors have been hard at work, landing a number of new and improved WebExtensions API in this Beta release.

Before getting to the details, though, I’d like to note that the Firefox Quantum Extensions Challenge has come to an end.  The contest was a huge success and the judges (myself included) were overwhelmed with both the creativity and quality of the entrants.  A huge thank you to everyone who submitted an extension to the contest and congratulations to the winners.

The Case of the Vanishing Tabs

In November of 2017, we made a commitment to enriching the WebExtensions API with additional tab management features, with tab hiding being a top priority.  Since that time, several new and enhanced tab-related API have been added and today, with the release of Firefox 61 to the Beta channel, tab hiding is officially a WebExtensions API.

The usage of the tabs.hide() API was covered in the post on Extensions in Firefox 59.  The main change now is that it is no longer necessary to set the extensions.webextensions.tabhide.enabled preference to true; tab hiding can be used by extensions without setting that preference. In fact, that preference will soon be going away in an upcoming release.

In the user interface, when tabs are hidden, a down-arrow is added to the end of the tab strip. When clicked, this icon shows all of your tabs, hidden and visible, and provides a quick and easy way to keep from losing things (see animation below, and thanks to Afnan Khan for the great Hide Tabs extension).

Hidden Tabs Arrow

In addition, if a hidden tab is playing audio, the audio icon is shown on top of the down-arrow icon.  If you click on the down-arrow, the hidden tab with audio is pulled out so that it is easier to find (see animation below).

Audio Icon For Hidden Tabs

You can expect to see this user interface get a small update in Firefox 62. In particular, it will be modified so that it conforms to the Firefox Photon Design System.

Making Hidden Tabs Visible

As noted above, when an extension hides a tab, Firefox will display a down-arrow in the tab strip that gives users access to all of their tabs, both visible and hidden. This is a simple and easy way to manage hidden tabs, but it is also subtle.  To make sure users are completely aware of hidden tabs, and to discourage malicious and deceitful use of them, Firefox will always show a door hanger when the first tab is hidden.

Hidden Tab Door Hanger

The door hanger informs the user that one or more tabs was hidden by an extension, explains the down-arrow on the tab strip (pointing to it), and gives the user the option to disable the extension.

Even More Tab Stuff

While tab hiding is the biggest feature to land in Firefox 61, a few other highly requested tab features also made it into this release.

A new browserSettings API, openUrlbarResultsInNewTabs, allows extensions to specify if search results from the URL bar should open in the current tab or a new tab.  This complements the existing browserSettings.openBookmarksInNewTabs and browserSettings.openSearchResultsInNewTabs settings.

Also, fine grain control of the opening position for new tabs is now provided via the browserSettings.newTabPosition API.  This new API can take three different values:

  • afterCurrent – open all new tabs next to the current tab
  • relatedAfterCurrent – open child tabs (tabs opened from a link in the current tab) after the current tab
  • atEnd – open all new tabs at the end of the tab strip

Finally, listeners to the tabs.onUpdated event can now supply a filter to avoid the overhead of unwanted events. The filter supports URLs, window and tab ids, and various properties such as “audible”, “discarded”,  “hidden”, “isarticle” and more. Not only does this simplify code inside the listener for developers, it significantly improves browser performance by keeping Firefox from dispatching so many events. Extension developers are strongly encouraged to use this new feature to make their extension and the browser more performant for users.

Themes

It seems we can’t let a release go by without adding to themes, and Firefox 61 is no exception. Check out the new improvements (and the improved documentation on MDN that shows examples of what each theme property modifies).

  • Themes support default_locale; not a theme property, but a standard manifest key
  • Fixed tab_selected so it works when headerURL is not set (uplifted to 60)
  • Fully transparent values are once again allowed in themes
  • All of the toolbar properties now apply to the find bar as well
  • Themes can now set the hover, active and focus colors for buttons and toolbars
  • Autocomplete popups now honor any popup_* theme properties that are set

Cleaning the WebExtensions House

I usually end each blog post with a small section that notes some of the general improvements and/or bug fixes in the release. For Firefox 61, though, there was a concerted to improve the WebExtensions ecosystem.  A substantial number of bug fixes and optimizations landed, enough that I wanted to make sure they were more than just a footnote.

Keeping The User Informed

In addition to making sure users are fully aware of extensions using tab hiding, Firefox 61 also highlights when an extension modifies a user’s Home page by displaying a door hanger.

And to help users better understand when an extension is controlling the New Tab page or Home page, or using the tab hiding feature, the door hanger now shows the name of the controlling extension and includes a “Learn More” link that takes the user to a more detailed explanation on Mozilla’s support site.

New Home Page Door Hanger

Important Proxy Changes

After the release of Firefox 59, we discovered that the implementation of the proxyConfig API was not handling the settings for hostnames correctly, causing non-socks proxy settings to fail. The has been corrected in Firefox 61 and uplifted to Firefox 60.

The discovery and resolution of this bug, however, caused us to reevaluate how WebExtensions exposed proxy settings.  In particular, we asked ourselves why these settings weren’t part of the browser.proxy.* namespace. It is true that the underlying implementation depends upon Firefox browser settings, which is how it ended up as part of the browser.browserSettings.* namespace, but that’s just an internal detail. Every major browser vendor supports proxy settings, and they all support basically the exact same set of settings.

Given that, and the fact that Mozilla should be championing web standards, we decided it made more sense to have the proxy settings live inside the browser.proxy.* namespace. So starting with Firefox 60, the browser.browserSettings.proxyConfig API is now the browser.proxy.settings API.  Extensions developers who want to use this API should request the much more intuitive “proxy” permission instead of the “browserSettings” permission.

Finally, another patch was landed in Firefox 61 so that proxy extensions can start before requests bypass them.

Browser Settings

A few new browser settings are now available to extension developers in Firefox 61:

  • Extensions can now toggle the setting that decides if pages should be rendered with document fonts or not via browserSettings.useDocumentFonts.
  • Along similar lines, extensions can set the preference that decides if a page should be rendered with the document colors, user-selected colors, or user-selected only with high-contrast themes via the browserSettings.overrideDocumentColors API.
  • Extensions can offer users the ability to close tabs by double-clicking them via the browserSettings.closeTabsByDoubleClick API.

Thank You

This was a busy release for the WebExtensions API with a total of 95 features and improvements landed as part of Firefox 61. A sincere thank you goes to our many contributors for this release, especially our community volunteers including: Tim Nguyen, Oriol Brufau, Vivek Dhingra, Tomislav Jovanovic, Bharat Raghunathan, Zhengyi Lian, Bogdan Podzerca, Dylan Stokes, Satish Pasupuleti, and Sören Hentzschel. It is only through the combined efforts of Mozilla and our amazing community that we can ensure continued access to the open web. If you are interested in contributing to the WebExtensions ecosystem, please take a look at our wiki.

Switching to JSON for update manifests

We plan on switching completely to JSON update manifests on Firefox and AMO. If you self-distribute your add-on please read ahead for details.

AMO handles automatic updates for all add-ons listed on the site. For self-hosted add-ons, developers need to set an update URL and manage the update manifest file it returns. Today, AMO returns an RDF file, a common legacy add-on feature. A JSON equivalent of this file is now supported in Firefox. JSON files are smaller and easier to read. This also brings us closer to removing complex RDF parsing from Firefox code.

Firefox 62, set to release September 5, 2018, will stop supporting the RDF variant of the update manifest. Firefox ESR users can continue using RDF manifests until the release of Firefox 68 in 2019. Nevertheless, all developers relying on RDF for their updates should read the documentation and switch soon. Firefox 45 introduced this feature, so all current versions of Firefox support it.

Developers of add-ons hosted on AMO don’t need to take any action. AMO will switch to JSON updates in the coming weeks. You don’t need to make any changes for add-ons hosted on AMO to update normally. Users on versions of Firefox older than 45 will no longer receive automatic updates. However, that should be a very small number of users. It’s also a very small number of active add-ons, since Firefox 45 predates the move to WebExtensions.

If you have any questions about this, please post a comment on the Discourse thread.

Firefox Quantum Extensions Challenge Winners

The results are in for the Firefox Quantum Extensions Challenge! We were thrilled to see so many creative, helpful, and delightful submission entries.

 

After our judging panel selected finalists from more than 100 submitted entries, the add-ons community voted for each category winner. The winners were announced for the first time  during the livestream broadcast of the Firefox Quantum Extensions Challenge Awards. A recording of the event is available on Air Mozilla.

These extensions bring great functionality and delight to Firefox, so please check them out. Congratulations to the winners!

Best Tab Manager / Tab Organizer

Winner – Session Sync

by Gabriel Ivanica

This extension can edit, save, change, and restore sessions. Sessions can be saved as bookmarks and synced using Firefox Sync.

Well done. Manages sessions in an intuitive way. UX is polished and works extremely well.”

Runner Up – Tip Tab

by William Wng

Navigate the browser tabs with window screenshots.

Best Dynamic Theme

Winner – Envify

by Yoann Lecuyer

Have you ever wanted a quick way to tell if you are in a staging or production environment? This extension will change your Firefox theme every time you switch environments.

Simple but practical idea, particularly for webmasters.”

Runner up – Native Dark

by spikespaz

Replace Firefox’s default themes with adaptive colorization of the title bar, tabs, and URL bar based on the accent color of your current window.

Best Extension for Games & Entertainment

Winner – Worldwide Radio

by Oleksandr

Listen to live radio stations from around the world and create custom playlists.

“This is a really cool radio add-on with radio stations from all over the world. You can favorite stations, search by country and adjust sound. Listening to Indian radio might become my new favorite hobby.”

Runner up – Web Invaders

By Yalini

Space invaders have come to the web and it’s up to you to fight them off!

May’s Featured Extensions

Firefox Logo on blue background

Pick of the Month: Forget Me Not

by Lusito
Make Firefox forget website data like cookies, local storage, and more—while retaining data for only the websites you place on your whitelist.

“This extension is absolutely excellent, it works seamlessly and intuitively.”

Featured: Image Search Options

by Xamayon
Utilize a suite of customizable reverse image search options in a convenient context menu.

“Somebody listens! The ability to fine tune a context add-on. This one lets you open in a new tab OR window, choose which search engines or another program to search in, as well as save your preferences. Good Show!”

Featured: Kimetrak

by David L.
See at a glance what third party domains are tracking you. Or take a deeper look through a detailed statistics and analysis dashboard.

“Awesome extension to track those who are tracking you.”

Featured: Translate Now

by Geoffrey De Belie
Select text on any web page and right-click to open a new tab to display your translated word or phrase.

“Best translation (extension), as it’s the only one that works with DeepL — the only translator that’s worth it.”

Nominate your favorite add-ons

Featured extensions are selected by a community board made up of developers, users, and fans. Board members change every six months. Here’s further information on AMO’s featured content policies.

If you’d like to nominate an add-on for featuring, please send it to amo-featured [at] mozilla [dot] org for the board’s consideration. We welcome you to submit your own add-on!

Vote for the Winners of the Firefox Quantum Extensions Challenge

Thank you to everyone who submitted extensions to the Firefox Quantum Extensions Challenge!

Our judges reviewed more than 100 submissions and have selected the finalists for each prize category. Now, it’s time for the add-on community to vote for the winners. Use Firefox Beta or Firefox Developer Edition and take these extensions for a test drive (many of the APIs used are not yet available on Firefox 59, the current release), then vote for your favorites here. (And hey, if you really love an extension, maybe consider writing a review?)

Voting closes at 11:59 p.m. PDT on April 29, 2018. Winners will be announced on May 8, 2018.

Your finalists are…

Best Tab Manager/Tab Organizer

Best Dynamic Theme

Best Extension for Games & Entertainment

« Vote Now »

Friend of Add-ons: Viswaprasath Ks

Please meet our newest Friend of Add-ons, Viswaprasanth Ks! Viswa began contributing to Mozilla in January 2013, when he met regional community members while participating in a Firefox OS hackathon in Bangalore, India. Since then, he has been a member of the Firefox Student Ambassador Board, a Sr. Firefox OS app reviewer, and a Mozilla Rep and Tech Speaker.

In early 2017, Viswa began developing extensions for Firefox using the WebExtensions API. From the start, Viswa wanted to invite his community to learn this framework and create extensions with him. At community events, he would speak about extension development and help participants build their first extensions. These presentations served as a starting point for creating the Activate campaign “Build Your Own Extension.” Viswa quickly became a leader in developing the campaign and testing iterations with a variety of different audiences. In late 2017, he collaborated with community members Santosh Viswanatham and Trishul Goel to re-launch the campaign with a new event flow and more learning resources for new developers.

Viswa continues to give talks about extension development and help new developers become confident working with WebExtensions APIs. He is currently creating a series of videos about the WebExtensions API to be released this summer. When he isn’t speaking about extensions, he mentors students in the Tamilnadu region in Rust and Quality Assurance.

These experiences have translated into skills Viswa uses in everyday life. “I learned about code review when I became a Sr. Firefox OS app reviewer,” he says. “This skill helps me a lot at my office. I am able to easily point out errors in the product I am working on. The second important thing I learned by contributing to Mozilla is how to build and work with a diverse team. The Mozilla community has a lot of amazing people all around the world, and there are unique things to learn from each and every one.”

In his free time, Viswa watches tech-related talks on YouTube, plays chess online, and explores new Mozilla-related projects like Lockbox.

He’s also quick to add, “I feel each and every one who cares about the internet should become Mozilla contributors so the journey will be awesome in future.”

If that describes you and you would like get more involved with the add-ons community, please take a look at our wiki for some opportunities to contribute to the project.

Thank you so much for all of your contributions, Viswa! We’re proud to name you Friend of Add-ons.

 

Apply to Join the Featured Extensions Advisory Board

Are you an extensions enthusiast? Do you want to help people find excellent ways to improve their browsing experience? If so, please consider applying to join our Featured Extensions Community Board!

Every six months, we assemble a small group of dedicated community members to help nominate and select new featured extensions for addons.mozilla.org (AMO) each month. Their picks help millions of Firefox users discover top-quality extensions.

The current board is currently wrapping up their six-month term, and we are now assembling a new board of talented contributors for the months July – December.

All active members of the add-ons community — including fans, developers, and advocates —  are invited to apply to join the board. Priority will be given to applicants who have not served on the board before, followed by those with previous experience, and finally from the outgoing board. You can learn more about the duties of the Featured Add-on Advisory Board on MDN web docs.

To apply, please send us an email at amo-featured [at] mozilla [dot] org with your name, a few sentences about how you’re involved with AMO, and why you are interested in joining the board. The deadline is Monday, April 30, 2018 at 23:59 PDT. The new board will be announced shortly thereafter.

April’s Featured Extensions

Firefox Logo on blue background

Pick of the Month: Passbolt

by Passbolt
A password manager made for secure team collaboration. Great for safekeeping wifi and admin passwords, or login credentials for your company’s social media accounts.

“The interface is user-friendly, installation is explained step by step.”

Featured: FoxClocks

by Andy McDonald
Display times from locations all over the world in a tidy spot at the bottom of your browser.

“This is one of the best extensions for people who work with globally distributed teams.”

Featured: Video DownloadHelper

by mig
A simple but powerful tool for downloading video. Works well with the web’s most popular video sharing sites, like YouTube, Vimeo, Facebook, and others.

“Without a doubt the best completely trouble-free add-on which does exactly what it claims to do without fuss, complicated settings, or preferences. It just works.”

Nominate your favorite add-ons

Featured extensions are selected by a community board made up of developers, users, and fans. Board members change every six months. Here’s further information on AMO’s featured content policies.

If you’d like to nominate an add-on for featuring, please send it to amo-featured [at] mozilla [dot] org for the board’s consideration. We welcome you to submit your own add-on!

Extensions in Firefox 60

Many people read this blog because they’ve written extensions for Firefox in the past. Others, though, know some HTML, CSS, and JavaScript and have been thinking about writing their first extension. Either way, now is the perfect time to jump into the WebExtensions ecosystem.

That’s because we’re having a contest! Develop an extension for Firefox and enter it into the Firefox Quantum Extensions Challenge by April 15, 2018. Your extension could win you a brand-new Apple iPad Pro or a $250 gift card to Amazon.

And if you want to make your extension even better, consider using some of the new WebExtensions API discussed below. These new and improved API are available in Firefox 60, recently released to the Beta Channel.

A Profusion of Theme Properties

Since “Best Dynamic Theme” is one of the award categories for the Firefox Quantum Extension Challenge, let’s start with improvements to Themes. Release 60 adds a pile of new items to the list of elements that can be themed, doubling the number of individual components.  These include:

  • tab_line – Line color of the selected tab.
  • tab_selected – Background color of the selected tab.
  • popup – The background color of popups (such as the arrow panels).
  • popup_border – The border color of popups.
  • popup_text – The text color of popups.
  • tab_loading – The color of the tab loading indicator and the tab loading burst.
  • icons – The color of toolbar icons.
  • icons_attention – The color of toolbar icons in attention state such as the starred bookmark icon or finished download icon.
  • frame_inactive – The same as “accentcolor”, but only applied to inactive windows, provided for Chrome compatibility.
  • button_background_active – The color of the background of pressed toolbar buttons.
  • button_background_hover – The color of the background of toolbar buttons on hover.
  • toolbar_field_separator – The color of separators inside the URL bar (also available in Firefox 59; note that in Firefox 58 it was implemented under toolbar_vertical_separator)
  • toolbar_vertical_separator – The color of the separator next to the application menu icon (also available in Firefox 59; note that in Firefox 58 it corresponds to the color of separators inside the URL bar).

Also new for Firefox 60, the headerURL property is no longer mandatory, removing a somewhat arbitrary condition that made themes a bit clunky in the past.

Remember, the contest awards a prize for the best Dynamic Theme, so use the theme API to control and change the various UI elements in creative ways. Want an awesome tutorial that talks about Dynamic Themes? Check out the video below.

More Tab Features

Consistent with each release since Quantum 57, tabs remain a focus of WebExtension growth and improvement. Several bigger features will land in release 61 (expert Bugzilla miners are likely aware of them already), but Firefox 60 still offers a number of important items:

Improving Debugging and Development

Several new additions landed that make the debugging and development of extensions easier, including:

Proxy Improvements

The proxy API is quickly maturing, and Firefox 60 adds more functionality by adding the asynchronous proxy.onRequest API.  This API is ideal for extensions looking to deal with proxy requests in a background script.  Details are still being documented on MDN at the time of this writing but should be available soon.

Network Extensions Get DNS

Extensions now have access to Firefox’s DNS service to resolve hostnames. The new browser.dns() API takes a hostname string (with optional parameters) and resolves it to a DNS record for that hostname. To use this new API, your extension must declare the “dns” permission.

Dynamic Keyboard Shortcuts

Two new API were added to the Commands namespace that allow extensions to change their keyboard shortcuts at runtime. The first, commands.update, allows an extension to change the shortcut key and/or description associated with a command, while the second, commands.reset, reverts a command back to the keyboard shortcut and description originally specified in the manifest file.

Keeping Users Informed

In keeping with our mission to ensure that users are always informed and in control of what extensions are doing, a few new messages have been added to the browser interface:

Enhancing All the Action

The browserAction, pageAction, and sidebarAction are three of the most commonly used WebExtension features, and all three get some improvement in Firefox 60:

Other Improvements

The items mentioned above highlight some of the bigger and/or more visible changes that appear in Firefox 60. As always, though, many other minor or less visible improvements to WebExtensions also landed, including:

Thank You

A total of 63 features or improvements were landed for WebExtensions as part of Firefox 60 Beta. Thank you to our many contributors for this release, especially our community volunteers including: Tim Nguyen, Oriol Brufau, Richard Marti, Prathiksha Guruprasad, Vinicius Costa e Silva, Vivek Dhingra, Zhengyi Lian, Connor Masini, DW-dev, Bogdan Podzerca, and Dylan Stokes. As always, we sincerely appreciate you helping ensure that individuals have the ability to shape the Internet and their own experiences on it. If you are interested in contributing to the WebExtensions ecosystem, please take a look at our wiki.

This post is going up a bit later than normal and there are already several additions and changes to the WebExtensions API in progress for Firefox 61, so continue watching this space for more information. In the meantime, please continue to send us your feedback.

Correction
An earlier version of this article incorrectly stated that the theme properties popup_highlight and popup_highlight_text were available in Firefox 60, and that popup and popup_text could be used to style the URL and search bar autocomplete panels. All four of those things will actually appear in Firefox 61 (which is available in the Firefox Nightly channel right now).