{"id":7860,"date":"2016-07-15T08:33:58","date_gmt":"2016-07-15T15:33:58","guid":{"rendered":"http:\/\/blog.mozilla.org\/addons\/?p=7860"},"modified":"2021-03-30T14:58:47","modified_gmt":"2021-03-30T21:58:47","slug":"writing-an-opt-in-ui-for-an-extension","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/addons\/2016\/07\/15\/writing-an-opt-in-ui-for-an-extension\/","title":{"rendered":"Writing an opt-in UI for an extension"},"content":{"rendered":"

March 31, 2021 update: The content of this blog post is a little outdated. To learn more about current best practices for creating user opt-ins for extensions, please visit Firefox Extension Workshop.<\/a> In the article “Best Practices for Collecting User Data Consents<\/a>,” we talk through some considerations you will want to keep in mind and share examples of how to design and implement an opt-in flow.\u00a0 <\/strong><\/em><\/p>\n

Our review policies for addons.mozilla.org (AMO)<\/a> require transparency when it comes to an add-on’s features and how they might affect a user’s privacy and security.<\/p>\n

These policies are particularly relevant in cases where an add-on includes monetization features that are unrelated to its main function. For example, a video downloader add-on could include a shopping recommendation feature that injects offers from commercial websites. In cases like this, to be listed on AMO<\/a> the feature would need to be opt-in. Opt-in means the add-on needs to present to the user the option to enable<\/strong> the feature, with a default action of keeping it disabled<\/strong>.<\/p>\n

We’re often asked for examples of add-ons that do this, so I decided to create a sample WebExtension for this purpose. You can find the code on GitHub<\/a>, and the built and signed example can be downloaded here<\/a>.<\/p>\n

The extension implements two opt-in prompts:<\/p>\n

    \n
  1. A new tab. \"Tab<\/li>\n
  2. A panel in the main add-on button. \"Panel<\/li>\n<\/ol>\n

    (If you don’t recognize the dark theme in the screenshots, it’s because I’m using Firefox Developer Edition<\/a>\u2014currently Firefox 49\u2014for testing.)<\/p>\n

    An add-on would normally implement one prompt or the other. Opening a new tab has the advantage of getting the user’s attention right away, and has more room for content. The main disadvantage is that it can annoy users and feel too pushy. The pop-up approach is more user-friendly because it appears when the user is ready to engage with the add-on and is better integrated with the add-on UI. However, it wouldn’t work if the add-on doesn’t include buttons.<\/p>\n

    This example is completely minimal, hence the almost complete lack of styling. However, it includes the elements that AMO policies deem necessary:<\/p>\n