{"id":8324,"date":"2017-11-08T17:47:16","date_gmt":"2017-11-09T01:47:16","guid":{"rendered":"http:\/\/blog.mozilla.org\/addons\/?p=8324"},"modified":"2017-11-20T16:04:33","modified_gmt":"2017-11-21T00:04:33","slug":"qa-developer-stefan-van-damme","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/addons\/2017\/11\/08\/qa-developer-stefan-van-damme\/","title":{"rendered":"Q&amp;A with Developer Stefan Van Damme"},"content":{"rendered":"<p><i>This is a guest post from Mozilla technical writer Judy DeMocker. She recently chatted with Stefan Van Damme about his extension <a href=\"https:\/\/addons.mozilla.org\/firefox\/addon\/turn-off-the-lights\/\" target=\"_blank\" rel=\"noopener\">Turn Off the Lights<\/a>, and his experience porting it from its original Google Chrome version. Take it away, Judy\u2026<\/i><\/p>\n<p>Stefan Van Damme had a small problem\u2014but it happened <i>all<\/i> the time. He liked to watch videos online, but video players on sites like YouTube don&#8217;t eliminate the other content on the screen\u2014and 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.<\/p>\n<p>Stefan&#8217;s extension, Turn Off the Lights, has been downloaded more than 3 million times. With that many users, it&#8217;s critical for him to be able to update it quickly and easily, without spending days or weeks on maintenance. So he&#8217;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.<\/p>\n<div id=\"attachment_8325\" style=\"width: 610px\" class=\"wp-caption alignleft\"><img aria-describedby=\"caption-attachment-8325\" decoding=\"async\" loading=\"lazy\" class=\"size-large wp-image-8325\" src=\"https:\/\/blog.mozilla.org\/addons\/files\/2017\/11\/blog_stef2-600x373.png\" alt=\"\" width=\"600\" height=\"373\" srcset=\"https:\/\/blog.mozilla.org\/addons\/files\/2017\/11\/blog_stef2-600x373.png 600w, https:\/\/blog.mozilla.org\/addons\/files\/2017\/11\/blog_stef2-252x157.png 252w, https:\/\/blog.mozilla.org\/addons\/files\/2017\/11\/blog_stef2.png 747w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><p id=\"caption-attachment-8325\" class=\"wp-caption-text\">Turn Off the Lights in action.<\/p><\/div>\n<h2><\/h2>\n<h2><\/h2>\n<h2><\/h2>\n<p>&nbsp;<\/p>\n<h2><\/h2>\n<h2><\/h2>\n<h2><\/h2>\n<h2>Porting to Firefox<\/h2>\n<p><b>What browser did you first create your extension for?<\/b><br \/>\nGoogle Chrome<\/p>\n<p><b>Why was it important for you to write your extension for Firefox?<\/b><br \/>\nIt 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.<\/p>\n<p><b>Did you migrate your add-on from the legacy Firefox platform, XUL? How difficult was that?<\/b><br \/>\nIn 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.<\/p>\n<p><b>How difficult was it to learn and write to the WebExtensions API? (1 = easiest; 10 = hardest)<\/b><br \/>\nSince 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&#8217;s just a &#8220;1,&#8221; very easy.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignleft size-medium wp-image-8326\" src=\"https:\/\/blog.mozilla.org\/addons\/files\/2017\/11\/blog_stef-252x324.png\" alt=\"\" width=\"252\" height=\"324\" srcset=\"https:\/\/blog.mozilla.org\/addons\/files\/2017\/11\/blog_stef-252x324.png 252w, https:\/\/blog.mozilla.org\/addons\/files\/2017\/11\/blog_stef.png 459w\" sizes=\"(max-width: 252px) 100vw, 252px\" \/><b>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?<\/b><br \/>\nAt 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 <a href=\"https:\/\/developer.mozilla.org\/Add-ons\/WebExtensions\/API\/theme\" target=\"_blank\" rel=\"noopener\">browser.theme<\/a> API. And that is very unique and also cool.<\/p>\n<p><b>What problems, if any, did you experience developing for Firefox?<\/b><br \/>\nMostly 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&#8217;s one click and done. I understand Mozilla is working hard to improve this.<\/p>\n<p><b>What do you think of the new Quantum version of Firefox?<\/b><br \/>\nI see some good improvement in the Firefox Quantum web browser. That is what I like, and it can also be good for my users.<\/p>\n<h2>Tools &amp; Resources<\/h2>\n<p><b>How has the technology changed since 2009?<\/b><br \/>\nAt 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.<\/p>\n<p><b>How long does it take to publish a Firefox extension?<\/b><br \/>\nIt&#8217;s very quick to publish an update to an add-on. Normally I just zip it and click on &#8220;Publish&#8221; and it\u2019s done. Yesterday, I updated my Date Today add-on, and it took 10 to 15 minutes.<\/p>\n<p><b>How is adoption of your new extension?<\/b><br \/>\nIt&#8217;s good. Turn Off the Lights has been downloaded more than 3,000,000 times. I\u2019&#8217;ve set up my website to detect a visitor&#8217;s browser and send them to the correct hyperlink, so they can download the version that works for them.<\/p>\n<p><b>How long does it take up update your different extensions?<\/b><br \/>\nSo 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&#8217;s worth it. I get user feedback from my users that those updates provides better harmony in the current web experience.<\/p>\n<p><b>What resources helped you learn about the WebExtensions API?<\/b>\u2028The MDN website was helpful. I was working with the Chrome documentation, but their site only shows information for the Chrome platform. That&#8217;s a minus for the Google team. They didn&#8217;t have a browser compatibility table that could show me if a feature is available on another web browser.<\/p>\n<p><b>What help, if any, did you get from Mozilla?<\/b><br \/>\nI didn&#8217;t talk to anybody at Mozilla. But I do report bugs and performance issues. It\u2019s important to get a great experience on all web browsers.<\/p>\n<p><b>What advice would you give other developers who are thinking of creating extensions for Firefox?<\/b><br \/>\nJust do it. And, listen to your users&#8217; feedback. They are the experts on how you can improve your Firefox extension.<\/p>\n<hr \/>\n<p style=\"text-align: left;\"><strong>Related content<\/strong><\/p>\n<p><a href=\"https:\/\/medium.com\/mozilla-tech\/grammarly-firefox-webextensions-a2b41afc2cfb\" target=\"_blank\" rel=\"noopener\">Q&amp;A with Grammarly&#8217;s Sergey Yavnyi<\/a><\/p>\n<p><a href=\"https:\/\/www.howtogeek.com\/333393\/why-i-switched-from-chrome-to-firefox-quantum\/\" target=\"_blank\" rel=\"noopener\">Why I Switched from Chrome to Firefox Quantum<\/a><\/p>\n<p><a href=\"https:\/\/developer.mozilla.org\/Add-ons\/WebExtensions\/Porting_a_Google_Chrome_extension\" target=\"_blank\" rel=\"noopener\">Porting a Google Chrome Extension<\/a><\/p>\n<p><a href=\"https:\/\/hacks.mozilla.org\/2017\/06\/cross-browser-extensions-available-now-in-firefox\/\" target=\"_blank\" rel=\"noopener\">Cross-browser extensions, available now in Firefox<\/a><\/p>\n<p><a href=\"https:\/\/hacks.mozilla.org\/2017\/10\/remaking-lightbeam-as-a-browser-extension\/\" target=\"_blank\" rel=\"noopener\">Remaking Lightbeam as a Browser Extension<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 &hellip; <a class=\"go\" href=\"https:\/\/blog.mozilla.org\/addons\/2017\/11\/08\/qa-developer-stefan-van-damme\/\">Read more<\/a><\/p>\n","protected":false},"author":648,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[388,44,278886],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Q&amp;A with Developer Stefan Van Damme - Mozilla Add-ons Community Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blog.mozilla.org\/addons\/2017\/11\/08\/qa-developer-stefan-van-damme\/\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Scott DeVaney\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2017\/11\/08\/qa-developer-stefan-van-damme\/\",\"url\":\"https:\/\/blog.mozilla.org\/addons\/2017\/11\/08\/qa-developer-stefan-van-damme\/\",\"name\":\"Q&amp;A with Developer Stefan Van Damme - Mozilla Add-ons Community Blog\",\"isPartOf\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2017\/11\/08\/qa-developer-stefan-van-damme\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2017\/11\/08\/qa-developer-stefan-van-damme\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.mozilla.org\/addons\/files\/2017\/11\/blog_stef2-600x373.png\",\"datePublished\":\"2017-11-09T01:47:16+00:00\",\"dateModified\":\"2017-11-21T00:04:33+00:00\",\"author\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/4c2e23c8fee2460a91031d2825ff7d35\"},\"breadcrumb\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2017\/11\/08\/qa-developer-stefan-van-damme\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blog.mozilla.org\/addons\/2017\/11\/08\/qa-developer-stefan-van-damme\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2017\/11\/08\/qa-developer-stefan-van-damme\/#primaryimage\",\"url\":\"https:\/\/blog.mozilla.org\/addons\/files\/2017\/11\/blog_stef2.png\",\"contentUrl\":\"https:\/\/blog.mozilla.org\/addons\/files\/2017\/11\/blog_stef2.png\",\"width\":747,\"height\":464,\"caption\":\"Turn Off the Lights in action.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2017\/11\/08\/qa-developer-stefan-van-damme\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blog.mozilla.org\/addons\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Q&amp;A with Developer Stefan Van Damme\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#website\",\"url\":\"https:\/\/blog.mozilla.org\/addons\/\",\"name\":\"Mozilla Add-ons Community Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blog.mozilla.org\/addons\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/4c2e23c8fee2460a91031d2825ff7d35\",\"name\":\"Scott DeVaney\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/dc38a62432c7d12585390805c2bc58e2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/dc38a62432c7d12585390805c2bc58e2?s=96&d=mm&r=g\",\"caption\":\"Scott DeVaney\"},\"url\":\"https:\/\/blog.mozilla.org\/addons\/author\/sdevaneymozilla-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Q&amp;A with Developer Stefan Van Damme - Mozilla Add-ons Community Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blog.mozilla.org\/addons\/2017\/11\/08\/qa-developer-stefan-van-damme\/","twitter_misc":{"Written by":"Scott DeVaney","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blog.mozilla.org\/addons\/2017\/11\/08\/qa-developer-stefan-van-damme\/","url":"https:\/\/blog.mozilla.org\/addons\/2017\/11\/08\/qa-developer-stefan-van-damme\/","name":"Q&amp;A with Developer Stefan Van Damme - Mozilla Add-ons Community Blog","isPartOf":{"@id":"https:\/\/blog.mozilla.org\/addons\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blog.mozilla.org\/addons\/2017\/11\/08\/qa-developer-stefan-van-damme\/#primaryimage"},"image":{"@id":"https:\/\/blog.mozilla.org\/addons\/2017\/11\/08\/qa-developer-stefan-van-damme\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.mozilla.org\/addons\/files\/2017\/11\/blog_stef2-600x373.png","datePublished":"2017-11-09T01:47:16+00:00","dateModified":"2017-11-21T00:04:33+00:00","author":{"@id":"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/4c2e23c8fee2460a91031d2825ff7d35"},"breadcrumb":{"@id":"https:\/\/blog.mozilla.org\/addons\/2017\/11\/08\/qa-developer-stefan-van-damme\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog.mozilla.org\/addons\/2017\/11\/08\/qa-developer-stefan-van-damme\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.mozilla.org\/addons\/2017\/11\/08\/qa-developer-stefan-van-damme\/#primaryimage","url":"https:\/\/blog.mozilla.org\/addons\/files\/2017\/11\/blog_stef2.png","contentUrl":"https:\/\/blog.mozilla.org\/addons\/files\/2017\/11\/blog_stef2.png","width":747,"height":464,"caption":"Turn Off the Lights in action."},{"@type":"BreadcrumbList","@id":"https:\/\/blog.mozilla.org\/addons\/2017\/11\/08\/qa-developer-stefan-van-damme\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blog.mozilla.org\/addons\/"},{"@type":"ListItem","position":2,"name":"Q&amp;A with Developer Stefan Van Damme"}]},{"@type":"WebSite","@id":"https:\/\/blog.mozilla.org\/addons\/#website","url":"https:\/\/blog.mozilla.org\/addons\/","name":"Mozilla Add-ons Community Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blog.mozilla.org\/addons\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/4c2e23c8fee2460a91031d2825ff7d35","name":"Scott DeVaney","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/dc38a62432c7d12585390805c2bc58e2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/dc38a62432c7d12585390805c2bc58e2?s=96&d=mm&r=g","caption":"Scott DeVaney"},"url":"https:\/\/blog.mozilla.org\/addons\/author\/sdevaneymozilla-com\/"}]}},"_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/posts\/8324"}],"collection":[{"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/users\/648"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/comments?post=8324"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/posts\/8324\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/media?parent=8324"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/categories?post=8324"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/tags?post=8324"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}