Firefox Quantum Extensions Challenge
Browser extensions may be the unsung heroes of the web. They give users instant access to the stuff they want, and they organize and customize the browser experience. You should go build one. You’ll be a saint to your users and you could win a prize.
That’s right, it’s the Firefox Quantum Extensions Challenge and we need your submissions. We’re collecting awesome browser extensions from the developer community until April 15, 2018. Our panel of judges will award prizes to the top extensions in three categories: Games & Entertainment, Dynamic Themes, and Tab Manager/Organizer. Winners will be awarded an Apple iPad Pro 10.5” Wifi 256GB and be featured on addons.mozilla.org. Runners up in each category will receive a $250 USD Amazon gift card. Winners will be announced on May 8, 2018 with the release of Firefox 60.
But what makes a great extension? What are we looking for? Here are some great guidelines for building an awesome extension, along with some examples of successful extensions.
Make It Dynamic
Firefox 57 added dynamic themes. What does that mean? They’re just like standard themes that change the look and feel of Firefox, but they can change over time. Create new themes for day, night time, and private browsing.
Quantum Lights is an example of a dynamic theme in action.
Mozilla developer advocate Potch created a wonderful video explaining how dynamic themes work in Firefox:
Make It Fun
Browsing the web is fun, but it can be downright hilarious with an awesome extension. Firefox extensions support JavaScript, which means you can create and integrate full-featured games into the browser. Tab Invaders is a fun example. The remake of the arcade classic Space Invaders lets users blast open tabs into oblivion. It’s a cathartic way to clear your browsing history and start anew.
But you don’t have to build a full-fledged game to have fun. Tabby Cat adds an interactive cartoon cat to every new tab. The cats nap, meow, and even let you pet them. Oh, and the cats can wear hats.
Get creative. Your extension doesn’t have to be strictly business.
Make It Functional
A fantastic extension helps users do everyday tasks faster and more easily. RememBear, from the makers of TunnelBear, remembers usernames and passwords (securely) and can generate new strong passwords. Tree Style Tab lets users order tabs in a collapsible tree structure instead of the traditional tab structure. The Grammarly extension integrates the entire Grammarly suite of writing and editing tools in any browser window. Excellent extensions deliver functionality. Think about ways to make browsing the web faster, easier, and more secure when you’re building your extension.
Make It Firefox
The Firefox UI is built on the Photon Design System. A good extension will fit seamlessly into the UI design language and seem to be a native part of the browser. Guidelines for typography, color, layout, and iconography are available to help you integrate your extension with the Firefox browser. Try to keep edgy or unique design elements apart from the main Firefox UI elements and stick to the Photon system when possible.
Make It Clear
When you upload an extension to addons.mozilla.org (the Firefox add-ons site), pay close attention to its listing information. A clear, easy-to-read description and well-designed screenshots are key. The Notebook Web Clipper extension is a good example of an easy-to-read page with detailed descriptions and clear screenshots. Users know exactly what the extension does and how to use it. It should be easy for users to get started with your extension.
Make It Fresh
Firefox 60, now available in Firefox Beta, includes a host of brand-new APIs that let you do even more with your extensions. We’ve cracked open a cask of theme properties that let you control more parts of the Firefox browser than ever before, including tab color, toolbar icon color, frame color, and button colors.
The tabs API now supports a tabs.captureTab method that can be passed a tabId to capture the visible area of the specified tab. There are also new or improved APIs for proxies, network extensions, keyboard shortcuts, and messages.
For a full breakdown of all the new improvements to extension APIs in Firefox 60, check out Firefox engineer Mike Conca’s excellent post on the Mozilla Add-ons Blog.
