{"id":8113,"date":"2017-04-03T04:24:49","date_gmt":"2017-04-03T11:24:49","guid":{"rendered":"http:\/\/blog.mozilla.org\/addons\/?p=8113"},"modified":"2017-04-03T09:25:16","modified_gmt":"2017-04-03T16:25:16","slug":"migrating-colorzilla-webextensions","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/addons\/2017\/04\/03\/migrating-colorzilla-webextensions\/","title":{"rendered":"Migrating ColorZilla to WebExtensions"},"content":{"rendered":"

ColorZilla<\/a> lets you get a color reading from any point in your browser, quickly make adjustments to it, and paste it into another program. It also generates gradients and more, making it an indispensable add-on for designers and artists.<\/em><\/p>\n

For more resources on updating your extension, please check out MDN<\/a>. You can also contact us via these methods<\/a>.<\/em><\/p>\n

Can you provide a short background on your add-on? What does it do, when was it created, and why was it created?<\/b><\/p>\n

ColorZilla<\/a> is one of the earliest Firefox add-ons\u2014in fact, it\u2019s the 271st Firefox add-on ever created (currently there are over 18,000 add-ons available on AMO<\/a>). The first version was released almost 13 years ago in September 2004. ColorZilla was created to help designers and web developers with color-related tasks\u2014it had the first-ever browser-based eyedropper, which allowed picking colors from any location in the browser and included a sophisticated Photoshop-like color-picker that could perform various color manipulations. Over the years the add-on gained recognition with millions of users, won awards and was updated with many advanced features, such as DOM color analyzers, gradient editors etc.<\/p>\n

What add-on technologies or APIs were used to build your add-on?<\/b><\/p>\n

Because the core of the ColorZilla codebase was written in the very early days, it used fairly low-level APIs and services.<\/p>\n

Initially, ColorZilla relied on native XPCOM components for color sampling from the browser window. The first release included a Windows XPCOM module with a following release adding native XPCOM modules for MacOSX and Linux. After a few years, when new APIs became available, the native XPCOM part was eliminated and replaced with a Canvas JavaScript-based solution that didn\u2019t require any platform-specific modules.<\/p>\n

Beyond color sampling, ColorZilla used low-level Firefox XPCOM services for file system access (to save color palettes etc), preferences, extension management etc. It also accessed the browser content DOM directly in order to analyze DOM colors etc.<\/p>\n

Why did you decide to transition your add-on to WebExtensions APIs?<\/b><\/p>\n

There were two major reasons. The first reason was Firefox moving from single process to Electrolysis (e10s). With add-ons no longer able to directly access web content, it would have required refactoring large portions of the ColorZilla code base. In addition, as ColorZilla for Chrome was released in 2012, it meant that there was a need to maintain two completely separate code bases, and to implement new features and capabilities for both. Using WebExtensions allowed seamless supporting of e10s and code-sharing with ColorZilla for Chrome, minimizing the amount of overhead and maintenance and maximizing the efforts that could be invested in innovation and new capabilities.<\/p>\n

Walk us through the process of how you made the transition. How was the experience of finding WebExtensions APIs to replace legacy APIs? What are some advantages and limitations?<\/b><\/p>\n

Because ColorZilla for Chrome was already available on the market for about 5 years and because WebExtensions are largely based on Chrome extension APIs, the most natural path was to back-port the Chrome version to Firefox instead of porting the legacy Firefox extension code base to WebExtensions.<\/p>\n

The first step of that process was to bring all the WebExtensions APIs used in the code to their latest versions, as ColorZilla for Chrome was using some older or deprecated Chrome APIs and Firefox implementation of WebExtensions is based on the latest APIs and doesn\u2019t include the older versions. One such example is updating older chrome.extension.onRequest API to browser.runtime.onMessage<\/a>.<\/p>\n

The next step was to make all the places that hard-coded Chrome\u2014in UI, URLs, etc\u2014to be flexible and detect the current browser. The final step was to bridge various gaps in implementation or semantics between Chrome and Firefox\u2014for example, it\u2019s not possible to programmatically copy to clipboard from background scripts in Firefox. Another example is the browser.extension.isAllowedFileSchemeAccess<\/a> API that has a slightly different semantic\u2014meaning in Chrome, the script cannot access local files, and in Firefox, it cannot open them, but can still access them.<\/p>\n

WebExtensions, as both a high-level and multi-browser set of APIs, has some limitations. One example that affected ColorZilla is that the main add-on button allows only one action. So the “browser action<\/a>” cannot have a main button action and a drop-down containing a menu with more options (also known as a “menu-button” in the pre-WebExtensions world). With only one action available when users click on the main button, there was a need to come up with creative UI solutions to combine showing a menu of available options with auto-starting the color sampling. This allowed users to click on the web content and get a color reading immediately. This and other limitations require add-on developers to often not just port their add-ons to new APIs, but re-think the UI and functionality of their add-ons.<\/p>\n

The huge advantages of the final WebExtensions-based ColorZilla is that it\u2019s both future-proof, supporting new and future versions of Firefox, and multi-browser, supporting Chrome, Edge and other browsers with a single code base.<\/p>\n

Note: This bug<\/a> is meant to expand the capability of menu-buttons in the browserAction API.<\/em><\/p>\n

What, if anything, is different about your add-on now that it is a WebExtension? Were you able to transition with all the features intact?<\/b><\/p>\n

The majority of the functionality was successfully transitioned. The UI\/UX of the add-on is somewhat different and some users did need to adjust to that, but all the top features (and more!) are there in the new WebExtensions version.<\/p>\n

What advice would you give other legacy add-on developers?<\/b><\/p>\n

First, I suggest going over the WebExtensions API and capabilities and doing a feasibility analysis of whether the legacy add-on functionality can be supported with WebExtensions. Some legacy add-ons leverage low-level APIs and access or modify Firefox in a very deep or unique way, which wouldn\u2019t be possible with WebExtensions. Then, if the functionality can be supported, I suggest mapping the UI\/UX of the legacy add-on to the new sets of WebExtensions requirements and paradigms\u2014browser actions, popup windows etc. Following implementation, I suggest extensive testing across different platforms and configurations\u2014depending on the complexity of the add-on, the porting process can introduce a range of issues and quirks. Finally, once the new WebExtensions-based version is released, my advice is to be ready to listen to user feedback and bug reports and quickly release new versions and address issues, to minimize the window of instability for users.<\/p>\n

Anything else you\u2019d like to add?<\/b><\/p>\n

One advice for Mozilla is to better support developers\u2019 and users\u2019 transition to WebExtensions\u2014the process is quite effort-intensive for developers, and user-facing issues, quirks and instabilities that might be introduced due to these changes might be frustrating for both add-on authors and their users. One thing Mozilla could improve, beyond supporting the developer community, is to really shorten the add-on review times and work with developers to shorten the cycle between user bug reports, developer fixes and the release of these fixes to the users. This will really minimize the window of instability for users and make the entire process of moving the Firefox add-on ecosystem to WebExtensions so much smoother. My advice for add-on authors on this front is to engage with the AMO editors, understand the review process and work together to make the review process as fast and smooth possible.<\/p>\n","protected":false},"excerpt":{"rendered":"

ColorZilla lets you get a color reading from any point in your browser, quickly make adjustments to it, and paste it into another program. It also generates gradients and more, … Read more<\/a><\/p>\n","protected":false},"author":377,"featured_media":8123,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44,278886],"tags":[],"yoast_head":"\nMigrating ColorZilla to WebExtensions - 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\/04\/03\/migrating-colorzilla-webextensions\/\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Amy Tsay\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 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\/04\/03\/migrating-colorzilla-webextensions\/\",\"url\":\"https:\/\/blog.mozilla.org\/addons\/2017\/04\/03\/migrating-colorzilla-webextensions\/\",\"name\":\"Migrating ColorZilla to WebExtensions - Mozilla Add-ons Community Blog\",\"isPartOf\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2017\/04\/03\/migrating-colorzilla-webextensions\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2017\/04\/03\/migrating-colorzilla-webextensions\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.mozilla.org\/addons\/files\/2017\/04\/Screenshot-2017-04-03-09.24.51.png\",\"datePublished\":\"2017-04-03T11:24:49+00:00\",\"dateModified\":\"2017-04-03T16:25:16+00:00\",\"author\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/becbc6e5c1f9ed8217c36233bc1a7bec\"},\"breadcrumb\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2017\/04\/03\/migrating-colorzilla-webextensions\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blog.mozilla.org\/addons\/2017\/04\/03\/migrating-colorzilla-webextensions\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2017\/04\/03\/migrating-colorzilla-webextensions\/#primaryimage\",\"url\":\"https:\/\/blog.mozilla.org\/addons\/files\/2017\/04\/Screenshot-2017-04-03-09.24.51.png\",\"contentUrl\":\"https:\/\/blog.mozilla.org\/addons\/files\/2017\/04\/Screenshot-2017-04-03-09.24.51.png\",\"width\":627,\"height\":394},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2017\/04\/03\/migrating-colorzilla-webextensions\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blog.mozilla.org\/addons\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Migrating ColorZilla to WebExtensions\"}]},{\"@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\/becbc6e5c1f9ed8217c36233bc1a7bec\",\"name\":\"Amy Tsay\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/db8d681801f2c6406fb3e53d48db2909?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/db8d681801f2c6406fb3e53d48db2909?s=96&d=mm&r=g\",\"caption\":\"Amy Tsay\"},\"description\":\"Lead for Firefox Add-ons at Mozilla.\",\"sameAs\":[\"https:\/\/x.com\/catchingamy\"],\"url\":\"https:\/\/blog.mozilla.org\/addons\/author\/atsaymozilla-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Migrating ColorZilla to WebExtensions - 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\/04\/03\/migrating-colorzilla-webextensions\/","twitter_misc":{"Written by":"Amy Tsay","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blog.mozilla.org\/addons\/2017\/04\/03\/migrating-colorzilla-webextensions\/","url":"https:\/\/blog.mozilla.org\/addons\/2017\/04\/03\/migrating-colorzilla-webextensions\/","name":"Migrating ColorZilla to WebExtensions - Mozilla Add-ons Community Blog","isPartOf":{"@id":"https:\/\/blog.mozilla.org\/addons\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blog.mozilla.org\/addons\/2017\/04\/03\/migrating-colorzilla-webextensions\/#primaryimage"},"image":{"@id":"https:\/\/blog.mozilla.org\/addons\/2017\/04\/03\/migrating-colorzilla-webextensions\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.mozilla.org\/addons\/files\/2017\/04\/Screenshot-2017-04-03-09.24.51.png","datePublished":"2017-04-03T11:24:49+00:00","dateModified":"2017-04-03T16:25:16+00:00","author":{"@id":"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/becbc6e5c1f9ed8217c36233bc1a7bec"},"breadcrumb":{"@id":"https:\/\/blog.mozilla.org\/addons\/2017\/04\/03\/migrating-colorzilla-webextensions\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog.mozilla.org\/addons\/2017\/04\/03\/migrating-colorzilla-webextensions\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.mozilla.org\/addons\/2017\/04\/03\/migrating-colorzilla-webextensions\/#primaryimage","url":"https:\/\/blog.mozilla.org\/addons\/files\/2017\/04\/Screenshot-2017-04-03-09.24.51.png","contentUrl":"https:\/\/blog.mozilla.org\/addons\/files\/2017\/04\/Screenshot-2017-04-03-09.24.51.png","width":627,"height":394},{"@type":"BreadcrumbList","@id":"https:\/\/blog.mozilla.org\/addons\/2017\/04\/03\/migrating-colorzilla-webextensions\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blog.mozilla.org\/addons\/"},{"@type":"ListItem","position":2,"name":"Migrating ColorZilla to WebExtensions"}]},{"@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\/becbc6e5c1f9ed8217c36233bc1a7bec","name":"Amy Tsay","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/db8d681801f2c6406fb3e53d48db2909?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/db8d681801f2c6406fb3e53d48db2909?s=96&d=mm&r=g","caption":"Amy Tsay"},"description":"Lead for Firefox Add-ons at Mozilla.","sameAs":["https:\/\/x.com\/catchingamy"],"url":"https:\/\/blog.mozilla.org\/addons\/author\/atsaymozilla-com\/"}]}},"_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/posts\/8113"}],"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\/377"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/comments?post=8113"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/posts\/8113\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/media\/8123"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/media?parent=8113"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/categories?post=8113"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/tags?post=8113"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}