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 [email protected] mailing list.

WebExtensions in Firefox 51

Firefox 51 landed in Developer Edition this week, so we have another update on WebExtensions for you. In this update, we’re making it easier for you to port your existing add-ons to WebExtensions. In addition to being fully compatible with multiprocess Firefox, WebExtensions are becoming the standard for add-on development.

Embedded WebExtensions

In Firefox Developer Edition, you can now embed a WebExtensions add-on inside an existing SDK or bootstrapped add-on.

This is especially useful to developers of SDK or bootstrapped add-ons who want to start migrating to WebExtensions and take advantage of new APIs like Native Messaging, but can’t fully migrate yet. It’s also useful for developers who want to complete data migration towards WebExtensions, and who want to take parts of their add-on that are not compatible with multiprocess Firefox and make them compatible.

For more documentation on this, please head over to MDN or check out some examples.

If you need help porting to WebExtensions, please start with the compatibility checker, and check out these resources.

Manifest Change

Because of confusion around the use of strict_min_version in WebExtensions manifests, we’ve prevented the use of * in strict_min_version, for example 48.* is no longer valid. If you upload an add-on to addons.mozilla.org we’ll warn you of that fact.

API Changes

The clipboardWrite permission is now enabled which removes the need to be in a user gesture. This is usable from extension tabs, popups and content scripts.

When a WebExtensions add-on is uninstalled, any local storage is now cleared. If you’d like to persist data across an uninstall then you can use the upcoming sync storage.

The management API now supports the uninstallSelf and getSelf methods. The idle.queryState API has been updated to accurately reflect the state, previously it always returned the value “idle”.

In the webRequest API, onBeforeRequest is now supported in Firefox Nightly and Developer Edition. There are some platform changes that are required to get that to land in a Release version of Firefox.

Developers have been testing out Native messaging and a couple of bugs were filed and fixed on that. New, more detailed, documentation has been written. One of the useful pieces of feedback involved the performance of the round-trip time, and that has now improved.

There has been a few improvements to the appearance of popup windows including the popup arrow, the corners of the popup and reducing flicker on the animation. Here’s a before and after:

popup-before

popup-after

Out of process extensions

Now that the majority of the work multi process Firefox has been completed, we are looking ahead to the many improvements it can bring. One of them is allowing WebExtensions to be run in a separate process. This process-sandboxing of add-ons will bring clear performance and security benefits.

But before we can do that, there is quite a bit of work that needs to be done. The main tracking bug lists some of these tasks. There is also a video of Rob Wu presenting the work he has done on this. There currently isn’t a timeline for when this will be landed, but the work is progressing.

Recognition

We’d also like to give a thank you to four new contributors to WebExtensions, who’ve helped with this release. Thanks to sj, Jorg K, fiveNinePlusR and Tomislav.

WebExtensions in Firefox 50

Firefox

Firefox 50 landed in Developer Edition this week, so we have another update on WebExtensions for you!Please use the WebExtensions API for any new add-on development, and consider porting your existing add-ons as soon as possible.

It’s also a great time to port because WebExtensions is compatible with multiprocess Firefox, which began rolling out in Firefox 48 to people without add-ons installed. When Firefox 49 reaches the release channel in September, we will begin testing multiprocess Firefox with add-ons. The goal is to turn it on for everyone in January 2017 with the release of Firefox 51.

If you need help porting to WebExtensions, please start with the compatibility checker, and check out these resources.

Since the last release, more than 79 bugs were closed on WebExtensions alone.

API Changes

In Firefox 50, a few more history APIs landed: the getVisits function, and two events–onVisited and onVisitRemoved.

Content scripts in WebExtensions now gain access to a few export helpers that existed in SDK add-ons: cloneInto, createObjectIn and exportFunction.

The webNavigation API has gained event filtering. This allows users of the webNavigation API to filter events based on some criteria. Details on the URL Filtering option are available here.

There’s been a change to debugging WebExtensions. If you go to about:debugging and click on debug you now get all the Firefox Developer Tools features that are available to you on a regular webpage.

Why is this significant? Besides providing more developer features, this will work across add-on reloads and allows the debugging of more parts of WebExtensions. More importantly, it means that we are now using the same debugger that the rest of the Firefox Dev Tools team is using. Reducing duplicated code is a good thing.

As mentioned in an earlier blog post, native messaging is now available. This allows you to communicate with other processes on the host’s operating system. It’s a commonly used API for password managers and security software, which need to communicate with external processes.

Documentation

The documentation for WebExtensions has been updated with some amazing resources over the last few months. This has included the addition of a few new areas:

The documentation is hosted on MDN and updates or improvements to the documentation are always welcome.

There are now 17 example WebExtensions on github. Recently added are history-deleter and cookie-bg-picker.

What’s coming

We are currently working on the proxy API. The intent is to ship a slightly different API than the one Chrome provides because we have access to better APIs in Firefox.

The ability to write WebExtensions APIs in an add-on has now landed in Firefox 51 through the implementation of WebExtensions Experiments. This means that you don’t need to build and compile all of Firefox in order to add in new APIs and get involved in WebExtensions. The policy for this functionality is currently under discussion and we’ll have more details soon.

There are also lots of other ways to get involved with WebExtensions, so please check them out!

“Restart Required” Badge on AMO

Firefox

When add-ons were first introduced as a way to personalize Firefox, they required a restart of Firefox upon installation. Then came “restartless” extensions, which made the experience of installing an add-on much smoother. Every iteration of extensions APIs since then has similarly supported restartless add-ons, up to WebExtensions.

To indicate that an add-on was restartless, we added “No Restart” badges next to them on addons.mozilla.org (AMO). This helped people see which add-ons would be smoother to install, and encouraged developers to implement them for their own add-ons. However, two things happened recently that prompted us to reverse this badge. Now, rather than using a “No Restart” badge to indicate that an add-on is restartless, we will use a “Restart Required” badge to indicate that an add-on requires a restart.

One reason for this change is because we reached a tipping point: now that restartless add-ons are more common, and the number of WebExtensions add-ons is increasing, there are now more extensions that do not require a restart than those that do.

Another reason is that we encountered an unexpected issue with the recent introduction of multiprocess Firefox. In Firefox 48, multiprocess capability was only enabled for people with no add-ons installed. If you are one of these people and you now install an add-on, you’ll be asked to restart Firefox even if the add-on is restartless. This forced restart will only occur over the next few versions as multiprocess Firefox is gradually rolled out. This is not because of the add-on, but because Firefox needs to turn multiprocess off in order to satisfy the temporary rule that only people without add-ons installed have multiprocess Firefox enabled. So a “No Restart” badge may be confusing to people.

Restartless add-ons becoming the norm is a great milestone and a huge improvement in the add-on experience, and one we couldn’t have reached without all our add-on developers—thank you!

WebExtensions Taking Root

Stencil and its 700,000+ royalty-free images are now available for Firefox users, thanks to WebExtensions.

Stencil and its 700,000+ royalty-free images are now available for Firefox users, thanks to WebExtensions.

From enhanced security for users to cross-browser interoperability and long-term compatibility with Firefox—including compatibility with multiprocess Firefox—there are many reasons why WebExtensions are becoming the future of add-on development.

So it’s awesome to see so many developers already embracing WebExtensions. To date, there are more than 700 listed on AMO. In celebration of their efforts to modernize their add-ons, I wanted to share a few interesting ones I recently stumbled upon…

musicfm has an impressively vast and free music library, plus an intuitive layout for simple browsing. However, I’m more of a SoundCloud music consumer myself, so I was intrigued to find SCDL SoundCloud Downloader, which is built for downloading not just music files, but related artwork and other meta information.

The popular Chrome add-on Stencil is now available for Firefox, thanks to WebExtensions. It’s a diverse creativity tool that allows you to combine text and imagery in all sorts of imaginative ways.

musicfm offers unlimited free music and the ability to create your playlists and online stations.

musicfm offers unlimited free music and the ability to create your own playlists and online stations.

I’m enjoying Dark Purple YouTube Theme. I think video resolution reads better against a dark background.

Keepa is one of the finest Amazon price trackers out there that also supports various international versions of the online bazaar (UK, Germany, Japan, plus many others).

Googley Eyes elegantly informs you which sites you visit send information about you to Google.

Search Engine Ad Remover is a perfectly titled extension. But arguably even better than removing ads is replacing them with cat pics.

Thanks for your continued support as we push ahead with a new model of extension development. If you need help porting your add-on to WebExtensions, check out the resources we’ve compiled. If you’re interested in writing your first add-on with WebExtensions, here’s how to get started.

New WebExtensions Guides and How-tos on MDN

Firefox

The official launch of WebExtensions is happening in Firefox 48, but much of what you need is already supported in Firefox and AMO (addons.mozilla.org). The best place to get started with WebExtensions is MDN, where you can find a trove of helpful information. I’d like to highlight a couple of recent additions that you might find useful:

Thank you to Will Bamberg for doing the bulk of this work. Remember that MDN is a community wiki, so anyone can help!