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.
Related content
Q&A with Grammarly’s Sergey Yavnyi
Why I Switched from Chrome to Firefox Quantum
Porting a Google Chrome Extension
harshad
wrote on
john
wrote on
Judy DeMocker
wrote on
john
wrote on
john
wrote on
Caitlin Neiman
wrote on
john
wrote on
Kenneth Eriksson
wrote on
麥克滑司機
wrote on
joe
wrote on
john
wrote on
Justin Strachan
wrote on