Meet Some Nifty New WebExtensions

In November, WebExtensions became the most common type of add-on submitted to addons.mozilla.org (AMO), accounting for 65% of all new submissions. As of mid-December, AMO has more than 1,400 listed WebExtensions averaging three million daily installs (roughly 12% of all AMO add-on installs).

About 200 of these WebExtensions are ported legacy add-ons, such as Amazing TTV—a fancy Twitch tool that allows for dozens of customizations, like altering text and color layouts, removing clutter in the margins, and tweaking the chat experience.

I’ve enjoyed exploring many of the new WebExtensions, so I thought I’d share a few interesting ones I recently found…

Advanced History presents your personal navigation data in a nice visual layout. Pie charts are more interesting when they're about you!

Advanced History presents your personal navigation data in a nice visual layout. Pie charts are more interesting when they’re about you!

Despite the fact it reveals how much time I waste watching videos of cats licking themselves, Advanced History delivers a fascinating overview of your Web navigation history.

And if you’re going to spend your precious time watching cat licking clips, go all the way with Magic Actions for YouTube™. This YouTube enhancer presents a fine bevy of features, like auto-play in HD, one-click snapshots of just the contents of the video screen, annotation muting, plus a bunch of fun visual effects and cinema modes.

Have you ever encountered an interesting image on the Web, but there wasn’t much context explaining what it was or where it came from? Check out Image Search for Google. It’s super simple—just right-click any image and the add-on will return surprisingly accurate results.

Never want to see some heinous website again? Block Site takes care of that.

Never want to see some heinous website again? Block Site takes care of that.

Block Site does what it claims. Right-click on any Web page you want to avoid in the future and select “Block this domain” from the context menu. Presto—it’s like it never existed.

It dawns on me I tend to gravitate to add-ons that serve a singular, powerful function. Here’s another one: One-click Screenshot. What’s nice about this add-on is it takes a screenshot of the entire page, not just what’s in view. This is ideal for folks who need to grab the full contents of large pages, like students who access dense academic sites.

Many thanks to all the developers out there producing really solid WebExtensions! It’s exciting to see the technical evolution unfold.

If you’re a developer of a legacy add-on and interested in learning more about the porting process, this is a good starting point. Or if you want to write a WebExtension from scratch, this should help.

Add-ons in 2017

Firefox

A little more than a year ago we started talking about where add-ons were headed, and what the future would look like. It’s been busy, and we wanted to give everyone an update as well as provide guidance on what to expect in 2017.

Over the last year, we’ve focused as a community on foundational work building out WebExtensions support in Firefox and addons.mozilla.org (AMO), reducing the time it takes for listed add-ons to be reviewed while maintaining the standards we apply to them, and getting Add-ons ready for e10s. We’ve made a number of changes to our process and products to make it easier to submit, distribute, and discover add-ons through initiatives like the signing API and a revamped Discovery Pane in the add-ons manager. Finally, we’ve continued to focus on communicating changes to the developer community via direct outreach, mailing lists, email campaigns, wikis, and the add-ons blog.

As we’ve mentioned, WebExtensions are the future of add-ons for Firefox, and will continue to be where we concentrate efforts in 2017. WebExtensions are decoupled from the platform, so the changes we’ll make to Firefox in the coming year and beyond won’t affect them. They’re easier to develop, and you won’t have to learn about Firefox internals to get up and running. It’ll be easier to move your add-ons over to and from other browsers with minimal changes, as we’re making the APIs compatible – where it makes sense – with products like Opera, Chrome, and Edge.

By the end of 2017, and with the release of Firefox 57, we’ll move to WebExtensions exclusively, and will stop loading any other extension types on desktop. To help ensure any new extensions work beyond the end of 2017, AMO will stop accepting any new extensions for signing that are not WebExtensions in Firefox 53. Throughout the year we’ll expand the set of APIs available, add capabilities to Firefox that don’t yet exist in other browsers, and put more WebExtensions in front of users.

There’s a lot of moving parts, and we’ll be tracking more detailed information – including a timeline and roadmap – on the WebExtensions section of the Mozilla Wiki. If you’re interested in getting involved with the add-on community and WebExtensions, we have a few ways you can do that. We’re looking forward to the next year, and will continue to post updates and additional information here on the Add-ons blog.

For more information on Add-ons and WebExtensions, see:

Note: Edited to better identify specifics around Firefox 53

webextensions-examples and Hacktoberfest

Firefox

Hacktoberfest is an event organized by DigitalOcean in partnership with GitHub. It encourages contributions to open source projects during the month of October. This year the webextensions-examples project participated.

“webextensions-examples” is a collection of simple but complete and installable WebExtensions, that demonstrate how to use the APIs and provide a starting point for people writing their own WebExtensions.

We had a great response: contributions from 8 new volunteers in October. Contributions included 4 brand-new complete examples:

So thanks to DigitalOcean, to the add-ons team for helping me review PRs, and most of all, to our new contributors:

WebExtensions in Firefox 52

Firefox 52 landed in Developer Edition this week, so we have another update on WebExtensions for you. WebExtensions are becoming the standard for add-on development in Firefox.

API Parity

The sessions API was added to Firefox, with sessions.getRecentlyClosed and sessions.restore APIs. These allow you to query for recently closed tabs and windows and then restore them.

The topSites API was added to Firefox. This allows extensions to query the top sites visited by the browser.

The omnibox API was added to Firefox. Although in Firefox the omnibox is called the Awesome Bar, we’ve kept the naming the same so that extensions can easily port between Chrome and Firefox. The API allows extensions to register a unique keyword for providing their own suggestions to the Awesome Bar. The extension will be able to provide suggestions whenever its registered keyword is typed into the Awesome Bar.

image00

Screenshot of an extension which registered the keyword ‘dxr’ for searching the Firefox source code.

The storage.sync API is now ready for testing, but not yet ready for full deployment. This API relies on a back-end service provided by Mozilla to sync add-on data between devices or re-installs. It is most commonly used to store add-on preferences that should be preserved.

Until the main production service is set up, you can test out storage.sync by making a few preference changes. To sync add-on data, a user will need to be logged into a Firefox Account. There is a limit of 100KB in the amount of data that can be stored. Before data is stored on our server, all data is encrypted in the client. By the time Firefox 52 goes into Beta we plan to have a production service ready to go. At that point we hope to remove the need to set preferences and switch users to the new servers.

Some existing APIs have also been improved. Some of the more significant bugs include:

  • The addition of browser.runtime.onInstalled and browser.runtime.onStartup which are commonly used to initialize data or provide the user with more information about the extension.
  • You can now match and attach content scripts to iframes with about:blank source, which are often used for inserting ads around the web.
  • The manifest file now supports developer information and falls back to the author if appropriate.
  • The commands API now supports _execute_browser_action, which allows you to easily map a command to synthesize a click on your browser action.
  • Bookmark events have been implemented, providing the onRemoved, onMoved, onCreated and onChanged events.

New APIs

Recently, contextual identities were added to Firefox, and these are now exposed to WebExtensions as well, in the tabs and cookie APIs. As an example, the following will query every tab in the current window and then open up a new tab at the same URL with the same contextual identity:

let tabs = browser.tabs.query({currentWindow: true});
tabs.then(tabs => {
  for (let tab of tabs) {
    browser.tabs.create({
      url: tab.url, cookieStoreId:
      tab.cookieStoreId
    });
  }
});

This API is behind the same browser preference that the rest of the contextual identity code is, privacy.userContext.enabled. We expect the API to track that preference for the moment.

You can now suspend and resume requests using the webRequest API. This allows extensions to suspend requests, perform asynchronous checks if necessary, then resume or cancel the request when appropriate, without blocking the parent process.

Out of process extensions

The work to run extensions out of process continues, with multiple changes being made across the APIs to support this. If you are developing an extension using the WebExtensions API then this change should have no effect on you. If you are planning to develop a WebExtensions API, maybe using experiments, or committing into mozilla-central, then please check the documentation for what you need to know.

Examples

The WebExtensions examples repository keeps growing, currently standing at 26 examples. Recent additions include:

All the examples have been altered to use the browser namespace and promises instead of the chrome namespace. The MDN documentation has also been updated to reflect this change.

Web-ext

Web-ext is the command line tool for developing WebExtensions quickly and easily. There were versions 1.5 and 1.6 of web-ext released. Significant changes include:

  • sign can now use a proxy.
  • build uses the locale when generating a file name.
  • --firefox-binary has been shortened to --firefox.

New contributors

Over this release, we’ve had our largest influx of new contributors ever. A shout out to all the awesome contributors who have helped make this happen including the following:

For a full list of the changes to Firefox over this period please check out this Bugzilla query.

More ways to contribute to WebExtensions

Firefox

Since the transition to WebExtensions began, people have contributed bug fixes, APIs, documentation, and tons of valuable feedback. Contributors have given talks about WebExtensions at events all over the world, and developers have taken on the sometimes immense task of migrating their add-ons. It’s been a community effort, and now there are two more ways to contribute to WebExtensions, by participating in the development of APIs.

WebExtensions Experiments: tinker with APIs without having to build Firefox

Previously, if you were a developer who wanted to write WebExtensions APIs, you would have to be familiar with Mozilla infrastructure, like building mozilla-central, working with Bugzilla, and the try server. With WebExtensions Experiments, people who want to prototype APIs for landing in Firefox or use them on Nightly or Developer Edition can do so without having to build Firefox. Experiments work by allowing WebExtensions APIs to be written in another extension, so if you can write an extension, you can prototype a new API.

Help plan and prioritize APIs

Anyone can request an API by filing a bug, and now there is a public triage of these bugs every other week to decide which ones benefit the most developers and users, and support the WebExtensions vision of a safer, cross-browser standard for add-ons. One goal of the triage, which anyone interested is welcome to join, is to provide details and considerations for each prioritized API, making it easier for people to contribute to them. The more complex APIs are also posted on a public Trello board for better tracking.

Join us

If you want to help drive WebExtensions forward, or simply listen in on discussions, please subscribe to the dev-addons@mozilla.org mailing list.