The future of themes is here!

Themes have always been an integral part of the add-ons ecosystem and (AMO). The current generation of themes – also known as lightweight themes and previously known as Personas (long story) – were introduced to AMO in 2009. There are now over 400 thousand of them available on AMO. Today we’re announcing the AMO launch of the next major step in the evolution of Firefox themes.

If you follow this blog, this shouldn’t come as a surprise. We’ve talked about theme updates a few times before. We actually turned on the new theme submission flow for testing a couple of weeks ago, but didn’t remove the old one. We’ve now flipped the switch and AMO will only accept the new themes.

What’s new about themes

Lightweight themes allowed designers to set a background image for the main browser toolbox, as well as the text color and background color. With this update, themes let you do much more:

  • Change other aspects of the browser, like the color of the toolbar icons, the color of the text in the location bar, and the color of the active tab.
  • Set multiple background images, with different alignment, and tiling. You no longer need a massive background image, or make guesses about the width and height of the browser toolbox.
  • Use color transparency to make interesting color blends.

Here’s an example of one of the recently-submitted themes using some of these new properties:

Orange theme

A detailed list of the supported theme properties can be found in this MDN article. If you scroll down to the compatibility table, you’ll find many properties that only very recent versions of Firefox support. That’s because Firefox engineers are still adding new theme capabilities, making them more powerful with every release.

How to submit themes now

If you’re a theme designer, the submission flow for themes has changed a bit.

  • In the Developer Hub, the Submit a New Theme button will take you to the new submission flow, which is the same used for extensions.
  • You’ll be able to choose if you want to host your theme on AMO or distribute it yourself. This feature has been available for extensions for years, and it allows you to create files you can host on your website or keep for personal use. More on Distribution.
  • On the next step, you can choose to either upload an XPI file or Create a Theme. The outcome of either path is the same.
  • These instructions explain how to build a theme XPI. If you prefer using a wizard like the one we had for lightweight themes, click on the Create a Theme button.

Themes Creation Wizard

  • The new wizard supports the theme features of its predecessor, as well as some of the new ones. To take advantage of all new properties, however, you’ll need to upload an XPI.
  • The browser preview image at the bottom of the screenshot is what becomes the main image for the theme on your theme page. It better reflects how Firefox will look after you install the theme, instead of just showing the background image.

If you run into any problems with these new tools, please report it here.

What about Personas Plus?

The Personas Plus extension has been a handy companion for theme designers for years. It makes it easy to create themes, preview them, and use them locally. Its successor in the new world of themes is Firefox Color.

Firefox Color is exclusively a development tool for themes, so it doesn’t match all features in Personas Plus. However, it should cover what is needed for easy theme creation.

Migrating Lightweight Themes

What about the 400K+ themes already hosted on AMO? We’re keeping them, of course, but we will transform them to the new format later this year. So, if you’re a theme designer and want your theme to be updated, don’t worry, we got you covered. And please don’t submit duplicate themes!

After the migration is done, we’ll notify you about it. The main difference you’ll notice is the new preview image in the theme page. You’ll then be able to submit new versions of your theme that take advantage of the new theme properties.

You’ll also notice that all new and migrated themes have different editing tools to change their descriptions. They are very similar to the tools we use for extensions. They may take a bit of getting used to, but they provide great benefits over the lightweight theme tools. You’ll be able to set a Contributions URL, so your users can compensate you for your work. Also, you get a detailed stats dashboard so you can learn about your users.

uBlock Statistics Dashboard

This level of success not guaranteed

This may seem like a small step, but it’s actually been a large undertaking. It’s taken years and over a dozen people on the Firefox and AMO teams to finally get this out the door. I won’t even try to list everyone because I’m sure I’ll forget some (but thank you all anyway!). We’re very excited with about these new themes, and hope they will lead to even more and better Firefox customization.

Extensions in Firefox 63

Firefox 63 is rolling into Beta and it’s absolutely loaded with new features for extensions. There are some important new API, some major enhancements to existing API, and a large collection of miscellaneous improvements and bug fixes. All told, this is the biggest upgrade to the WebExtensions API since the release of Firefox Quantum.

An upgrade this large would not have been possible in a single release without the hard work of our Mozilla community. Volunteer contributors landed over 25% of all the features and bug fixes for WebExtensions in Firefox 63, a truly remarkable effort. We are humbled and grateful for your support of Firefox and the open web. Thank you.

Note: due to the large volume of changes in this release, the MDN documentation is still catching up. I’ve tried to link to MDN where possible, and more information will appear in the weeks leading up to the public release of Firefox 63.

Less Kludgy Clipboard Access

A consistent source of irritation for developers since the WebExtensions API was introduced is that clipboard access is not optimal. Having to use execCommand() to cut, copy and paste always felt like a workaround rather than a valid way to interact with the clipboard.

That all changes in Firefox 63. Starting with this release, parts of the official W3C draft spec for asynchronous clipboard API is now available to extensions. When using the clipboard, extensions can use standard the WebAPI to read and write to the clipboard using navigator.clipboard.readText() and navigator.clipboard.writeText().  A couple of things to note:

  • clipboard.writeText is available to secure contexts and extensions, without requiring any permissions, as long as it is used in a user-initiated event callback.  Extensions can request the clipboardWrite permission if they want to use clipboard.writeText outside of a user-initiated event callback. This preserves the same use conditions as document.execCommand(“copy”).
  • clipboard.readText is available to extensions only and requires the clipboardRead permission. There currently is no way to expose the clipboard.readText API to web content since no permission system exists for it outside of extensions. This preserves the same use conditions as document.execCommand(“paste”).

In addition, the text versions of the API are the only ones available in Firefox 63.  Support for the more general and clipboard.write() API are awaiting clarity around the W3C spec and will be added in a future release.

Selecting Multiple Tabs

One of the big changes coming in Firefox 63 is the ability to select multiple tabs simultaneously by either Shift- or CTRL-clicking on tabs beyond the currently active tab. This allows you to easily highlight a set of tabs and move, reload, mute or close them, or drag them into another window.  It is a very convenient feature that power users will appreciate.

In concert with this user-facing change, extensions are also gaining support for multi-select tabs in Firefox 63.  Specifically:

  • The tabs.onHighlighted event now handles multiple selected tabs in Firefox.
  • The tabs.highlight API accepts an array of tab indices that should be selected.
  • The tabs.Tab object properly sets the value of the highlighted property.
  • The tabs.query API now accepts “highlighted” as a parameter and will return an array of the currently selected tabs.
  • The tabs.update API can alter the status of selected tabs by setting the highlighted property.

A huge amount of gratitude goes to Oriol Brufau, the volunteer contributor who implemented every single change listed above.  Without his hard work, multi-select tabs would not be available in Firefox 63. Thank you, Oriol!

P.S.  Oriol wasn’t satisfied doing all of the work for multi-select tabs, he also fixed several issues with extension icons.

What You’ve Been Searching For

Firefox 63 introduces a completely new API namespace that allows extensions to enumerate and access the search engines built into Firefox.  Short summary:

  • The new search.get() API returns an array of search engine objects representing all of the search engines currently installed in Firefox.
  • Each search engine object contains:
    • name (string)
    • isDefault (boolean)
    • alias (string)
    • favIconUrl (URL string)
  • The new API takes a query string and returns the results. It accepts an optional search engine name (default search engine is used, if omitted) and an optional tab ID where the results should be displayed (opens a new tab, if omitted).
  • Extensions must declare the search permission to use either API.
  • The API can only be called from inside a user-input handler, such as a button, context menu or keyboard shortcut.

More Things to Theme

Once again, the WebExtensions API for themes has received some significant enhancements.

  • The built-in Firefox sidebars can now be themed separately using:
    • sidebar
    • sidebar_text
    • sidebar_highlight
    • sidebar_highlight_text
  • Support for theming the new tab page was added via the properties ntp_background and ntp_color (both of which are compatible with Chrome).
  • The images in the additional_backgrounds property are aligned correctly to the toolbox, making all the settings in additional_backgrounds_alignment work properly.  Note that this also changes the default z-order of additional_backgrounds, making those image stack on top of any headerURL image.
  • By default, all images for additional_backgrounds are anchored to the top right of the browser window.  This was variable in the past, based on which properties were included in the theme.
  • The browser action theme_icons property now works with more themes.
  • Themes now enforces a maximum limit of 15 images for additional_backgrounds.
  • The theme properties accentcolor and textcolor are now optional.

Finally, there is a completely new feature for themes called theme_experiment that allows theme authors to declare their own theme properties based on any Firefox CSS element. You can declare additional properties in general, additional elements that can be assigned a color, or additional elements that can be images.  Any of the items declared in the theme_experiment section of the manifest can be used inside the theme declaration in the same manifest file, as if those items were a native part of the WebExtensions theme API.

theme_experiment is available only in the Nightly and Developer editions of Firefox and requires that the ‘extensions.legacy.enabled’ preference be set to true.  And while it also requires more detailed knowledge of Firefox, it essentially gives authors the power to completely theme nearly every aspect of the Firefox user interface. Keep on eye on MDN for detailed documentation on how to use it (here is the bugzilla ticket for those of you who can’t wait).

Similar to multi-select tabs, all of the theme features listed above were implemented by a single contributor, Tim Nguyen. Tim has been a long-time contributor to Mozilla and has really been a champion for themes from the beginning. Thank you, Tim!

Gaining More Context

We made a concerted effort to improve the context menu subsystem for extensions in Firefox 63, landing a series of patches to correct or enhance the behavior of this heavily used feature of the WebExtensions API.

  • A new API, menus.getTargetElement, was added to return the element for a context menu that was either shown or clicked.  The menus.onShown and menus.onClicked events were updated with a new info.targetElementId integer that is accepted by getTargetElement.  Available to all extension script contexts (content scripts, background pages, and other extension pages), menus.getTargetElement has the advantage of allowing extensions to detect the clicked element without having to insert a content script into every page.
  • The “visible” parameter for menus.create and menus.update is now supported, making it much easier for extensions to dynamically show and hide context menu items.
  • Context menus now accept any valid target URL pattern, not just those supported by valid match patterns.
  • Extensions can now set a keyboard access key for a context menu item by preceding it with the & symbol in the menu item label.
  • The activeTab permission is now granted for any tab on which a context menu is shown, allowing for a more intuitive user experience without extensions needing to request additional permissions.
  • The menus.create API was fixed so that the callback is also called when a failure occurs
  • Fixed how menu icons and extensions icons are displayed in context menus to match the MDN documentation.
  • The menus.onClick handler can now call other methods that require user input.
  • menus.onShown now correctly fires for the bookmark context.
  • Made a change that allows menus.refresh() to operate without an onShown listener.

Context menus will continue to be a focus and you can expect to see even more improvements in the Firefox 64 timeframe.

A Motley Mashup of Miscellany

In addition to the major feature areas mentioned above, a lot of other patches landed to improve different parts of the WebExtensions API.  These include:

Thank You

A total of 111 features and improvements landed as part of Firefox 63, easily the biggest upgrade to the WebExtensions API since Firefox Quantum was released in November of 2017.  Volunteer contributors were a huge part of this release and a tremendous thank you goes out to our community, including: Oriol Brufau, Tim Nguyen, ExE Boss, Ian Moody, Peter Simonyi, Tom Schuster, Arshad Kazmi, Tomislav Jovanovic and plaice.adam+persona. It is the combined efforts of Mozilla and our amazing community that make Firefox a truly unique product. If you are interested in contributing to the WebExtensions ecosystem, please take a look at our wiki.


September’s featured extensions

Firefox Logo on blue background

Pick of the Month: Iridium for YouTube

by Particle
Play videos in a pop-out window, only see ads within subscribed channels, take video screenshots, and much more.

“Been using this for a couple of months and it’s the greatest YouTube extension ever. I have tried a lot of different ones and this one melts my heart.”

Featured: Private Bookmarks

by rharel
Password-protect your personal bookmarks.

“This capability was sorely needed, and is well done. Works as advertised, and is easy to use.”

Featured: Universal Bypass

by Tim “TimmyRS” Speckhals
Automatically skip annoying link shorteners.

“Wow you must try this extension.”

Featured: Copy PlainText

by erosman
Easily remove text formatting when saving to your clipboard.

“Works very well and is great for copying from browsers to HTML format emails, which often makes a complete mess of not only fonts but layout spacing as well.”

If you’d like to nominate an extension 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!

Timeline for disabling legacy add-ons on

Mozilla will stop supporting Firefox Extended Support Release (ESR) 52, the final release that is compatible with legacy add-ons, on September 5, 2018.

As no supported versions of Firefox will be compatible with legacy add-ons after this date, we will start the process of disabling legacy add-on versions on (AMO) in September. On September 6, 2018, submissions for new legacy add-on versions will be disabled.  All legacy add-on versions will be disabled in early October, 2018. Once this happens, users will no longer be able to find your extension on AMO.

After legacy add-ons are disabled, developers will still be able to port their extensions to the WebExtensions APIs. Once a new version is submitted to AMO, users who have installed the legacy version will automatically receive the update and the add-on’s listing will appear in the gallery.

For more information about porting legacy extensions to the WebExtensions API is available on MDN.  We encourage legacy add-on developers to visit our wiki for more information about upcoming development work and ways to get in touch with our team for help.

Volunteer Add-on Reviewer Applications Open

Thousands of volunteers around the world contribute to Mozilla projects in a variety of capacities, and extension review is one of them. Reviewers check extensions submitted to (AMO) for their safety, security, and adherence to Mozilla’s Add-on Policies.

Last year, we paused onboarding new volunteer extension reviewers while we updated the add-on policies and review processes to address changes introduced by the transition to the WebExtensions API and the new post-review process.

Now that the policies, processes and guidelines have been refreshed, we are re-opening applications for our volunteer reviewer program. If you are a skilled JavaScript developer, have experience developing browser extensions, and are interested in helping to keep the extension ecosystem safe and healthy, please consider contributing as a volunteer reviewer. You can learn more about the add-on reviewer program here.

If you are interested, please check out our wiki to learn how to apply. We will follow up with applicants shortly.

Share files easily with extensions

WeTransfer offers a simple, extensions-based file transferring solution.

When we want to share digital files, most people think of popular file hosting services like Box or Dropbox, or other common methods such as email and messaging apps. But did you know there are easier—and more privacy-focused—ways to do it with extensions? WeTransfer and Fire File Sender are two intriguing extension options.

WeTransfer allows you to send files up to 2GB in size with a link that expires seven days from upload. It’s really simple to use—just click the toolbar icon and a small pop-up appears inviting you to upload files and copy links for sharing. WeTransfer uses the highest security standards and is compliant with EU privacy laws. Better still, recipients downloading files sent through WeTransfer won’t get bombarded with advertisements; rather, they’ll see beautiful wallpapers picked by the WeTransfer editorial team. If you’re interested in additional eye-pleasing backgrounds, check out WeTransfer Moment.

Fire File Sender allows you to send files up to 4GB each. Once the file is successfully uploaded, a link and a six-digit code is generated for you to share. The link and code will expire 10 minutes after upload or after one download—whichever occurs first. Also, within the 10-minute time frame, you have the ability to stop sharing the file. Fire File Sender uses the browser sidebar for the uploading and downloading of files through Send Anywhere APIs.

Best of all, neither WeTransfer, nor Fire File Sender require an account to use their service. The enhanced anonymity of the file exchange, plus the automatic deletion of files (Dropbox and Google require manual deletion), make these extensions strong choices for privacy-minded folks.

I should also mention Firefox Send, though it’s a web service and not an extension. Firefox Send is Mozilla’s home-grown solution to file sharing. Created by the Mozilla Test Pilot team, Firefox Send allows you to securely share files up to 1GB in size directly from your browser. Any links generated will either expire after one download or 24 hours, whichever comes first. Taking privacy matters even further, files distributed through Firefox Send are encrypted directly in the browser and then uploaded to Mozilla. Mozilla does not have the ability to access the content of the encrypted file.  (The Test Pilot team constantly strives to improve on their project; its development progress can be viewed on GitHub.)


Building Extension APIs with Friend of Add-ons Oriol Brufau

Please meet Oriol Brufau, our newest Friend of Add-ons! Oriol is one of 23 volunteer community members who have landed code for the WebExtensions API in Firefox since the technology was first introduced in 2015. You may be familiar with his numerous contributions  if you have set a specific badge text color for your browserAction, highlighted multiple tabs with the tabs.query API, or have seen your extension’s icon display correctly in about:addons.

While our small engineering team doesn’t always have the resources to implement every approved request for new or enhanced WebExtensions APIs, the involvement of community members like Oriol adds considerable depth and breadth to technology that affects millions of users. However, the Firefox code base is large, complex, and full of dependencies. Contributing code to the browser can be difficult even for experienced developers.

As part of celebrating Oriol’s achievements, we asked him to share his experience contributing to the WebExtensions API with the hope that it will be helpful for other developers interested in landing more APIs in Firefox.

When did you first start contributing code to Firefox? When did you start contributing code to WebExtensions APIs?

I had been using Firefox Nightly, reporting bugs and messing with code for some time, but my first code contribution wasn’t until February 2016. This was maybe not the best choice for my first bug. I managed to fix it, though I didn’t have much idea about what the code was doing, and my patch needed some modifications by Jonathan Kew.

For people who want to start contributing, it’s probably a better idea to search Bugzilla for a bug with the ‘good-first-bug’ keyword. (Editor’s note: you can find mentored good-first-bugs for WebExtensions APIs here.)

I started contributing to the WebExtensions API in November 2017, when I learned that legacy extensions would stop working even if I had set the preference to enable legacy extensions in Nightly. Due to the absence of good compatible alternatives to some of my legacy add-ons, I tried to write them myself, but I couldn’t really do what I wanted because some APIs were buggy or lacked various features. Therefore, I started making proposals for new or enhanced APIs, implementing them, and fixing bugs.

What were some of the challenges to building and landing code for the WebExtensions API?

I wasn’t very familiar with WebExtensions APIs, so understanding their implementation was a bit difficult at first. Also, debugging the code can be tricky. Some code runs in the parent process and some in the content one, and the debugger can make Firefox crash.

Initially, I used to forget about testing for Android. Sometimes I had a patch that seemed to work perfectly for Linux, but it couldn’t land because it broke some Android tests. In fact, not being able to run Android tests locally in my PC is a big annoyance.

What resources did you use to overcome those challenges?

I use, a source code indexing tool for Firefox, which makes it easy to find the code that I want to modify, and I received some help from mentors in Bugzilla.

Reading the documentation helps but it’s not very detailed. I usually need to look at the Firefox or Chromium code in order to answer my questions.

Did any of your past experiences contributing code to Firefox help you create and land the WebExtensions APIs?

Yes. Despite being unfamiliar with WebExtensions APIs at first, I had a considerable experience with searching code using Searchfox, using ‘./mach build fast’ to recompile only the frontend, running tests, managing my patches with Mercurial, and getting them reviewed and landed.

Also, I already had commit access level 1, which allows me to run tests in the try servers. That’s helpful for ensuring everything works on Android.

What advice would you give people who want to build and land WebExtensions APIs in Firefox?

1. I didn’t find explanations for how the code is organized, so I would first summarize it.

The code is mainly distributed into three different folders:

  • /browser/components/extensions/:
  • /mobile/android/components/extensions/
  • /toolkit/components/extensions/

The ‘browser’ folder contains the code specific to Firefox desktop, the ‘android’ is specific to Firefox for Android, and ‘toolkit’ contains code shared for both.

Some APIs are defined directly in ‘toolkit’, and some are defined differently in ‘browser’ and ‘android’ but they can still share some code from ‘tookit’.

2. APIs are defined using JSON schemas. They are located in the ‘schemas’ subdirectory of the folders above, and describe the API properties and methods, determine which kind of parameters are accepted, etc.

3. The actual logic of the APIs is written in JavaScript files in the ‘parent’ and ‘child’ subdirectories, mostly the former.

Is there anything else you would like to add?

The existing Webextension APIs are now more mature, useful and reliable than they were when support for legacy extensions was dropped. It’s great that promising new APIs are on the way!

Thanks, Oriol! It is a pleasure to have you in the community and and we wish you all the best in  your future endeavors.

If you are interested in contributing to the WebExtensions API and are new to Firefox’s infrastructure, we recommend that you onboard to the Firefox codebase and then land a patch for a good-first-bug. If you are more familiar with Firefox infrastructure, you may want to implement one of the approved WebExtensions API requests.

For more opportunities to contribute to the add-ons ecosystem, please visit our Contribution wiki.

New backend for storage.local API

To help improve Firefox performance, the backend for the storage.local API is migrating from JSON to IndexedDB. These changes will soon be enabled on Firefox Nightly and will stabilize when Firefox 63 lands in the Beta channel. If your users switch between Firefox channels using the same profile during this time, they may experience data regression in the extensions they have previously installed.

We recommend that users do not change Firefox channels between now and September 5, 2018. However, if they do and they contact you with questions about why their extensions are not behaving normally (such as losing saved options or other local data), please point them to this post for instructions on how to retrieve and re-import their extension data.

How to retrieve migrated data and re-import the extension data

Go to about:config and check the setting for extensions.webextensions.ExtensionStorageIDB.enabled. If it is set to true, the extension data has been moved to the new backend and is not directly available as a single file in the file system.

If the extension data is not available after it has been moved in the new backend, follow these steps to ask Firefox to re-import the extension data:

  1. Look up the Extension ID by going to about:debugging
  2. Navigate to your system profile directory
  3. Go to the folder called browser-extension-data
  4. Go to the folder of the Extension ID you found in about:debugging
  5. You will see a file named storage.js.migrated (or storage.js.migrated.N if the data has migrated more than once). Your data has been moved into this file.
  6. Uninstall the extension
  7. Copy the file named storage.js.migrated to a new file named storage.js in the same directory
  8. Open the browser console.
    1. You can access the browser console by going to the from [hamburger menu] → Web Developer → browser console
  9. Re-install the extension
  10. Wait for a message “Migrating storage.local data for <Extension debug name>” and “storage.local data successfully migrated to IDB Backend for <Extension debug name>” to appear in the browser console

How to address errors when re-importing migrated extension data

If you see a QuotaExceededError in the browser console during the final step in the data retrieval and re-importing process, you may have insufficient disk space. After you free  additional disk space, you maybe be able to fix this issue by following the steps outlined in the section above.

If the problem persists and the extension is using the new ExtensionStorageIDB backend, please report the issue on Bugzilla. You can see if the extension is using the ExtensionStorageIDB backend by going to about:config and seeing if extensions.webextensions.ExtensionStorageIDB.migrated.EXTENSION_ID is set to true.

Reporting issues with the storage.local API

If you are an extension developer and you encounter any issues that seem to be related to the storage.local API, please file a new issue on Bugzilla and add it as a blocker of bug 1474562 so that we can promptly investigate it.

August’s Featured Extensions

Firefox Logo on blue background

Pick of the Month: Privacy Possum

by cowlicks
Protect yourself against some of the sneakiest trackers out there.

“Perfect complement for your privacy.”

Featured: Textmarker

by underflyingbirches
If you do a lot of text highlighting on webpages, this is a highly customizable tool with loads of fancy features like bookmarking, shortcut commands, save options, and more.

“This is the best text marker add-on under the new Firefox platform! It’s simple but also powerful, very flexible.”

Featured: Worldwide Radio

by Oleksandr
Enjoy live radio from more 30,000 local stations around the globe.

“Love it! Works as intended and I can listen to my favorite radio station in Australia!”

Featured: Transparent Standalone Images

by Jared W
For a clearer view of digital images, this simple but unique extension renders standalone images on transparent backgrounds.

“Oh my god, thank you. I was getting so tired of the white backgrounds around standalone transparent images. Bless you, works perfectly.”

Featured: ReloadMatic: Automatic Tab Refresh

by pylo
More than just another time-controlled tab reloader, ReloadMatic offers cache control, protection against reloading a page you may be in the midst of interacting with, and other nuanced features.

“I really appreciate the time you’ve spent developing this extension because it has far more functionality than the other reloading extensions I’ve tried since moving to [Firefox] Quantum.”

If you’d like to nominate an extension 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!