Design and create themes for Firefox

Last September, we announced the next major evolution in themes for Firefox. With the adoption of static themes, you can now go beyond customizing the header of the browser and easily modify the appearance of the browser’s tabs and toolbar, and choose to distribute your theme publicly or keep it private for your own personal use. If you would like to learn about how to take advantage of these new features or are looking for an updated tutorial on how to create themes, you have come to the right place!

Designing themes doesn’t have to be complicated. The theme generator on AMO allows users to create a theme within minutes. You may enter hex, rgb, or rgba values or use the color selector to pick your preferred colors for the header, toolbar, and text. You will also need to provide an image which will be aligned to the top-right. It may appear to be simple, and that’s because it is!

If you want to test what your theme will look like before you submit it to AMO, the extension Firefox Color will enable you to preview changes in real-time, add multiple images, make finer adjustments, and more. You will also be able to export the theme you create on Firefox Color.

If you want to create a more detailed theme, you can use the static theme approach to create a theme XPI and make further modifications to the new tab background, sidebar, icons, and more. Visit the theme syntax and properties page for further details.

When your theme is generated, visit the Developer Hub to upload it for signing. The process of uploading a theme is similar to submitting an extension. If you are using the theme generator, you will not be required to upload a packaged file. In any case, you will need to decide whether you would like to share your design with the world on addons.mozilla.org, self-distribute it, or keep it for yourself. To keep a theme for yourself or to self-distribute, be sure to select “On your own” when uploading your theme.

Whether you are creating and distributing themes for the public or simply creating themes for private enjoyment, we all benefit by having an enhanced browsing experience. With the theme generator on AMO and Firefox Color, you can easily create multiple themes and switch between them.

Extensions in Firefox 66

Firefox 66 is currently in beta and, for extension developers, the changes to the WebExtensions API center primarily around improving performance, stability, and the development experience. A total of 30 issues were resolved in Firefox 66, including contributions from several volunteer community members.

Major Performance Improvements for Storage

I want to start by highlighting an important change that has a major, positive impact for Firefox users. Starting in release 66, extensions use IndexedDB as the backend for local storage instead of a JSON file. This results in a significant performance improvement for many extensions, while simultaneously reducing the amount of memory that Firefox uses.

This change is completely transparent to extension developers – you do not need to do anything to take advantage of this improvement.  When users upgrade to Firefox 66, the local storage JSON file is silently migrated to IndexedDB. All extensions using the storage.local() API immediately realize the benefits, especially if they store small changes to large structures, as is true for ad-blockers, the most common and popular type of extension used in Firefox.

The video below, using Adblock Plus as an example, shows the significant performance improvements that extension users could see.

Other Improvements

The remaining bug fixes and feature enhancements won’t be as noticeable as the change to local storage, but they nevertheless raise the overall quality of the WebExtensions API and make the development experience better.  Some of the highlights include:

Thank you to everyone who contributed to the Firefox 66 release, but a special thank you to our volunteer community contributors, including: tossj, Varun Dey, and Edward Wu.

February’s featured extensions

Firefox Logo on blue background

Pick of the Month: ContextSearch

by Mike B
Select text to quickly search the phrase from an array of engines.

“Very intuitive and customizable. Well done!”

Featured: Word Count

by Trishul
Simply highlight text, right click, and select Word Count to easily do just that.

“Beautifully simple and incredibly useful for those of us who write for a living.”

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!

Friend of Add-ons: Shivam Singhal

Please meet our newest Friend of Add-ons, Shivam Singhal! Shivam became involved with the add-ons community in April 2017. Currently, he is an extension developer, Mozilla Rep, and code contributor to addons.mozilla.org (AMO). He also helps mentor good-first-bugs on AMO.

“My skill set grew while contributing to Mozilla,” Shivam says of his experiences over the last two years. “Being the part of a big community, I have learned how to work remotely with a cross-cultural team and how to mentor newbies. I have met some super awesome people like [AMO engineers] William Durand and Rebecca Mullin. The AMO team is super helpful to newcomers and works actively to help them.”

This year, he’s looking forward to submitting patches to the WebExtensions API and Add-ons Manager in Firefox, and mentoring more new code contributors. Shivam has advice for anyone who is interested in contributing to Mozilla’s add-ons projects. “If you are shy or not feeling comfortable commenting on an issue, you can fill out the add-ons contributor survey and someone will help you get started. That’s what I did. You can also check https://whatcanidoformozilla.org for other ways to get involved.”

In his free time, Shivam enjoys watching stand-up comedy and sci-fi web series, exploring food at cafes, and going through pull requests on the AMO frontend repository.

Thanks for all of your contributions, Shivam! Your enthusiasm for the add-ons ecosystem is contagious, and it’s been a pleasure watching you grow.

To learn more about how to get involved with the add-ons community, check out our Contribute wiki.

January’s featured extensions

Firefox Logo on blue background

Pick of the Month: Auto Tab Discard

by Richard Neomy
Save memory usage by automatically hibernating inactive tabs.

“Wow! This add-on works like a charm. My browsing experience has improved greatly.”

Featured: Malwarebytes Browser Extension

by Malwarebytes Inc.
Enhance the safety and speed of your browsing experience by blocking malicious websites like fake tech support scams and hidden cryptocurrency miners.

“Malwarebytes is the best I have used to stop ‘Microsoft alerts’ and ‘Windows warnings’.”

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!

Extensions in Firefox 65

In lieu of the normal, detailed review of WebExtensions API coming out in Firefox 65, I’d like to simply say thank you to everyone for choosing Firefox. Now, more than ever, the web needs people who consciously decide to support an open, private, and safe online ecosystem.

Two weeks ago, nearly every Mozilla employee gathered in Orlando, Florida for the semi-annual all-hands meeting.  It was an opportunity to connect with remote teammates, reflect on the past year and begin sharing ideas for the upcoming year. One of the highlights was the plenary talk by Mitchell Baker, Chairwoman of the Mozilla Foundation. If you have not seen it, it is well worth 15 minutes of your time.

Mitchell talks about Firefox continually adapting to a changing internet, shifting its engagement model over time to remain relevant while staying true to its original mission. Near the end, she notes that it is time, once again, for Mozilla and Firefox to evolve, to shift from being merely a gateway to the internet to being an advocate for users on the internet.

Extensions will need to be part of this movement. We started when Firefox migrated to the WebExtensions API (only a short year ago), ensuring that extensions operated with explicit user permissions within a well-defined sandbox. In 2018, we made a concerted effort to not just add new API, but to also highlight when an extension was using those API to control parts of the browser. In 2019, expect to see us sharpen our focus on user privacy, user security, and user agency.

Thank you again for choosing Firefox, you have our deepest gratitude and appreciation. As a famous Mozillian once said, keep on rockin’ the free web.

-Mike Conca

Highlights of new features and fixes in Firefox 65:

A huge thank you to the community contributors in this release, including: Ben Armstrong, Oriol Brufau, Tim Nguyen, Ryan Hendrickson, Sean Burke, Yuki “Piro” Hiroshi, Diego Pino, Jan Henning, Arshad Kazmi, Nicklas Boman.

 

December’s Featured Extensions

Firefox Logo on blue background

Pick of the Month: Full Screen for Firefox

by Stefan vd
Go full screen with a single click.

“This is what I was searching for and now I have it!”

Featured: Context Search

by Olivier de Broqueville
Search highlighted text on any web page using your preferred search engine. Just right-click (or Shift-click) on the text to launch the context menu. You can also perform searches using keywords in the URL address bar.

“Great add-on and very helpful! Thank you for the good work.”

Featured: Behind the Overlay Revival

by Iván Ruvalcaba
Simply click a button to close annoying pop-up overlays.

“I don’t think I’ve ever reviewed an extension, but man, what a find. I get very sick of closing overlays and finding the little ‘x’ in some corner of it or some light colored ‘close’ link. They get sneakier and sneakier about making you actually read the overlay to find a way to close it. Now when I see one, I know right away I can click on the X in the toolbar and it will disappear. So satisfying.”

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!

Extensions in Firefox 64

Following the explosion of extension features in Firefox 63, Firefox 64 moved into Beta with a quieter set of capabilities spread across many different areas.

Extension Management

The most visible change to extensions comes on the user-facing side of Firefox where the add-ons management page (about:addons) received an upgrade.

Changes on this page include:

  • Each extension is shown as a card that can be clicked.
  • Each card shows the description for the extension along with buttons for Options, Disable and Remove.
  • The search area at the top is cleaned up.
  • The page links to the Firefox Preferences page (about:preferences) and that page links back to about:addons, making navigation between the two very easy.  These links appear in the bottom left corner of each page.

These changes are part of an ongoing redesign of about:addons that will make managing extensions and themes within Firefox simpler and more intuitive. You can expect to see additional changes in 2019.

As part of our continuing effort to make sure users are aware of when an extension is controlling some aspect of Firefox, the Notification Permissions window now shows when an extension is controlling the browser’s ability to accept or reject web notification requests.

When an extension is installed, the notification popup is now persistently shown off of the main (hamburger) menu.  This ensures that the notification is always acknowledged by the user and can’t be accidentally dismissed by switching tabs.

Finally, extensions can now be removed by right-clicking on an extension’s browser action icon and selecting “Remove Extension” from the resulting context menu.

Even More Context Menu Improvements

Firefox 63 saw a large number of improvements for extension context menus and, as promised, there are even more improvements in Firefox 64.

The biggest change is a new API that can be called from the contextmenu DOM event to set a custom context menu in extension pages.  This API, browser.menus.overrideContext(), allows extensions to hide all default Firefox menu items in favor of providing a custom context menu UI.  This context menu can consist of multiple top-level menu items from the extension, and may optionally include tab or bookmark context menu items from other extensions.

To use the new API, you must declare the menus and the brand new menus.overrideContext permission. Additionally, to include context menus from other extensions in the tab or bookmarks contexts, you must also declare the tabs or bookmarks permissions, respectively.

The API is still being documented on MDN at the time of this writing, but the API takes a contextOptions object as a parameter, which includes the following values:

  • showDefaults: boolean that indicates whether to include default Firefox menu items in the context menu (defaults to false)
  • context: optional parameter that indicates the ContextType to override to allow menu items from other extensions in this context menu. Currently, only bookmark and tab are supported. showDefaults cannot be used with this option.
  • bookmarkId: required when context is bookmark. Requires bookmarks permission.
  • tabId: required when context is tab. Requires tabs permission.

While waiting for the MDN documentation to go live, I would highly encourage you to check out the terrific blog post by Yuki “Piro” Hiroshi that covers usage of the new API in great detail.

Other improvements to extension context menus include:

  • browser.menus.update() now allows extensions to update an icon without having to delete and recreate the menu item.
  • menus.create() and menus.update() now support a viewTypes property.  This is a list of view types that specifies where the menu item will be shown and can include tab, popup (pageAction/browserAction) or sidebar. It defaults to any view, including those without a viewType.
  • The menus.onShown and menus.onClicked events now include the viewType described above as part of their info object so extensions can determine the type of view where the menu was shown or clicked.
  • The menus.onClicked event also added a button property to indicate which mouse button initiated the click (left, middle, right).

Minor Improvements in Many Areas

In addition to the extension management in Firefox and the context menu work, many smaller improvements were made throughout the WebExtension API.

Page Actions

  • A new, optional manifest property for page actions called ‘pinned’ has been added.  It specifies whether or not the page action should appear in the location bar by default when the user installs the extension (default is true).

Tabs

Content Scripts

  • Content scripts can now read from a <canvas> that they have modified.

Themes

Private Browsing

Keyboard Shortcuts

Dev Tools

  • Extensions can now create devtools panel sidebars and use the new setPage() API to embed an extension page inside the devtools inspector sidebar.

Misc / Bug Fixes

Thank You

A total of 73 features and improvements landed as part of Firefox 64. Volunteer contributors were a huge part of this release and a tremendous thank you goes out to our community, including: Oriol Brufau, Tomislav Jovanovic, Shivam Singhal, Tim Nguyen, Arshad Kazmi, Divyansh Sharma, Tom Schuster, Tim B, Tushar Arora, Prathiksha Guruprasad. 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.

Friend of Add-ons: Jyotsna Gupta

Our newest Friend of Add-ons is Jyotsna Gupta! Jyotsna first became involved with Mozilla in 2015 when she became a Firefox Student Ambassador and started a Firefox club at her college. She has contributed to several projects at Mozilla, including localization, SuMo, and WebMaker, and began exploring Firefox OS app development after attending a WoMoz community meetup in her area.

In 2017, a friend introduced Jyotsna to browser extension development. Always curious and interested in trying new things, she created PrivateX, an extension that protects user privacy by opening websites that ask for critical user information in a private browsing window and removing Google Analytics tracking tokens. With her newfound experience developing extensions, Jyotsna began mentoring new extension developers in her local community, and joined the Featured Extensions Advisory Board.

After wrapping up two consecutive terms on the board, she served on the judging panel for the Firefox Quantum Extensions Challenge, evaluating more than 100 extensions to help select finalists for each award category. Currently, she is an add-on content reviewer on addons.mozilla.org and a Mozilla Rep. She frequently speaks about cross-browser extension development at regional events.

When asked about her experience contributing to Mozilla, Jyotsna says, “It has been a wonderful learning experience for me as a Mozillian. When I was a student, Mozilla was something that I could add to my profile to enhance my resume. There was a time when I refrained myself from speaking up, but today, I’m always ready to speak in front of a huge number of people. Getting involved with Mozilla helped me in meeting like-minded people around the globe, working with diverse teams, learned different cultures, gained global exposure and a ton of other things. 
And I’m fortunate enough to have wonderful mentors around me, boosting me up to see a brighter side in every situation.”

Jyotsna also has advice for newcomers to open source projects. “To the contributors who are facing imposter syndrome, trust me, you aren’t alone. We were all there once. We are here for you. May the force be with you.”

Thank you so much for your many wonderful contributions, Jyotsna!

To learn more about how to get involved in the add-ons community, please take a look at our wiki to see current contribution opportunities.

November’s Featured Extensions

Firefox Logo on blue background

Pick of the Month: Undo Close Tab

by Manuel Reimer
Access recently closed tabs by right-clicking the icon in your toolbar.

“The extension does exactly what is stated: it restores tabs, and not just the last one closed, but up to 25 recent tabs.”

Featured: Lilo

by Lilo
Help fund social and environmental causes by simply using Lilo search.

“Very positive. This engine allows us to help in a concrete way without any effort or money.”

Featured: SoundFixer

by unrelenting.technology
Adjust the gain and pan levels for almost any audio you encounter on the web.

“Wonderful – so many videos I like are so low I can’t hear them at all. This really, really works! Yay!”

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!