Q&A with Developer Stefan Van Damme

This is a guest post from Mozilla technical writer Judy DeMocker. She recently chatted with Stefan Van Damme about his extension Turn Off the Lights, and his experience porting it from its original Google Chrome version. Take it away, Judy…

Stefan Van Damme had a small problem—but it happened all the time. He liked to watch videos online, but video players on sites like YouTube don’t eliminate the other content on the screen—and that makes it hard to focus on the show. So Stefan, who lives in Antwerp, Belgium, built his first browser add-on to dim the lights on distracting content. And since so many people love movies, he built it for seven different browsers for users around the world.

Stefan’s extension, Turn Off the Lights, has been downloaded more than 3 million times. With that many users, it’s critical for him to be able to update it quickly and easily, without spending days or weeks on maintenance. So he’s excited about the new WebExtensions API, which makes it easy for him to port his extensions to Google Chrome, Mozilla Firefox, and Microsoft Edge using a universal code base.

Turn Off the Lights in action.

 

Porting to Firefox

What browser did you first create your extension for?
Google Chrome

Why was it important for you to write your extension for Firefox?
It is important to me that everyone can have the Turn Off the Lights experience in their favorite web browser. And Firefox is still one of the most popular web browsers out there today.

Did you migrate your add-on from the legacy Firefox platform, XUL? How difficult was that?
In the first version of Turn Off the Lights, I used the XUL technology. If I had to migrate to the new version, it would be difficult. However, I already had the Chrome extension, so migrating that code to Firefox was very easy. There was only one file I had to change, the manifest file. All the other files, I had to do nothing.

How difficult was it to learn and write to the WebExtensions API? (1 = easiest; 10 = hardest)
Since Firefox now supports the WebExtensions API, it was very easy to take code that runs on Chrome or Edge and put it on Firefox. I can use the same code base and just change the settings to work with each browser. If I continue with Chrome extensions, then it’s just a “1,” very easy.

Did you find all the functionality of your XUL add-on in the WebExtensions API? Or did you have to learn a new way to write the same features?
At the time I wrote the XUL add-on from my Chrome extension code, it was difficult, but I got all the functions inside. Today WebExtensions have more APIs, even those that extend outside the website content. For example, the extension can now dim the toolbar of Firefox thanks to the browser.theme API. And that is very unique and also cool.

What problems, if any, did you experience developing for Firefox?
Mostly I had trouble with the performance of the browser. If I click on my gray lamp button, it goes very slowly to that capacity level. On other browsers, it’s one click and done. I understand Mozilla is working hard to improve this.

What do you think of the new Quantum version of Firefox?
I see some good improvement in the Firefox Quantum web browser. That is what I like, and it can also be good for my users.

Tools & Resources

How has the technology changed since 2009?
At first, I used Notepad ++ on Windows to write my code. Now I use a Mac and Microsoft Visual Studio. Visual Studio is a better experience for both platforms. I can use it on Mac and Windows (using Boot Camp). I can switch to a Windows PC and use the same developer kit to write code and test it also.

How long does it take to publish a Firefox extension?
It’s very quick to publish an update to an add-on. Normally I just zip it and click on “Publish” and it’s done. Yesterday, I updated my Date Today add-on, and it took 10 to 15 minutes.

How is adoption of your new extension?
It’s good. Turn Off the Lights has been downloaded more than 3,000,000 times. I’’ve set up my website to detect a visitor’s browser and send them to the correct hyperlink, so they can download the version that works for them.

How long does it take up update your different extensions?
So in browsers like Chrome, Firefox, and Opera, it takes about two hours to update my add-on. I do one or two major updates for Turn Off the Lights a year, for instance moving from version 3.3 to 3.4. Those take more time. But it’s worth it. I get user feedback from my users that those updates provides better harmony in the current web experience.

What resources helped you learn about the WebExtensions API?
The MDN website was helpful. I was working with the Chrome documentation, but their site only shows information for the Chrome platform. That’s a minus for the Google team. They didn’t have a browser compatibility table that could show me if a feature is available on another web browser.

What help, if any, did you get from Mozilla?
I didn’t talk to anybody at Mozilla. But I do report bugs and performance issues. It’s important to get a great experience on all web browsers.

What advice would you give other developers who are thinking of creating extensions for Firefox?
Just do it. And, listen to your users’ feedback. They are the experts on how you can improve your Firefox extension.

Keeping Tabs on the Tab API

tabsTabs are central to the modern browsing experience, so much so that it is hard to imagine that we once browsed the Internet without them, one single window at a time. Now, it’s common to have several tabs open at once — perhaps one playing music, several with online articles you want to read later (pro tip: check out Pocket for this use case), and of course, a few tabs with whatever you are supposed to be working on at the moment.

The Past

From the start, Firefox extensions that dealt with tabs were a natural fit and have proven to be quite popular. The good news is that there are already hundreds of extensions written with the WebExtensions API to help you configure, organize and otherwise manage your browser tabs. You can arrange your tabs as tiles or in a tree, put them on the side of the browser, or control where new tabs open, just to name a few.

Unfortunately, not every feature that was available in the past can be offered using the WebExtensions API. Several of the most popular tab extensions under the legacy add-on system used the unrestricted nature of that environment to offer powerful and unique features. Along with that power, however, came security risks. The WebExtensions API seeks to temper those risks by providing limited access to browser internals.

The Future

We’re working to support additional tab features, but how we achieve this goal will be shaped by our dedication to Web standards, the speed and stability of Firefox, our product vision, and especially our commitment to security and privacy and the principles of the Manifesto. It’s clear that some previously available tab features will not be available under the WebExtensions API; they just can’t be accommodated without potentially compromising user security or privacy.

However, we believe many other features can be added. Providing as much tab-related functionality as we can within these constraints is a high priority. Starting with tab hiding, you can expect to see additional functions added to the WebExtensions API over the next several releases that will allow developers to create rich, compelling extensions to style, manage and organize browser tabs.

All of this, of course, will be part of our push for open Web standards. However, while that process proceeds at its own pace, don’t expect to see us stand still. Using feedback from developers, we will continue to innovate within the WebExtensions API, providing new ways to surprise and delight users. As always, thank you for using Firefox and helping ensure that individuals have the ability to shape the Internet and their own experiences on it.

November’s Featured Extensions

Firefox Logo on blue background

Pick of the Month: User-Agent Switcher (revived)

by Linder
Quickly and easily change your user-agent. There are 26 options to choose from, including iOS, Android, and most common desktop browsers.

“Very simple. Very good.”

Featured: YouTube Video and Audio Downloader

by RayLo
Extremely simple yet powerful video and audio downloader.

“This is the last YouTube downloader you will try, there is no need to continue searching.”

Featured: Mute Tab

by Kelvin_b
Mute all open tabs with a single click.

“I love that all my tabs are automatically muted, as I often click several videos at once.”

Featured: Toolbox for Google Play Store

by Android Police
Adds helpful app browsing features like APKMirror, Android Police, and Appbrain to all Google Play store pages.

“Love it.”

Nominate your favorite add-ons

Featured add-ons are selected by a community board made up of add-on developers, users, and fans. Board members change every six months. Here’s further information on AMO’s featured content policies.

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

What YouTube Downloader is Right for You?

Are you interested in downloading video content? Low resolution or high? Full HD? Or maybe you only want the audio track? How about screengrabs? Perhaps you want all of that and more. Video downloaders are one of the most popular types of extensions for Firefox because there are so many unique ways to handle rich media.

In this post we’ll focus solely on YouTube downloaders, because there’s simply a lot to explore just within the world of video downloaders tailored for YouTube. However, if your video downloading needs aren’t specific to YouTube, I should point out there’s a vast array of video downloaders made for Firefox. The open-source developer community really cranks out some beautiful stuff—everything from do-it-all video downloaders like Video DownloadHelper, Bulk Media Downloader, Video Downloader Professional, Flash and Video Downloader, 1-Click Downloader, and SaveFrom.net to super niche video downloaders like Instagram Video Download or Private Video Downloader.

Downloading video and audio files is just a couple clicks away with Easy YouTube Downloader Express.

Easy YouTube Downloader Express

If you’re looking for a really solid YouTube downloader that covers the basics and covers them well, check out Easy YouTube Downloader Express. For one, it’s optimized to play well with the new YouTube interface (the new-look YouTube is known to cause problems for some extensions). Easy YouTube Downloader Express also offers 1080p full-HD downloads and handles MP3’s at 256Kbps. Just hit the “Download As:” button that appears conveniently on each video page and select your download preference.

YouTube Video and Audio Downloader

I like the elegance of this YouTube downloader’s interface. Hit a button on any video page and a menu pops up to offer “Quick Download” action or access to a “Download Panel” that displays various resolution and media options. This is a very simple and to-the-point YouTube downloader.

YouTube Video and Audio Downloader displays intuitive controls.

YouTube Download & Adblocker Smarttube

Have you ever eaten Indian pizza? Where they take traditional pizza dough but instead of topping it with stuff like cheese and pepperoni they cook it with curry, masala sauces and other delicious Indian flavors? You eat it and you’re like “why didn’t someone think of this years ago?”

YouTube Download & Adblocker is like that. It’s a great video downloader (that can also handle audio file conversions with an array of formats) PLUS it’s an effective YouTube ad blocker. Genius.

A couple more nice features: you can choose to block annotations with the flick of a checkbox. And with the ad blocker, you have the option to whitelist YouTube channels so ads only appear when you view your favorite content creators.

YouTube Video Download & Convert

If you want gobs of download options, YouTube Video Download & Convert has options—high and low res, static images, audio, even subtitles. It’s also a powerful media converter. All available actions appear as buttons just below the video player, which makes everything super convenient if you don’t mind YouTube pages loaded with buttons.

Easy YouTube MP3

Are you solely interested in converting a YouTube video into an audio MP3 file? That’s all Easy YouTube MP3 does. Quick and painless.

The extensions mentioned above are my favorites (I should probably add Download YouTube Video as well; it’s a really strong video downloader, but some might object to the edgy ads displayed on its custom download page). Did I miss your favorite YouTube downloader? If so please drop suggestions in the comments.

Helping You Find Compatible Extensions

We are getting lots of support requests for finding replacement extensions in the comments section. We can provide better support for this in the forums, so we are shutting off comments here. This thread is where you can see what the community has already suggested, as well as post your own support request.

If you’re a Firefox 57 user (aka Firefox Quantum, released November 14) with legacy extensions installed, there is a feature to help you find compatible replacements.

In the Add-ons Manager (Tools menu > Add-ons), click on “Show legacy extensions” to see a list of your incompatible extensions.

Click on “Find a Replacement”, and you will be taken to the AMO page of a compatible alternative.

If an exact replacement hasn’t been identified, you will land on the Featured Extensions collection, which lists only compatible extensions.

For legacy tab extensions that couldn’t migrate at this time because of unavailable APIs (some of which are being developed and prioritized for release in the coming months), the “Find a Replacement” button directs you to a curated collection of compatible tab extensions.

Not Too Late to Migrate

For developers of legacy extensions who may be in the process of migrating, or have plans to do so in the future, please note that once your extension is compatible, your users will no longer be prompted to find a replacement, and your current users will automatically get the updated version.

So you may still want to update to the WebExtensions API, even if you didn’t get it done in time for Firefox 57. For more information on how to migrate legacy extensions, please see this guide.

If You Need Them a While Longer

We understand that some of you won’t be able to find replacements for your legacy extensions. If you want to use them a while longer while you wait to see if they will be updated by their developers, your best option is Firefox ESR 52. This release is updated for security only, and should work with legacy extensions until the release of Firefox 59, which will also update the ESR release to Quantum.

Test the new look of addons.mozilla.org!

AMO (addons.mozilla.org) is getting a fresh new look this November, along with the upcoming Firefox Quantum. Here’s a preview:

Listing page on new front-end

The current look on the development site, not quite final.

And this is not just a new coat of paint. Curated content — particularly in the homepage — is undergoing an overhaul to recommend the best add-ons to users. Additionally, the technology stack powering AMO has undergone important changes, making it faster to load and easier to work with in the future.

Fully responsive design

AMO responsive design

We released the new design for the mobile version of AMO months ago. Now we’re expanding it for larger resolutions. The site is fully responsive, adapting smoothly to different screen sizes and orientations.

Behind the scenes: React and front-end separation

The new AMO is built on the popular Redux + React combo. (Some recent news pointed at concerns with the licensing of the React code, which have been addressed now.)

Rewriting the front-end code was a great opportunity to improve on other areas:

  • The front-end and back-end are now separated and communicate via an API that other clients can hook into. It’s documented here.
  • The new front-end has very high unit test coverage, and the aim is to reach 100%. This makes it much easier to detect during development if a code change broke a feature.
  • Server-side rendering will significantly improve page load times.

Try out the new look!

You can enable the new look for AMO now. Just look for the View Mobile Site link in the footer:

View mobile link in footerIf you want to go back to the old site, look in the footer again for a link labeled View classic desktop site.

View classic site link in footerSome pages won’t be ported to the new design by November. Notably, user profile pages and collection management. They are still available, but using the old look. Also, some features like contributions and the permissions view in listing pages will be added in later iterations.

If you run into any issues with the new design, or think something’s missing, please file an issue (bonus points if you test on our development site first!). Some may be things we already know about and we plan to add soon. Even in those cases your feedback will help us prioritize our follow-up work.

If you’re not sure if something is an issue or not, or just want to give general feedback about the new design, please post in this forum thread.

Credits

Lots of people have worked on the new front-end and the supporting APIs, so I won’t try to list them all. I’ll just highlight tofumatt, pwalm, kumar, and muffinresearch, who did and continue to do the bulk of the work for the new site. Scott DeVaney leads the content discovery effort, which will be visible mostly on the homepage (for now!). And, of course, we couldn’t do all of this without the help of the QA team lead by Krupa Raj, and our many community contributors.

Join the Featured Add-ons Advisory Board

Do you love add-ons? Have a keen appreciation for great functionality? Interested in making a huge impact on AMO? If so, consider applying to join our Featured Add-ons Community Board!

The board is comprised of a small group of add-ons enthusiasts from the community. During a six-month term, board members help nominate and select new featured extensions for AMO each month. Your participation will make a big difference to millions of users who look to AMO’s featured content to help them find great content!

As the current board wraps up their tour of duty, we are looking to assemble a new board for the months January – June.

Anyone from the add-ons community is welcome to apply: power users, developers, and advocates. Priority will be given to applicants who have not served on the board before, followed by those from previous boards, and finally from the outgoing board. This page provides more information on the duties of a board member.

To be considered, please send us an email at amo-featured [at] mozilla [dot] org with your name and a few sentences about how you’re involved with AMO and why you are interested in joining the board. The deadline is Monday, October 30, 2017 at 23:59 PDT. The new board will be announced shortly thereafter.

Add-ons Update – 2017/10

Here’s your monthly add-ons update.

AMO

We changed the way contributions are handled on AMO. This should be simpler to maintain, and offer more payment options for developers.

The Review Queues

We recently moved to a new review model, where developers don’t have to wait for long before their add-ons are reviewed. Legacy add-ons still go through the old model, but there are only a small number of updates awaiting review now. So I’m discontinuing this section of the monthly update for now.

Compatibility Update

Firefox 57 is now on the Beta channel and will be released on November 14th. It will only accept WebExtensions add-ons. In order to ease the transition to 57, here are some changes we’re implementing on AMO.

Recognition

We would like to thank the following people for their recent contributions:

  • ian-henderso
  • Jp-Rivera
  • Apoorva Pandey
  • ilmanzo
  • Trishul Goel
  • Tom Schuster
  • Apoorva Singh
  • Tiago Morais Morgado
  • zombie
  • wouter
  • kwan
  • Kevin Jones
  • Aastha
  • Masatoshi Kimura
  • asamuzaK
  • Christophe Villeneuve

You can read more about their work in our recognition page.

Friend of Add-ons: Sylvain Giroux

Please meet our newest Friend of Add-ons, Sylvain Giroux! Sylvain has been creating extensions for Firefox since 2007 and began contributing to addons.mozilla.org (AMO) as an add-on reviewer in 2015.  While he had originally planned to help with the add-on review queues for a few months before moving on to other activities, Sylvain quickly connected with Mozilla’s mission and found friends within the community, and has been an active contributor ever since.

Currently, Sylvain is an add-on reviewer and peer mentor for new reviewers. He is also helping the AMO team create an improved application process for prospective add-on reviewers. Additionally, Sylvain is finishing a six-month term as a member of the featured add-on advisory board, where he has helped nominate and select new extensions to feature on AMO each month.

Of his experience as a contributor, Sylvain says, “Being part of such a vast community helped me understand the underlying AMO process and its continuous evolution over time. This is especially important with the massive changes that Firefox 57 is bringing to this community. The knowledge I’ve gathered reviewing code after all those years has also strengthened my understanding of what “safe code” should look like. This is especially important when creating web-based software, APIs or features that may affect the security and privacy of end-users.”

Sylvain also has a suggestion for anyone interested in getting more involved in Mozilla. “I strongly suggest people visit https://whatcanidoformozilla.org and see if there is something in there that could bring you closer to this awesome free-software community.”

In his spare time, Sylvain is an active home-brewer and has made nearly twenty batches of beer over the last three years from home-grown hops. He also frequently creates personal development projects, like fixing bugs for a nodeJS card game program, to meet new challenges and keep his coding skills up to date.

On behalf of the AMO community, thank you for your many wonderful contributions, Sylvain!
If you are interested in contributing to the add-ons community, please see our wiki for a list of ways to get involved. If you’re currently a contributor, please be sure to add your contributions to our recognition wiki!

New Contributions launched on AMO

The contributions feature was launched over 8 years ago to give developers an easy way to receive compensation for their add-ons on AMO (addons.mozilla.org). This system relied on an integration with the PayPal API, which often caused problems. It didn’t work properly for users with restricted cookie settings, for instance. It also meant PayPal was the only payment provider.

We just launched a new contributions system that is simpler, more reliable, and flexible to use.

New Contributions

With the new system, developers specify a contributions URL in the Developer Hub. The Contribute button on their listing page will point to that URL and open it in a new tab. Initially, we will be supporting Patreon, PayPal, and Micropayment as payment providers. If you’re a developer and would like to propose other services for inclusion, please add your feedback to this forum thread.