User experience best practices | Firefox Extension Workshop

<!DOCTYPE html> <html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>User experience best practices | Firefox Extension Workshop</title> <link rel="preload" href="/assets/fonts/icomoon/fonts/icomoon.e09c8480.woff2"> <link rel="preload" href="/assets/fonts/inter/Inter-Regular.4a249737.woff2"> <link rel="preload" href="/assets/fonts/inter/Inter-SemiBold.8aece91e.woff2"><link rel="preconnect" href="https://www.googletagmanager.com"> <link rel="preconnect" href="https://s.ytimg.com"> <link rel="canonical" href="https://extensionworkshop.com/documentation/develop/user-experience-best-practices/"> <meta name="description" content="Get help creating & publishing Firefox extensions."> <meta property="og:description" content="Get help creating & publishing Firefox extensions."> <meta property="og:locale" content="en_US"> <meta property="og:site_name" content="Firefox Extension Workshop"> <meta property="og:title" content="User experience best practices"> <meta property="og:url" content="https://extensionworkshop.com/documentation/develop/user-experience-best-practices/"> <meta property="article:published_time" content="2024-06-27T14:57:48.406Z"> <script type="application/ld+json">{ "@context": "http:\u002F\u002Fschema.org", "url": "https:\u002F\u002Fextensionworkshop.com\u002Fdocumentation\u002Fdevelop\u002Fuser-experience-best-practices\u002F", "@type": "TechArticle", "datePublished": "2024-06-27T14:57:48.406Z", "headline": "User experience best practices" }</script> <link rel="apple-touch-icon" href="/assets/img/favicon.6119d485.png"> <link rel="shortcut icon" href="/assets/img/favicon.87c0566f.ico"> <link rel="stylesheet" href="/assets/css/styles.1d89172b.css"><script>if(!(window.doNotTrack === "1" || navigator.doNotTrack === "1" || navigator.doNotTrack === "yes" || navigator.msDoNotTrack === "1")) { const lastScriptElm = document.getElementsByTagName("script")[0]; const scriptElm = document.createElement("script"); scriptElm.async = 1; scriptElm.src = "https://www.googletagmanager.com/gtag/js?id=G-9Z2W2GS66M"; lastScriptElm.parentNode.insertBefore(scriptElm, lastScriptElm); window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag("js", new Date()); gtag("config", "G-9Z2W2GS66M"); }</script> </head> <body class="site sidebar"><header class="site-header"> <div class="grid-x grid-padding-x"> <div class="cell small-12"> <h3 class="logo"><a href="/">Extension Workshop</a></h3> <button class="hamburger hide-for-large hamburger--collapse" type="button" aria-label="Menu" aria-controls="navigation" aria-expanded="false"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </button> <nav role="navigation" class="top-nav" id="primary"><ul class="primary"><li> <a href="/extension-basics/" data-overviewtitle="Extension Basics Overview">Extension Basics</a> <ul class="section"> <li><a href="#getting-started">Getting started</a></li> <li><a href="#mozilla-developer-network">Mozilla Developer Network</a></li> </ul> </li> <li class="has-children has-subfolder"> <span class="label">Documentation Topics</span> <ul class="subfolder"> <li class="has-children"> <a href="/documentation/develop/" data-overviewtitle="Develop Overview">Develop</a> <ul class="section"> <li><a href="#firefox-tools">Firefox Tools</a></li> <li><a href="#user-experience">User Experience</a></li> <li><a href="#firefox-for-android">Firefox for Android</a></li> <li><a href="#port-to-firefox">Port to Firefox</a></li> <li><a href="#test-and-debug">Test and debug</a></li> </ul> <div class="category"> <h6>Getting Started</h6> <ul> <li> <a href="/documentation/develop/unique-firefox-capabilities/">Unique Firefox Capabilities</a> </li> <li> <a href="/documentation/develop/firefox-workflow-overview/">Firefox Workflow Overview</a> </li> <li> <a href="/documentation/develop/about-the-webextensions-api/">About the WebExtensions API</a> </li> </ul> </div> <div class="category"> <h6>Manifest V3</h6> <ul> <li> <a href="/documentation/develop/manifest-v3-migration-guide/">Manifest V3 migration guide</a><ul class="section"> <li><a href="#what-is-manifest-v3">What is Manifest V3?</a></li> <li><a href="#developer-preview-changes">Manifest V3 changes</a></li> <li><a href="#migration-checklist">Migration checklist</a></li> </ul> </li> </ul> </div> <div class="category"> <h6>Cross-Browser Development</h6> <ul> <li> <a href="/documentation/develop/browser-compatibility/">Browser Compatibility</a><ul class="section"> <li><a href="#namespace">Namespace</a></li> <li><a href="#asynchronous">Asynchronous</a></li> <li><a href="#api-coverage">API Coverage</a></li> <li><a href="#manifest-keys">Manifest keys</a></li> <li><a href="#more-information">More information</a></li> </ul> </li> <li> <a href="https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/Build_a_cross_browser_extension">Build cross-browser extensions</a> </li> </ul> </div> <div class="category"> <h6>Firefox Tools</h6> <ul> <li> <a href="https://www.youtube.com/watch?v=Q3AQ5D2QFwc">Build an extension in 5 minutes</a> </li> <li> <a href="/documentation/develop/browser-extension-development-tools/">Browser Extension Development Tools</a><ul class="section"> <li><a href="#boilerplating-tools">Boilerplating tools</a></li> <li><a href="#coding-tools">Coding tools</a></li> <li><a href="#testing-and-debugging-tools">Testing and debugging tools</a></li> <li><a href="#translation-tools">Translation tools</a></li> <li><a href="#tools-for-firefox-for-android">Tools for Firefox for Android</a></li> </ul> </li> <li> <a href="/documentation/develop/choosing-a-firefox-version-for-extension-development/">Choosing a Firefox version for extension development</a><ul class="section"> <li><a href="#firefox-editions">Firefox editions</a></li> <li><a href="#firefox-version-and-their-web-extension-development-capabilities">Firefox version and their web extension development capabilities</a></li> </ul> </li> <li> <a href="/documentation/develop/getting-started-with-web-ext/">Getting started with web-ext</a><ul class="section"> <li><a href="#installation-section">Installation</a></li> <li><a href="#update-section">Update</a></li> <li><a href="#using-web-ext-section">Using web-ext</a></li> <li><a href="#check-with-lint">Check your code</a></li> <li><a href="#test-and-degug-an-extention">Test and debug</a></li> <li><a href="#package-sign-and-publish-an-extension">Package, sign, and publish</a></li> <li><a href="#use-the-configuration-file">Use the configuration file</a></li> <li><a href="#advanced-topics">Advanced topics</a></li> <li><a href="#see-also-section">See also</a></li> </ul> </li> <li> <a href="/documentation/develop/web-ext-command-reference/">web-ext v8 command reference</a><ul class="section"> <li><a href="#whats-new">What's new</a></li> <li><a href="#commands">Commands</a></li> <li><a href="#web-ext-build"><code>web-ext build</code></a></li> <li><a href="#web-ext-docs"><code>web-ext docs</code></a></li> <li><a href="#web-ext-dump-config"><code>web-ext dump-config</code></a></li> <li><a href="#web-ext-lint"><code>web-ext lint</code></a></li> <li><a href="#web-ext-run"><code>web-ext run</code></a></li> <li><a href="#web-ext-sign"><code>web-ext sign</code></a></li> <li><a href="#global-options">Global options</a></li> <li><a href="#setting-option-environment-variables">Setting option environment variables</a></li> <li><a href="#see-also">See also</a></li> </ul> </li> <li> <a href="/documentation/develop/web-ext-command-reference-v7/">web-ext v7 command reference</a><ul class="section"> <li><a href="#commands">Commands</a></li> <li><a href="#global-options">Global options</a></li> <li><a href="#setting-option-environment-variables">Setting option environment variables</a></li> <li><a href="#see-also">See also</a></li> </ul> </li> <li> <a href="https://github.com/hiikezoe/web-ext-webpack-plugin/blob/master/README.md">Web-ext Webpack plug-in</a> </li> <li> <a href="https://github.com/mozilla/webextension-polyfill">Browser API Polyfill</a> </li> <li> <a href="/documentation/develop/extensions-and-the-add-on-id/">Extensions and the Add-on ID</a><ul class="section"> <li><a href="#basic-workflow-with-no-add-on-id">Basic workflow with no add-on ID</a></li> <li><a href="#when-do-you-need-an-add-on-id">When do you need an add-on ID?</a></li> </ul> </li> </ul> </div> <div class="category"> <h6>User Experience</h6> <ul> <li> <a href="/documentation/develop/build-a-secure-extension/">Build a secure extension</a> </li> <li> <a href="/documentation/develop/request-the-right-permissions/">Request the right permissions</a><ul class="section"> <li><a href="#introduction">Introduction</a></li> <li><a href="#advised-permissions">Advised permissions</a></li> <li><a href="#avoid-unnecessary-permissions">Avoid unnecessary permissions</a></li> <li><a href="#request-permissions-at-runtime">Request permissions at runtime</a></li> <li><a href="#add-information-about-permissions-to-your-extensions-amo-page">Add information about permissions to your extensions AMO page</a></li> </ul> </li> <li> <a href="/documentation/develop/best-practices-for-collecting-user-data-consents/">Best practices for collecting user data consents</a><ul class="section"> <li><a href="#know-your-privacy-settings">Know your privacy settings</a></li> <li><a href="#get-prepared">Get prepared</a></li> <li><a href="#create-a-privacy-policy">Create a privacy policy</a></li> <li><a href="#prompt-after-install">Prompt after install</a></li> <li><a href="#determine-your-consent-flow">Determine your consent flow</a></li> <li><a href="#your-consent-dialogs">Your consent dialogs</a></li> </ul> </li> <li> <a href="/documentation/develop/build-an-accessible-extension/">Build an accessible extension</a> </li> <li> <a href="/documentation/develop/onboard-upboard-offboard-users/">Onboard, upboard, offboard users</a><ul class="section"> <li><a href="#onboarding">Onboarding</a></li> <li><a href="#upboarding">Upboarding</a></li> <li><a href="#offboarding">Offboarding</a></li> </ul> </li> <li class="is-active"> <a href="/documentation/develop/user-experience-best-practices/">User experience best practices</a><ul class="section"> <li><a href="#keep-it-focused">1. Keep it focused</a></li> <li><a href="#give-users-what-they-need-where-they-need-it">2. Give users what they need, where they need it</a></li> <li><a href="#keep-the-user-informed">3. Keep the user informed</a></li> <li><a href="#be-firefoxy-in-look-and-feel">4. Be Firefoxy in look and feel</a></li> <li><a href="#great-onboarding-experience">5. Great onboarding experience</a></li> <li><a href="#test-test-and-then-test-again">6. Test, test, and then test again</a></li> </ul> </li> </ul> </div> <div class="category"> <h6>Mobile</h6> <ul> <li> <a href="/documentation/develop/differences-between-desktop-and-android-extensions/">Differences between desktop and Android extensions</a><ul class="section"> <li><a href="#introduction">Introduction</a></li> <li><a href="#user-interface">User interface</a></li> <li><a href="#native-application-interaction">Native application interaction</a></li> <li><a href="#permissions">Permissions</a></li> <li><a href="#storage">Storage</a></li> </ul> </li> <li> <a href="/documentation/develop/user-experience-guidelines-for-mobile-extensions/">User experience guidelines for mobile extensions</a><ul class="section"> <li><a href="#introduction">Introduction</a></li> <li><a href="#the-basics">The basics</a></li> <li><a href="#the-extra-mile">The extra mile</a></li> <li><a href="#the-last-mile">The last mile</a></li> </ul> </li> <li> <a href="/documentation/develop/developing-extensions-for-firefox-for-android/">Developing extensions for Firefox for Android</a><ul class="section"> <li><a href="#set-up-your-computer-and-android-emulator-or-device">Set up your computer and Android emulator or device</a></li> <li><a href="#check-for-firefox-for-android-compatibility">Check for Firefox for Android compatibility</a></li> <li><a href="#install-and-run-your-extension-in-firefox-for-android">Install and run your extension in Firefox for Android</a></li> <li><a href="#debug-your-extension">Debug your extension</a></li> <li><a href="#mv3-compatibility">Manifest V3 compatibility</a></li> </ul> </li> <li> <a href="https://github.com/mozilla/geckoview">GeckoView Extensions (Android library)</a> </li> </ul> </div> <div class="category"> <h6>Port Your Extension</h6> <ul> <li> <a href="/documentation/develop/porting-a-google-chrome-extension/">Porting a Google Chrome Extension</a> </li> </ul> </div> <div class="category"> <h6>Debug and Test</h6> <ul> <li> <a href="/documentation/develop/debugging/">Debugging</a><ul class="section"> <li><a href="#developer-tools-toolbox">Developer tools toolbox</a></li> <li><a href="#debugging-background-scripts">Debugging background scripts</a></li> <li><a href="#debugging-options-pages">Debugging options pages</a></li> <li><a href="#debugging-popups">Debugging popups</a></li> <li><a href="#debugging-content-scripts">Debugging content scripts</a></li> <li><a href="#debugging-sidebars">Debugging sidebars</a></li> <li><a href="#debugging-storage">Debugging storage</a></li> <li><a href="#debugging-developer-tools-pages-and-panels">Debugging developer tools pages and panels</a></li> <li><a href="#debug-permission-requests">Debug permission requests</a></li> <li><a href="#debugging-browser-restarts">Debugging browser restarts</a></li> </ul> </li> <li> <a href="/documentation/develop/temporary-installation-in-firefox/">Temporary Installation in Firefox</a><ul class="section"> <li><a href="#reloading-a-temporary-extension">Reloading a temporary extension</a></li> <li><a href="#using-the-command-line">Using the command line</a></li> <li><a href="#detecting-temporary-installation">Detecting temporary installation</a></li> <li><a href="#limitations">Limitations</a></li> </ul> </li> <li> <a href="/documentation/develop/testing-persistent-and-restart-features/">Testing persistent and restart features</a><ul class="section"> <li><a href="#what-is-an-add-on-id">What is an add-on ID?</a></li> <li><a href="#what-is-a-firefox-profile">What is a Firefox profile?</a></li> <li><a href="#extension-behavior-in-firefox">Extension behavior in Firefox</a></li> <li><a href="#what-do-i-do-to-ensure-i-can-test-my-extension">What do I do to ensure I can test my extension?</a></li> </ul> </li> <li> <a href="/documentation/develop/test-permission-requests/">Test permission requests</a><ul class="section"> <li><a href="#permission-grant-behavior-during-testing">Permission grant behavior during testing</a></li> <li><a href="#observe-or-verify-install-time-permission-requests">Observe or verify install time permission requests</a></li> <li><a href="#retest-runtime-permission-grants">Retest runtime permission grants</a></li> </ul> </li> <li> <a href="/documentation/develop/known-issues/">Known issues</a><ul class="section"> <li><a href="#invisible-content-scripts">Content scripts don't appear in DevTools</a></li> <li><a href="#devtools-updates-missing">Extension source don't update in DevTools</a></li> <li><a href="#android-destroyed-actor">"Destroyed actor" errors when debugging Android</a></li> </ul> </li> </ul> </div> </li> <li class="has-children"> <a href="/documentation/publish/" data-overviewtitle="Publish Overview">Publish</a> <ul class="section"> <li><a href="#get-your-extension-signed">Get your extension signed</a></li> <li><a href="#distribute-your-signed-extension">Distribute your signed extension</a></li> <li><a href="#promote-your-extension">Promote your extension</a></li> </ul> <div class="category"> <h6>Policies</h6> <ul> <li> <a href="/documentation/publish/add-on-policies/">Add-on Policies</a><ul class="section"> <li><a href="#no-surprises">No Surprises</a></li> <li><a href="#content">Content</a></li> <li><a href="#submission-guidelines">Submission Guidelines</a></li> <li><a href="#development-practices">Development Practices</a></li> <li><a href="#data-disclosure-collection-and-management">Data Disclosure, Collection and Management</a></li> <li><a href="#monetization">Monetization</a></li> <li><a href="#security-compliance-and-blocking">Security, Compliance and Blocking</a></li> </ul> </li> <li> <a href="/documentation/publish/firefox-add-on-distribution-agreement/">Firefox Add-on Distribution Agreement</a><ul class="section"> <li><a href="#introduction">1. Introduction</a></li> <li><a href="#accounts">2. Accounts</a></li> <li><a href="#privacy-policy">3. Privacy Policy</a></li> <li><a href="#distribution-certificates-and-review-process">4. Distribution, certificates, & review process</a></li> <li><a href="#your-obligations">5. Your obligations</a></li> <li><a href="#licenses-proprietary-rights">6. Licenses; proprietary rights</a></li> <li><a href="#content-removal">7. Content removal</a></li> <li><a href="#disclaimer-of-warranties">8. Disclaimer of warranties</a></li> <li><a href="#limitation-of-liability">9. Limitation of liability</a></li> <li><a href="#release-idemnification">10. Release; indemnification</a></li> <li><a href="#general-legal-terms">11. General legal terms</a></li> </ul> </li> <li> <a href="/documentation/publish/add-ons-blocking-process/">Add-ons Blocking Process</a><ul class="section"> <li><a href="#security-over-choice">Security Over Choice</a></li> <li><a href="#blocking-criteria">Blocking Criteria</a></li> <li><a href="#developer-outreach">Developer Outreach</a></li> <li><a href="#requesting-a-block">Requesting a Block</a></li> <li><a href="#blocking-other-types-of-third-party-software">Blocking Other Types of Third Party Software</a></li> </ul> </li> <li> <a href="/documentation/publish/third-party-library-usage/">Third Party Library Usage</a><ul class="section"> <li><a href="#when-must-links-for-third-party-libraries-be-provided">When must links for third-party libraries be provided?</a></li> <li><a href="#how-to-determine-the-third-party-library-link">How to determine the third-party library link</a></li> <li><a href="#communicating-third-party-library-links-to-the-reviewer">Communicating third-party library links to reviewers</a></li> </ul> </li> <li> <a href="/documentation/publish/what-does-review-rejection-mean-to-users/">What does review rejection mean to users?</a><ul class="section"> <li><a href="#review-overview">Review overview</a></li> <li><a href="#impact-of-review-rejection">Impact of review rejection</a></li> <li><a href="#blocklisting">Blocklisting</a></li> </ul> </li> </ul> </div> <div class="category"> <h6>Sign</h6> <ul> <li> <a href="/documentation/publish/signing-and-distribution-overview/">Signing and distribution overview</a><ul class="section"> <li><a href="#signing-your-addons">Signing your add-ons</a></li> <li><a href="#distributing-your-addon">Distributing your add-on</a></li> <li><a href="#post-submission-review">Post-submission review</a></li> <li><a href="#about-amo">More information about AMO</a></li> </ul> </li> <li> <a href="/documentation/publish/package-your-extension/">Package your extension</a><ul class="section"> <li><a href="#package-windows">Windows</a></li> <li><a href="#package-mac">Mac OSX</a></li> <li><a href="#package-linux">Linux / Mac OSX Terminal</a></li> </ul> </li> </ul> </div> <div class="category"> <h6>Distribute</h6> <ul> <li> <a href="/documentation/publish/distribute-manifest-versions/">Distribute Manifest V2 and V3 extensions</a> </li> <li> <a href="/documentation/publish/distribute-pre-release-versions/">Distribute pre-release versions</a> </li> <li> <a href="/documentation/publish/submitting-an-add-on/">Submitting an add-on</a><ul class="section"> <li><a href="#listing-on-amo">Listing on AMO</a></li> <li><a href="#self-distribution">Self-distribution</a></li> <li><a href="#get-help">Get help</a></li> </ul> </li> <li> <a href="/documentation/publish/source-code-submission/">Source code submission</a><ul class="section"> <li><a href="#provide-your-extension-source-code">Provide your extension source code</a></li> <li><a href="#default-reviewer-build-environment">Default reviewer build environment</a></li> <li><a href="#use-of-obfuscated-code">Use of obfuscated code</a></li> <li><a href="#source-code-checklist">Source code checklist</a></li> </ul> </li> <li> <a href="/documentation/publish/version-compatibility/">Firefox version compatibility</a><ul class="section"> <li><a href="#compatibility">Version compatibility</a></li> <li><a href="#browser-specific-settings">The `browser_specific_settings` key</a></li> <li><a href="#amo-compatibility">AMO compatibility setting</a></li> <li><a href="#recommendations">Recommendations</a></li> </ul> </li> <li> <a href="/documentation/publish/add-on-ownership/">Add-on ownership</a><ul class="section"> <li><a href="#transfer-ownership">Transfer ownership</a></li> <li><a href="#code-disputes">Code disputes</a></li> </ul> </li> <li> <a href="/documentation/publish/developer-accounts/">Developer accounts</a><ul class="section"> <li><a href="#setting-a-display-name">Setting a display name</a></li> <li><a href="#blocked-accounts">Blocked accounts</a></li> <li><a href="#email-issues">Issues receiving emails from AMO</a></li> </ul> </li> <li> <a href="/documentation/publish/self-distribution/">Self-distribution</a><ul class="section"> <li><a href="#options">Self-distribution options</a></li> </ul> </li> <li> <a href="/documentation/publish/distribute-sideloading/">Sideloading</a><ul class="section"> <li><a href="#preparing-your-addon">Preparing your add-on</a></li> <li><a href="#install-addon-from-file">Install add-on from file</a></li> <li><a href="#standard-extension-folders">Installation using the standard extension folders</a></li> </ul> </li> <li> <a href="/documentation/publish/distribute-for-desktop-apps/">For desktop apps</a> </li> </ul> </div> <div class="category"> <h6>Promote</h6> <ul> <li> <a href="/documentation/develop/create-an-appealing-listing/">Create an appealing listing</a><ul class="section"> <li><a href="#your-add-ons-name">Your add-on’s name</a></li> <li><a href="#create-a-captivating-icon">Create a captivating icon</a></li> <li><a href="#create-a-meaningful-set-of-keywords">Create a meaningful set of keywords</a></li> <li><a href="#make-sure-your-summary-is-just-long-enough">Make sure your summary is just long enough</a></li> <li><a href="#focus-on-key-features-in-your-screenshots">Focus on key features in your screenshots</a></li> <li><a href="#the-add-on-description-can-be-longer-but-not-too-long">The add-on description can be longer, but not too long</a></li> <li><a href="#make-it-local">Make it local</a></li> <li><a href="#make-it-experimental">Make it experimental</a></li> <li><a href="#select-the-right-platforms-and-versions">Select the right platforms and versions</a></li> <li><a href="#categorize-well">Categorize well</a></li> <li><a href="#be-prepared-to-provide-support">Be prepared to provide support</a></li> <li><a href="#set-up-a-developer-profile">Set up a developer profile</a></li> <li><a href="#use-plain-language-in-any-privacy-policy-or-license-agreement">Use plain language in any privacy policy or license agreement</a></li> <li><a href="#gently-ask-for-a-review">Gently ask for a review</a></li> <li><a href="#some-other-points">Some other points</a></li> </ul> </li> <li> <a href="https://www.youtube.com/watch?v=a0_OsLGI0k4">What’s great content and design?</a> </li> <li> <a href="/documentation/publish/promoting-your-extension/">Promoting your extension</a><ul class="section"> <li><a href="#promote-your-addon">Promote your add-on from your website</a></li> <li><a href="#friends-family-colleagues">Friends, family, and colleagues</a></li> <li><a href="#events-and-meetups">Events and meetups</a></li> <li><a href="#current-users">Current users</a></li> <li><a href="#social-media">Social media</a></li> <li><a href="#engage-with-users">Engage with your users</a></li> <li><a href="#create-a-forum">Create a forum, user group, or similar</a></li> <li><a href="#engage-with-media">Engage with bloggers and news media</a></li> <li><a href="#advertising">Advertising</a></li> </ul> </li> <li> <a href="/documentation/publish/make-money-from-browser-extensions/">Make money from browser extensions</a><ul class="section"> <li><a href="#sell-through-AMO">Will I ever be able to sell through AMO?</a></li> <li><a href="#what-cant-you-do">What can't you do</a></li> <li><a href="#what-can-you-do">What can you do</a></li> <li><a href="#unsolicited-offers">Unsolicited offers</a></li> <li><a href="#maximize-income">How can I maximize my income?</a></li> </ul> </li> <li> <a href="/documentation/publish/recommended-extensions/">Recommended extensions</a><ul class="section"> <li><a href="#overview">Overview</a></li> <li><a href="#criteria">Criteria for Recommended extensions</a></li> <li><a href="#partnership">Developer partnership</a></li> <li><a href="#selection">Selection process</a></li> </ul> </li> </ul> </div> </li> <li class="has-children"> <a href="/documentation/manage/" data-overviewtitle="Manage Overview">Manage</a> <ul class="section"> <li><a href="#stay-informed-when-firefox-changes">Stay informed when Firefox changes</a></li> <li><a href="#publish-extension-updates">Publish extension updates</a></li> <li><a href="#manage-authors-of-your-extension">Manage authors of your extension</a></li> <li><a href="#promote-your-extension">Promote your extension</a></li> <li><a href="#removing-your-extension-from-distribution">Removing your extension from distribution</a></li> </ul> <div class="category"> <h6>Resources</h6> <ul> <li> <a href="/documentation/manage/updating-your-extension/">Updating your extension</a><ul class="section"> <li><a href="#enable-update">Enabling updates to your extension</a></li> <li><a href="#manifest-structure">Manifest structure</a></li> <li><a href="#testing-automatic-updating">Testing automatic updating</a></li> </ul> </li> <li> <a href="/documentation/manage/best-practices-for-updating/">Best practices for updating your extension</a> </li> <li> <a href="/documentation/manage/monitoring-extension-usage-statistics/">Monitoring extension usage statistics</a><ul class="section"> <li><a href="#accessing-the-statistics-dashboard">Accessing the statistics dashboard</a></li> <li><a href="#tracking-external-sources">Tracking external sources</a></li> <li><a href="#add-on-listing-example">Add-on listing example</a></li> </ul> </li> <li> <a href="/documentation/manage/resources-for-publishers/">Resources for publishers</a> </li> <li> <a href="/documentation/manage/retiring-your-extension/">Retiring your extension</a><ul class="section"> <li><a href="#reasons-for-withdrawing">Reasons for withdrawing your extension</a></li> <li><a href="#steps-to-retiring-an-extension">Steps to retiring an extension</a></li> <li><a href="#suggested-retirement-timetable">Suggested retirement timetable</a></li> </ul> </li> </ul> </div> </li> <li class="has-children"> <a href="/documentation/enterprise/" data-overviewtitle="Enterprise Overview">Enterprise</a> <ul class="section"> <li><a href="#developing-your-enterprise-extension">Developing your enterprise extension</a></li> <li><a href="#distributing-your-enterprise-extension">Distributing your enterprise extension</a></li> </ul> <div class="category"> <h6>Enterprise support</h6> <ul> <li> <a href="https://support.mozilla.org/products/firefox-enterprise/policies-customization-enterprise/manage-add-ons-enterprise">Manage add-ons for Firefox for Enterprise</a> </li> <li> <a href="https://support.mozilla.org/kb/install-system-add-ons-firefox-enterprise">Install system add-ons for Firefox for Enterprise</a> </li> </ul> </div> <div class="category"> <h6>Enterprise resources</h6> <ul> <li> <a href="/documentation/enterprise/enterprise-development/">Enterprise development</a><ul class="section"> <li><a href="#enterprise-consent">Data collection disclosure and consent for enterprise extensions</a></li> <li><a href="#how-to-add-policy">How to add policy support</a></li> <li><a href="#distributing-your-policy">Distributing your policy</a></li> </ul> </li> <li> <a href="/documentation/enterprise/enterprise-policies-that-impact-extensions/">Enterprise policies that impact extensions</a><ul class="section"> <li><a href="#relevant-policies">Relevant policies</a></li> <li><a href="#other-relevant-policies">Other relevant policies</a></li> </ul> </li> <li> <a href="/documentation/enterprise/enterprise-distribution/">Enterprise distribution</a><ul class="section"> <li><a href="#signed-vs-unsigned">Signed vs. unsigned extensions</a></li> <li><a href="#using-an-extensionsettings-policy">Using an ExtensionSettings policy</a></li> <li><a href="#bundling-add-ons-with-custom-Firefox">Bundling add-ons with a custom Firefox</a></li> </ul> </li> </ul> </div> </li> <li class="has-children"> <a href="/documentation/themes/" data-overviewtitle="Themes Overview">Themes</a> <div class="category"> <h6>Creating themes</h6> <ul> <li> <a href="/documentation/themes/using-the-amo-theme-generator/">Using the AMO theme generator</a><ul class="section"> <li><a href="#getting-started">Getting started</a></li> <li><a href="#submitting-your-theme">Submitting your theme</a></li> <li><a href="#updating-your-theme">Updating your theme</a></li> </ul> </li> <li> <a href="/documentation/themes/static-themes/">Static themes</a><ul class="section"> <li><a href="#introduction">Introduction</a></li> <li><a href="#create-a-simple-static-theme">Create a simple static theme</a></li> <li><a href="#updating-static-themes">Updating static themes</a></li> <li><a href="#single-image-themes">Single image themes</a></li> <li><a href="#multiple-image-themes">Multiple image themes</a></li> <li><a href="#static-animated-themes">Static animated themes</a></li> </ul> </li> <li> <a href="/documentation/themes/dynamic-themes/">Dynamic themes</a><ul class="section"> <li><a href="#introduction">Introduction</a></li> <li><a href="#creating-dynamic-themes">Creating dynamic themes</a></li> <li><a href="#publishing-dynamic-themes">Publishing dynamic themes</a></li> </ul> </li> <li> <a href="/documentation/themes/cross-browser-compatibility/">Cross-browser compatibility</a> </li> </ul> </div> </li> </ul> </li><li class="has-children"> <a href="/community/" data-overviewtitle="Community Overview">Community</a> <ul class="section"> <li><a href="#who-is-part-of-the-community">Who is part of the community?</a></li> <li><a href="#connect-with-the-community">Connect with the community</a></li> <li><a href="#get-involved-in-the-community">Get involved in the community</a></li> </ul> <div class="category"> <h6>Get in touch</h6> <ul> <li> <a href="https://discourse.mozilla.org/c/add-ons">Community Forum</a> </li> <li> <a href="https://blog.mozilla.org/addons/">Add-ons Blog</a> </li> <li> <a href="/community/#office-hours">Office Hours</a> </li> <li> <a href="https://stackoverflow.com/tags/firefox-addon">Stack Overflow</a> </li> <li> <a href="https://calendar.google.com/calendar?cid=bW96aWxsYS5jb21fb2ZqbGN0MDdrMTc4NHYxdTUxYnFrNDc2YmtAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ">Communication Calendar</a> </li> <li> <a href="https://mail.mozilla.org/listinfo/dev-addons">Dev Mailing List</a> </li> </ul> </div><div class="category"> <h6>Contribute</h6> <ul> <li> <a href="https://wiki.mozilla.org/Add-ons/Contribute">Contribution opportunities</a> </li> <li> <a href="https://wiki.mozilla.org/WebExtensions/Contribution_Onramp">Onboard to the WebExtensions codebase</a> </li> <li> <a href="https://wiki.mozilla.org/WebExtensions/Hacking">Hacking guide for WebExtensions code contributions</a> </li> <li> <a href="https://webextensions-experiments.readthedocs.io/">WebExtensions Experiments</a> </li> <li> <a href="https://bugzilla.mozilla.org">Find or create a bug</a> </li> </ul> </div> </li> </ul> <a href="https://addons.mozilla.org/developers/addons" class="button large hide-for-large">Submit or Manage Extensions</a> </nav> <button class="search-input-open">Search</button> <a href="https://addons.mozilla.org/developers/addons" class="button show-for-large">Submit or Manage Extensions</a> <section class="search-input" role="search"> <form class="search-interface" action="/search-results/" method="get"> <label for="lunrsearch">Search</label> <input type="search" id="lunrsearch" name="q" maxlength="255" value="" placeholder="Search documentation" minlength="3" required=""> <input type="submit" value="Search"> </form> <button class="search-input-close"></button> </section> </div> </div> </header> <div class="site-wrapper"> <nav role="navigation" class="sidenav"> <div class="sidenav-status"> <div class="sidenav-status-instruction">Select a section</div> <div id="sidenav-status-pagename">Page Name</div> </div> <div class="sidenav-top" aria-hidden="true"><ul class="primary"><li> <a href="/extension-basics/" data-overviewtitle="Extension Basics Overview">Extension Basics</a> <ul class="section"> <li><a href="#getting-started">Getting started</a></li> <li><a href="#mozilla-developer-network">Mozilla Developer Network</a></li> </ul> </li> <li class="has-children has-subfolder"> <span class="label">Documentation Topics</span> <ul class="subfolder"> <li class="has-children"> <a href="/documentation/develop/" data-overviewtitle="Develop Overview">Develop</a> <ul class="section"> <li><a href="#firefox-tools">Firefox Tools</a></li> <li><a href="#user-experience">User Experience</a></li> <li><a href="#firefox-for-android">Firefox for Android</a></li> <li><a href="#port-to-firefox">Port to Firefox</a></li> <li><a href="#test-and-debug">Test and debug</a></li> </ul> <div class="category"> <h6>Getting Started</h6> <ul> <li> <a href="/documentation/develop/unique-firefox-capabilities/">Unique Firefox Capabilities</a> </li> <li> <a href="/documentation/develop/firefox-workflow-overview/">Firefox Workflow Overview</a> </li> <li> <a href="/documentation/develop/about-the-webextensions-api/">About the WebExtensions API</a> </li> </ul> </div> <div class="category"> <h6>Manifest V3</h6> <ul> <li> <a href="/documentation/develop/manifest-v3-migration-guide/">Manifest V3 migration guide</a><ul class="section"> <li><a href="#what-is-manifest-v3">What is Manifest V3?</a></li> <li><a href="#developer-preview-changes">Manifest V3 changes</a></li> <li><a href="#migration-checklist">Migration checklist</a></li> </ul> </li> </ul> </div> <div class="category"> <h6>Cross-Browser Development</h6> <ul> <li> <a href="/documentation/develop/browser-compatibility/">Browser Compatibility</a><ul class="section"> <li><a href="#namespace">Namespace</a></li> <li><a href="#asynchronous">Asynchronous</a></li> <li><a href="#api-coverage">API Coverage</a></li> <li><a href="#manifest-keys">Manifest keys</a></li> <li><a href="#more-information">More information</a></li> </ul> </li> <li> <a href="https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/Build_a_cross_browser_extension">Build cross-browser extensions</a> </li> </ul> </div> <div class="category"> <h6>Firefox Tools</h6> <ul> <li> <a href="https://www.youtube.com/watch?v=Q3AQ5D2QFwc">Build an extension in 5 minutes</a> </li> <li> <a href="/documentation/develop/browser-extension-development-tools/">Browser Extension Development Tools</a><ul class="section"> <li><a href="#boilerplating-tools">Boilerplating tools</a></li> <li><a href="#coding-tools">Coding tools</a></li> <li><a href="#testing-and-debugging-tools">Testing and debugging tools</a></li> <li><a href="#translation-tools">Translation tools</a></li> <li><a href="#tools-for-firefox-for-android">Tools for Firefox for Android</a></li> </ul> </li> <li> <a href="/documentation/develop/choosing-a-firefox-version-for-extension-development/">Choosing a Firefox version for extension development</a><ul class="section"> <li><a href="#firefox-editions">Firefox editions</a></li> <li><a href="#firefox-version-and-their-web-extension-development-capabilities">Firefox version and their web extension development capabilities</a></li> </ul> </li> <li> <a href="/documentation/develop/getting-started-with-web-ext/">Getting started with web-ext</a><ul class="section"> <li><a href="#installation-section">Installation</a></li> <li><a href="#update-section">Update</a></li> <li><a href="#using-web-ext-section">Using web-ext</a></li> <li><a href="#check-with-lint">Check your code</a></li> <li><a href="#test-and-degug-an-extention">Test and debug</a></li> <li><a href="#package-sign-and-publish-an-extension">Package, sign, and publish</a></li> <li><a href="#use-the-configuration-file">Use the configuration file</a></li> <li><a href="#advanced-topics">Advanced topics</a></li> <li><a href="#see-also-section">See also</a></li> </ul> </li> <li> <a href="/documentation/develop/web-ext-command-reference/">web-ext v8 command reference</a><ul class="section"> <li><a href="#whats-new">What's new</a></li> <li><a href="#commands">Commands</a></li> <li><a href="#web-ext-build"><code>web-ext build</code></a></li> <li><a href="#web-ext-docs"><code>web-ext docs</code></a></li> <li><a href="#web-ext-dump-config"><code>web-ext dump-config</code></a></li> <li><a href="#web-ext-lint"><code>web-ext lint</code></a></li> <li><a href="#web-ext-run"><code>web-ext run</code></a></li> <li><a href="#web-ext-sign"><code>web-ext sign</code></a></li> <li><a href="#global-options">Global options</a></li> <li><a href="#setting-option-environment-variables">Setting option environment variables</a></li> <li><a href="#see-also">See also</a></li> </ul> </li> <li> <a href="/documentation/develop/web-ext-command-reference-v7/">web-ext v7 command reference</a><ul class="section"> <li><a href="#commands">Commands</a></li> <li><a href="#global-options">Global options</a></li> <li><a href="#setting-option-environment-variables">Setting option environment variables</a></li> <li><a href="#see-also">See also</a></li> </ul> </li> <li> <a href="https://github.com/hiikezoe/web-ext-webpack-plugin/blob/master/README.md">Web-ext Webpack plug-in</a> </li> <li> <a href="https://github.com/mozilla/webextension-polyfill">Browser API Polyfill</a> </li> <li> <a href="/documentation/develop/extensions-and-the-add-on-id/">Extensions and the Add-on ID</a><ul class="section"> <li><a href="#basic-workflow-with-no-add-on-id">Basic workflow with no add-on ID</a></li> <li><a href="#when-do-you-need-an-add-on-id">When do you need an add-on ID?</a></li> </ul> </li> </ul> </div> <div class="category"> <h6>User Experience</h6> <ul> <li> <a href="/documentation/develop/build-a-secure-extension/">Build a secure extension</a> </li> <li> <a href="/documentation/develop/request-the-right-permissions/">Request the right permissions</a><ul class="section"> <li><a href="#introduction">Introduction</a></li> <li><a href="#advised-permissions">Advised permissions</a></li> <li><a href="#avoid-unnecessary-permissions">Avoid unnecessary permissions</a></li> <li><a href="#request-permissions-at-runtime">Request permissions at runtime</a></li> <li><a href="#add-information-about-permissions-to-your-extensions-amo-page">Add information about permissions to your extensions AMO page</a></li> </ul> </li> <li> <a href="/documentation/develop/best-practices-for-collecting-user-data-consents/">Best practices for collecting user data consents</a><ul class="section"> <li><a href="#know-your-privacy-settings">Know your privacy settings</a></li> <li><a href="#get-prepared">Get prepared</a></li> <li><a href="#create-a-privacy-policy">Create a privacy policy</a></li> <li><a href="#prompt-after-install">Prompt after install</a></li> <li><a href="#determine-your-consent-flow">Determine your consent flow</a></li> <li><a href="#your-consent-dialogs">Your consent dialogs</a></li> </ul> </li> <li> <a href="/documentation/develop/build-an-accessible-extension/">Build an accessible extension</a> </li> <li> <a href="/documentation/develop/onboard-upboard-offboard-users/">Onboard, upboard, offboard users</a><ul class="section"> <li><a href="#onboarding">Onboarding</a></li> <li><a href="#upboarding">Upboarding</a></li> <li><a href="#offboarding">Offboarding</a></li> </ul> </li> <li class="is-active"> <a href="/documentation/develop/user-experience-best-practices/">User experience best practices</a><ul class="section"> <li><a href="#keep-it-focused">1. Keep it focused</a></li> <li><a href="#give-users-what-they-need-where-they-need-it">2. Give users what they need, where they need it</a></li> <li><a href="#keep-the-user-informed">3. Keep the user informed</a></li> <li><a href="#be-firefoxy-in-look-and-feel">4. Be Firefoxy in look and feel</a></li> <li><a href="#great-onboarding-experience">5. Great onboarding experience</a></li> <li><a href="#test-test-and-then-test-again">6. Test, test, and then test again</a></li> </ul> </li> </ul> </div> <div class="category"> <h6>Mobile</h6> <ul> <li> <a href="/documentation/develop/differences-between-desktop-and-android-extensions/">Differences between desktop and Android extensions</a><ul class="section"> <li><a href="#introduction">Introduction</a></li> <li><a href="#user-interface">User interface</a></li> <li><a href="#native-application-interaction">Native application interaction</a></li> <li><a href="#permissions">Permissions</a></li> <li><a href="#storage">Storage</a></li> </ul> </li> <li> <a href="/documentation/develop/user-experience-guidelines-for-mobile-extensions/">User experience guidelines for mobile extensions</a><ul class="section"> <li><a href="#introduction">Introduction</a></li> <li><a href="#the-basics">The basics</a></li> <li><a href="#the-extra-mile">The extra mile</a></li> <li><a href="#the-last-mile">The last mile</a></li> </ul> </li> <li> <a href="/documentation/develop/developing-extensions-for-firefox-for-android/">Developing extensions for Firefox for Android</a><ul class="section"> <li><a href="#set-up-your-computer-and-android-emulator-or-device">Set up your computer and Android emulator or device</a></li> <li><a href="#check-for-firefox-for-android-compatibility">Check for Firefox for Android compatibility</a></li> <li><a href="#install-and-run-your-extension-in-firefox-for-android">Install and run your extension in Firefox for Android</a></li> <li><a href="#debug-your-extension">Debug your extension</a></li> <li><a href="#mv3-compatibility">Manifest V3 compatibility</a></li> </ul> </li> <li> <a href="https://github.com/mozilla/geckoview">GeckoView Extensions (Android library)</a> </li> </ul> </div> <div class="category"> <h6>Port Your Extension</h6> <ul> <li> <a href="/documentation/develop/porting-a-google-chrome-extension/">Porting a Google Chrome Extension</a> </li> </ul> </div> <div class="category"> <h6>Debug and Test</h6> <ul> <li> <a href="/documentation/develop/debugging/">Debugging</a><ul class="section"> <li><a href="#developer-tools-toolbox">Developer tools toolbox</a></li> <li><a href="#debugging-background-scripts">Debugging background scripts</a></li> <li><a href="#debugging-options-pages">Debugging options pages</a></li> <li><a href="#debugging-popups">Debugging popups</a></li> <li><a href="#debugging-content-scripts">Debugging content scripts</a></li> <li><a href="#debugging-sidebars">Debugging sidebars</a></li> <li><a href="#debugging-storage">Debugging storage</a></li> <li><a href="#debugging-developer-tools-pages-and-panels">Debugging developer tools pages and panels</a></li> <li><a href="#debug-permission-requests">Debug permission requests</a></li> <li><a href="#debugging-browser-restarts">Debugging browser restarts</a></li> </ul> </li> <li> <a href="/documentation/develop/temporary-installation-in-firefox/">Temporary Installation in Firefox</a><ul class="section"> <li><a href="#reloading-a-temporary-extension">Reloading a temporary extension</a></li> <li><a href="#using-the-command-line">Using the command line</a></li> <li><a href="#detecting-temporary-installation">Detecting temporary installation</a></li> <li><a href="#limitations">Limitations</a></li> </ul> </li> <li> <a href="/documentation/develop/testing-persistent-and-restart-features/">Testing persistent and restart features</a><ul class="section"> <li><a href="#what-is-an-add-on-id">What is an add-on ID?</a></li> <li><a href="#what-is-a-firefox-profile">What is a Firefox profile?</a></li> <li><a href="#extension-behavior-in-firefox">Extension behavior in Firefox</a></li> <li><a href="#what-do-i-do-to-ensure-i-can-test-my-extension">What do I do to ensure I can test my extension?</a></li> </ul> </li> <li> <a href="/documentation/develop/test-permission-requests/">Test permission requests</a><ul class="section"> <li><a href="#permission-grant-behavior-during-testing">Permission grant behavior during testing</a></li> <li><a href="#observe-or-verify-install-time-permission-requests">Observe or verify install time permission requests</a></li> <li><a href="#retest-runtime-permission-grants">Retest runtime permission grants</a></li> </ul> </li> <li> <a href="/documentation/develop/known-issues/">Known issues</a><ul class="section"> <li><a href="#invisible-content-scripts">Content scripts don't appear in DevTools</a></li> <li><a href="#devtools-updates-missing">Extension source don't update in DevTools</a></li> <li><a href="#android-destroyed-actor">"Destroyed actor" errors when debugging Android</a></li> </ul> </li> </ul> </div> </li> <li class="has-children"> <a href="/documentation/publish/" data-overviewtitle="Publish Overview">Publish</a> <ul class="section"> <li><a href="#get-your-extension-signed">Get your extension signed</a></li> <li><a href="#distribute-your-signed-extension">Distribute your signed extension</a></li> <li><a href="#promote-your-extension">Promote your extension</a></li> </ul> <div class="category"> <h6>Policies</h6> <ul> <li> <a href="/documentation/publish/add-on-policies/">Add-on Policies</a><ul class="section"> <li><a href="#no-surprises">No Surprises</a></li> <li><a href="#content">Content</a></li> <li><a href="#submission-guidelines">Submission Guidelines</a></li> <li><a href="#development-practices">Development Practices</a></li> <li><a href="#data-disclosure-collection-and-management">Data Disclosure, Collection and Management</a></li> <li><a href="#monetization">Monetization</a></li> <li><a href="#security-compliance-and-blocking">Security, Compliance and Blocking</a></li> </ul> </li> <li> <a href="/documentation/publish/firefox-add-on-distribution-agreement/">Firefox Add-on Distribution Agreement</a><ul class="section"> <li><a href="#introduction">1. Introduction</a></li> <li><a href="#accounts">2. Accounts</a></li> <li><a href="#privacy-policy">3. Privacy Policy</a></li> <li><a href="#distribution-certificates-and-review-process">4. Distribution, certificates, & review process</a></li> <li><a href="#your-obligations">5. Your obligations</a></li> <li><a href="#licenses-proprietary-rights">6. Licenses; proprietary rights</a></li> <li><a href="#content-removal">7. Content removal</a></li> <li><a href="#disclaimer-of-warranties">8. Disclaimer of warranties</a></li> <li><a href="#limitation-of-liability">9. Limitation of liability</a></li> <li><a href="#release-idemnification">10. Release; indemnification</a></li> <li><a href="#general-legal-terms">11. General legal terms</a></li> </ul> </li> <li> <a href="/documentation/publish/add-ons-blocking-process/">Add-ons Blocking Process</a><ul class="section"> <li><a href="#security-over-choice">Security Over Choice</a></li> <li><a href="#blocking-criteria">Blocking Criteria</a></li> <li><a href="#developer-outreach">Developer Outreach</a></li> <li><a href="#requesting-a-block">Requesting a Block</a></li> <li><a href="#blocking-other-types-of-third-party-software">Blocking Other Types of Third Party Software</a></li> </ul> </li> <li> <a href="/documentation/publish/third-party-library-usage/">Third Party Library Usage</a><ul class="section"> <li><a href="#when-must-links-for-third-party-libraries-be-provided">When must links for third-party libraries be provided?</a></li> <li><a href="#how-to-determine-the-third-party-library-link">How to determine the third-party library link</a></li> <li><a href="#communicating-third-party-library-links-to-the-reviewer">Communicating third-party library links to reviewers</a></li> </ul> </li> <li> <a href="/documentation/publish/what-does-review-rejection-mean-to-users/">What does review rejection mean to users?</a><ul class="section"> <li><a href="#review-overview">Review overview</a></li> <li><a href="#impact-of-review-rejection">Impact of review rejection</a></li> <li><a href="#blocklisting">Blocklisting</a></li> </ul> </li> </ul> </div> <div class="category"> <h6>Sign</h6> <ul> <li> <a href="/documentation/publish/signing-and-distribution-overview/">Signing and distribution overview</a><ul class="section"> <li><a href="#signing-your-addons">Signing your add-ons</a></li> <li><a href="#distributing-your-addon">Distributing your add-on</a></li> <li><a href="#post-submission-review">Post-submission review</a></li> <li><a href="#about-amo">More information about AMO</a></li> </ul> </li> <li> <a href="/documentation/publish/package-your-extension/">Package your extension</a><ul class="section"> <li><a href="#package-windows">Windows</a></li> <li><a href="#package-mac">Mac OSX</a></li> <li><a href="#package-linux">Linux / Mac OSX Terminal</a></li> </ul> </li> </ul> </div> <div class="category"> <h6>Distribute</h6> <ul> <li> <a href="/documentation/publish/distribute-manifest-versions/">Distribute Manifest V2 and V3 extensions</a> </li> <li> <a href="/documentation/publish/distribute-pre-release-versions/">Distribute pre-release versions</a> </li> <li> <a href="/documentation/publish/submitting-an-add-on/">Submitting an add-on</a><ul class="section"> <li><a href="#listing-on-amo">Listing on AMO</a></li> <li><a href="#self-distribution">Self-distribution</a></li> <li><a href="#get-help">Get help</a></li> </ul> </li> <li> <a href="/documentation/publish/source-code-submission/">Source code submission</a><ul class="section"> <li><a href="#provide-your-extension-source-code">Provide your extension source code</a></li> <li><a href="#default-reviewer-build-environment">Default reviewer build environment</a></li> <li><a href="#use-of-obfuscated-code">Use of obfuscated code</a></li> <li><a href="#source-code-checklist">Source code checklist</a></li> </ul> </li> <li> <a href="/documentation/publish/version-compatibility/">Firefox version compatibility</a><ul class="section"> <li><a href="#compatibility">Version compatibility</a></li> <li><a href="#browser-specific-settings">The `browser_specific_settings` key</a></li> <li><a href="#amo-compatibility">AMO compatibility setting</a></li> <li><a href="#recommendations">Recommendations</a></li> </ul> </li> <li> <a href="/documentation/publish/add-on-ownership/">Add-on ownership</a><ul class="section"> <li><a href="#transfer-ownership">Transfer ownership</a></li> <li><a href="#code-disputes">Code disputes</a></li> </ul> </li> <li> <a href="/documentation/publish/developer-accounts/">Developer accounts</a><ul class="section"> <li><a href="#setting-a-display-name">Setting a display name</a></li> <li><a href="#blocked-accounts">Blocked accounts</a></li> <li><a href="#email-issues">Issues receiving emails from AMO</a></li> </ul> </li> <li> <a href="/documentation/publish/self-distribution/">Self-distribution</a><ul class="section"> <li><a href="#options">Self-distribution options</a></li> </ul> </li> <li> <a href="/documentation/publish/distribute-sideloading/">Sideloading</a><ul class="section"> <li><a href="#preparing-your-addon">Preparing your add-on</a></li> <li><a href="#install-addon-from-file">Install add-on from file</a></li> <li><a href="#standard-extension-folders">Installation using the standard extension folders</a></li> </ul> </li> <li> <a href="/documentation/publish/distribute-for-desktop-apps/">For desktop apps</a> </li> </ul> </div> <div class="category"> <h6>Promote</h6> <ul> <li> <a href="/documentation/develop/create-an-appealing-listing/">Create an appealing listing</a><ul class="section"> <li><a href="#your-add-ons-name">Your add-on’s name</a></li> <li><a href="#create-a-captivating-icon">Create a captivating icon</a></li> <li><a href="#create-a-meaningful-set-of-keywords">Create a meaningful set of keywords</a></li> <li><a href="#make-sure-your-summary-is-just-long-enough">Make sure your summary is just long enough</a></li> <li><a href="#focus-on-key-features-in-your-screenshots">Focus on key features in your screenshots</a></li> <li><a href="#the-add-on-description-can-be-longer-but-not-too-long">The add-on description can be longer, but not too long</a></li> <li><a href="#make-it-local">Make it local</a></li> <li><a href="#make-it-experimental">Make it experimental</a></li> <li><a href="#select-the-right-platforms-and-versions">Select the right platforms and versions</a></li> <li><a href="#categorize-well">Categorize well</a></li> <li><a href="#be-prepared-to-provide-support">Be prepared to provide support</a></li> <li><a href="#set-up-a-developer-profile">Set up a developer profile</a></li> <li><a href="#use-plain-language-in-any-privacy-policy-or-license-agreement">Use plain language in any privacy policy or license agreement</a></li> <li><a href="#gently-ask-for-a-review">Gently ask for a review</a></li> <li><a href="#some-other-points">Some other points</a></li> </ul> </li> <li> <a href="https://www.youtube.com/watch?v=a0_OsLGI0k4">What’s great content and design?</a> </li> <li> <a href="/documentation/publish/promoting-your-extension/">Promoting your extension</a><ul class="section"> <li><a href="#promote-your-addon">Promote your add-on from your website</a></li> <li><a href="#friends-family-colleagues">Friends, family, and colleagues</a></li> <li><a href="#events-and-meetups">Events and meetups</a></li> <li><a href="#current-users">Current users</a></li> <li><a href="#social-media">Social media</a></li> <li><a href="#engage-with-users">Engage with your users</a></li> <li><a href="#create-a-forum">Create a forum, user group, or similar</a></li> <li><a href="#engage-with-media">Engage with bloggers and news media</a></li> <li><a href="#advertising">Advertising</a></li> </ul> </li> <li> <a href="/documentation/publish/make-money-from-browser-extensions/">Make money from browser extensions</a><ul class="section"> <li><a href="#sell-through-AMO">Will I ever be able to sell through AMO?</a></li> <li><a href="#what-cant-you-do">What can't you do</a></li> <li><a href="#what-can-you-do">What can you do</a></li> <li><a href="#unsolicited-offers">Unsolicited offers</a></li> <li><a href="#maximize-income">How can I maximize my income?</a></li> </ul> </li> <li> <a href="/documentation/publish/recommended-extensions/">Recommended extensions</a><ul class="section"> <li><a href="#overview">Overview</a></li> <li><a href="#criteria">Criteria for Recommended extensions</a></li> <li><a href="#partnership">Developer partnership</a></li> <li><a href="#selection">Selection process</a></li> </ul> </li> </ul> </div> </li> <li class="has-children"> <a href="/documentation/manage/" data-overviewtitle="Manage Overview">Manage</a> <ul class="section"> <li><a href="#stay-informed-when-firefox-changes">Stay informed when Firefox changes</a></li> <li><a href="#publish-extension-updates">Publish extension updates</a></li> <li><a href="#manage-authors-of-your-extension">Manage authors of your extension</a></li> <li><a href="#promote-your-extension">Promote your extension</a></li> <li><a href="#removing-your-extension-from-distribution">Removing your extension from distribution</a></li> </ul> <div class="category"> <h6>Resources</h6> <ul> <li> <a href="/documentation/manage/updating-your-extension/">Updating your extension</a><ul class="section"> <li><a href="#enable-update">Enabling updates to your extension</a></li> <li><a href="#manifest-structure">Manifest structure</a></li> <li><a href="#testing-automatic-updating">Testing automatic updating</a></li> </ul> </li> <li> <a href="/documentation/manage/best-practices-for-updating/">Best practices for updating your extension</a> </li> <li> <a href="/documentation/manage/monitoring-extension-usage-statistics/">Monitoring extension usage statistics</a><ul class="section"> <li><a href="#accessing-the-statistics-dashboard">Accessing the statistics dashboard</a></li> <li><a href="#tracking-external-sources">Tracking external sources</a></li> <li><a href="#add-on-listing-example">Add-on listing example</a></li> </ul> </li> <li> <a href="/documentation/manage/resources-for-publishers/">Resources for publishers</a> </li> <li> <a href="/documentation/manage/retiring-your-extension/">Retiring your extension</a><ul class="section"> <li><a href="#reasons-for-withdrawing">Reasons for withdrawing your extension</a></li> <li><a href="#steps-to-retiring-an-extension">Steps to retiring an extension</a></li> <li><a href="#suggested-retirement-timetable">Suggested retirement timetable</a></li> </ul> </li> </ul> </div> </li> <li class="has-children"> <a href="/documentation/enterprise/" data-overviewtitle="Enterprise Overview">Enterprise</a> <ul class="section"> <li><a href="#developing-your-enterprise-extension">Developing your enterprise extension</a></li> <li><a href="#distributing-your-enterprise-extension">Distributing your enterprise extension</a></li> </ul> <div class="category"> <h6>Enterprise support</h6> <ul> <li> <a href="https://support.mozilla.org/products/firefox-enterprise/policies-customization-enterprise/manage-add-ons-enterprise">Manage add-ons for Firefox for Enterprise</a> </li> <li> <a href="https://support.mozilla.org/kb/install-system-add-ons-firefox-enterprise">Install system add-ons for Firefox for Enterprise</a> </li> </ul> </div> <div class="category"> <h6>Enterprise resources</h6> <ul> <li> <a href="/documentation/enterprise/enterprise-development/">Enterprise development</a><ul class="section"> <li><a href="#enterprise-consent">Data collection disclosure and consent for enterprise extensions</a></li> <li><a href="#how-to-add-policy">How to add policy support</a></li> <li><a href="#distributing-your-policy">Distributing your policy</a></li> </ul> </li> <li> <a href="/documentation/enterprise/enterprise-policies-that-impact-extensions/">Enterprise policies that impact extensions</a><ul class="section"> <li><a href="#relevant-policies">Relevant policies</a></li> <li><a href="#other-relevant-policies">Other relevant policies</a></li> </ul> </li> <li> <a href="/documentation/enterprise/enterprise-distribution/">Enterprise distribution</a><ul class="section"> <li><a href="#signed-vs-unsigned">Signed vs. unsigned extensions</a></li> <li><a href="#using-an-extensionsettings-policy">Using an ExtensionSettings policy</a></li> <li><a href="#bundling-add-ons-with-custom-Firefox">Bundling add-ons with a custom Firefox</a></li> </ul> </li> </ul> </div> </li> <li class="has-children"> <a href="/documentation/themes/" data-overviewtitle="Themes Overview">Themes</a> <div class="category"> <h6>Creating themes</h6> <ul> <li> <a href="/documentation/themes/using-the-amo-theme-generator/">Using the AMO theme generator</a><ul class="section"> <li><a href="#getting-started">Getting started</a></li> <li><a href="#submitting-your-theme">Submitting your theme</a></li> <li><a href="#updating-your-theme">Updating your theme</a></li> </ul> </li> <li> <a href="/documentation/themes/static-themes/">Static themes</a><ul class="section"> <li><a href="#introduction">Introduction</a></li> <li><a href="#create-a-simple-static-theme">Create a simple static theme</a></li> <li><a href="#updating-static-themes">Updating static themes</a></li> <li><a href="#single-image-themes">Single image themes</a></li> <li><a href="#multiple-image-themes">Multiple image themes</a></li> <li><a href="#static-animated-themes">Static animated themes</a></li> </ul> </li> <li> <a href="/documentation/themes/dynamic-themes/">Dynamic themes</a><ul class="section"> <li><a href="#introduction">Introduction</a></li> <li><a href="#creating-dynamic-themes">Creating dynamic themes</a></li> <li><a href="#publishing-dynamic-themes">Publishing dynamic themes</a></li> </ul> </li> <li> <a href="/documentation/themes/cross-browser-compatibility/">Cross-browser compatibility</a> </li> </ul> </div> </li> </ul> </li><li class="has-children"> <a href="/community/" data-overviewtitle="Community Overview">Community</a> <ul class="section"> <li><a href="#who-is-part-of-the-community">Who is part of the community?</a></li> <li><a href="#connect-with-the-community">Connect with the community</a></li> <li><a href="#get-involved-in-the-community">Get involved in the community</a></li> </ul> <div class="category"> <h6>Get in touch</h6> <ul> <li> <a href="https://discourse.mozilla.org/c/add-ons">Community Forum</a> </li> <li> <a href="https://blog.mozilla.org/addons/">Add-ons Blog</a> </li> <li> <a href="/community/#office-hours">Office Hours</a> </li> <li> <a href="https://stackoverflow.com/tags/firefox-addon">Stack Overflow</a> </li> <li> <a href="https://calendar.google.com/calendar?cid=bW96aWxsYS5jb21fb2ZqbGN0MDdrMTc4NHYxdTUxYnFrNDc2YmtAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ">Communication Calendar</a> </li> <li> <a href="https://mail.mozilla.org/listinfo/dev-addons">Dev Mailing List</a> </li> </ul> </div><div class="category"> <h6>Contribute</h6> <ul> <li> <a href="https://wiki.mozilla.org/Add-ons/Contribute">Contribution opportunities</a> </li> <li> <a href="https://wiki.mozilla.org/WebExtensions/Contribution_Onramp">Onboard to the WebExtensions codebase</a> </li> <li> <a href="https://wiki.mozilla.org/WebExtensions/Hacking">Hacking guide for WebExtensions code contributions</a> </li> <li> <a href="https://webextensions-experiments.readthedocs.io/">WebExtensions Experiments</a> </li> <li> <a href="https://bugzilla.mozilla.org">Find or create a bug</a> </li> </ul> </div> </li> </ul> </div> <div class="sidenav-detail"><ul class="primary"><li> <a href="/extension-basics/" data-overviewtitle="Extension Basics Overview">Extension Basics</a> <ul class="section"> <li><a href="#getting-started">Getting started</a></li> <li><a href="#mozilla-developer-network">Mozilla Developer Network</a></li> </ul> </li> <li class="has-children has-subfolder"> <span class="label">Documentation Topics</span> <ul class="subfolder"> <li class="has-children"> <a href="/documentation/develop/" data-overviewtitle="Develop Overview">Develop</a> <ul class="section"> <li><a href="#firefox-tools">Firefox Tools</a></li> <li><a href="#user-experience">User Experience</a></li> <li><a href="#firefox-for-android">Firefox for Android</a></li> <li><a href="#port-to-firefox">Port to Firefox</a></li> <li><a href="#test-and-debug">Test and debug</a></li> </ul> <div class="category"> <h6>Getting Started</h6> <ul> <li> <a href="/documentation/develop/unique-firefox-capabilities/">Unique Firefox Capabilities</a> </li> <li> <a href="/documentation/develop/firefox-workflow-overview/">Firefox Workflow Overview</a> </li> <li> <a href="/documentation/develop/about-the-webextensions-api/">About the WebExtensions API</a> </li> </ul> </div> <div class="category"> <h6>Manifest V3</h6> <ul> <li> <a href="/documentation/develop/manifest-v3-migration-guide/">Manifest V3 migration guide</a><ul class="section"> <li><a href="#what-is-manifest-v3">What is Manifest V3?</a></li> <li><a href="#developer-preview-changes">Manifest V3 changes</a></li> <li><a href="#migration-checklist">Migration checklist</a></li> </ul> </li> </ul> </div> <div class="category"> <h6>Cross-Browser Development</h6> <ul> <li> <a href="/documentation/develop/browser-compatibility/">Browser Compatibility</a><ul class="section"> <li><a href="#namespace">Namespace</a></li> <li><a href="#asynchronous">Asynchronous</a></li> <li><a href="#api-coverage">API Coverage</a></li> <li><a href="#manifest-keys">Manifest keys</a></li> <li><a href="#more-information">More information</a></li> </ul> </li> <li> <a href="https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/Build_a_cross_browser_extension">Build cross-browser extensions</a> </li> </ul> </div> <div class="category"> <h6>Firefox Tools</h6> <ul> <li> <a href="https://www.youtube.com/watch?v=Q3AQ5D2QFwc">Build an extension in 5 minutes</a> </li> <li> <a href="/documentation/develop/browser-extension-development-tools/">Browser Extension Development Tools</a><ul class="section"> <li><a href="#boilerplating-tools">Boilerplating tools</a></li> <li><a href="#coding-tools">Coding tools</a></li> <li><a href="#testing-and-debugging-tools">Testing and debugging tools</a></li> <li><a href="#translation-tools">Translation tools</a></li> <li><a href="#tools-for-firefox-for-android">Tools for Firefox for Android</a></li> </ul> </li> <li> <a href="/documentation/develop/choosing-a-firefox-version-for-extension-development/">Choosing a Firefox version for extension development</a><ul class="section"> <li><a href="#firefox-editions">Firefox editions</a></li> <li><a href="#firefox-version-and-their-web-extension-development-capabilities">Firefox version and their web extension development capabilities</a></li> </ul> </li> <li> <a href="/documentation/develop/getting-started-with-web-ext/">Getting started with web-ext</a><ul class="section"> <li><a href="#installation-section">Installation</a></li> <li><a href="#update-section">Update</a></li> <li><a href="#using-web-ext-section">Using web-ext</a></li> <li><a href="#check-with-lint">Check your code</a></li> <li><a href="#test-and-degug-an-extention">Test and debug</a></li> <li><a href="#package-sign-and-publish-an-extension">Package, sign, and publish</a></li> <li><a href="#use-the-configuration-file">Use the configuration file</a></li> <li><a href="#advanced-topics">Advanced topics</a></li> <li><a href="#see-also-section">See also</a></li> </ul> </li> <li> <a href="/documentation/develop/web-ext-command-reference/">web-ext v8 command reference</a><ul class="section"> <li><a href="#whats-new">What's new</a></li> <li><a href="#commands">Commands</a></li> <li><a href="#web-ext-build"><code>web-ext build</code></a></li> <li><a href="#web-ext-docs"><code>web-ext docs</code></a></li> <li><a href="#web-ext-dump-config"><code>web-ext dump-config</code></a></li> <li><a href="#web-ext-lint"><code>web-ext lint</code></a></li> <li><a href="#web-ext-run"><code>web-ext run</code></a></li> <li><a href="#web-ext-sign"><code>web-ext sign</code></a></li> <li><a href="#global-options">Global options</a></li> <li><a href="#setting-option-environment-variables">Setting option environment variables</a></li> <li><a href="#see-also">See also</a></li> </ul> </li> <li> <a href="/documentation/develop/web-ext-command-reference-v7/">web-ext v7 command reference</a><ul class="section"> <li><a href="#commands">Commands</a></li> <li><a href="#global-options">Global options</a></li> <li><a href="#setting-option-environment-variables">Setting option environment variables</a></li> <li><a href="#see-also">See also</a></li> </ul> </li> <li> <a href="https://github.com/hiikezoe/web-ext-webpack-plugin/blob/master/README.md">Web-ext Webpack plug-in</a> </li> <li> <a href="https://github.com/mozilla/webextension-polyfill">Browser API Polyfill</a> </li> <li> <a href="/documentation/develop/extensions-and-the-add-on-id/">Extensions and the Add-on ID</a><ul class="section"> <li><a href="#basic-workflow-with-no-add-on-id">Basic workflow with no add-on ID</a></li> <li><a href="#when-do-you-need-an-add-on-id">When do you need an add-on ID?</a></li> </ul> </li> </ul> </div> <div class="category"> <h6>User Experience</h6> <ul> <li> <a href="/documentation/develop/build-a-secure-extension/">Build a secure extension</a> </li> <li> <a href="/documentation/develop/request-the-right-permissions/">Request the right permissions</a><ul class="section"> <li><a href="#introduction">Introduction</a></li> <li><a href="#advised-permissions">Advised permissions</a></li> <li><a href="#avoid-unnecessary-permissions">Avoid unnecessary permissions</a></li> <li><a href="#request-permissions-at-runtime">Request permissions at runtime</a></li> <li><a href="#add-information-about-permissions-to-your-extensions-amo-page">Add information about permissions to your extensions AMO page</a></li> </ul> </li> <li> <a href="/documentation/develop/best-practices-for-collecting-user-data-consents/">Best practices for collecting user data consents</a><ul class="section"> <li><a href="#know-your-privacy-settings">Know your privacy settings</a></li> <li><a href="#get-prepared">Get prepared</a></li> <li><a href="#create-a-privacy-policy">Create a privacy policy</a></li> <li><a href="#prompt-after-install">Prompt after install</a></li> <li><a href="#determine-your-consent-flow">Determine your consent flow</a></li> <li><a href="#your-consent-dialogs">Your consent dialogs</a></li> </ul> </li> <li> <a href="/documentation/develop/build-an-accessible-extension/">Build an accessible extension</a> </li> <li> <a href="/documentation/develop/onboard-upboard-offboard-users/">Onboard, upboard, offboard users</a><ul class="section"> <li><a href="#onboarding">Onboarding</a></li> <li><a href="#upboarding">Upboarding</a></li> <li><a href="#offboarding">Offboarding</a></li> </ul> </li> <li class="is-active"> <a href="/documentation/develop/user-experience-best-practices/">User experience best practices</a><ul class="section"> <li><a href="#keep-it-focused">1. Keep it focused</a></li> <li><a href="#give-users-what-they-need-where-they-need-it">2. Give users what they need, where they need it</a></li> <li><a href="#keep-the-user-informed">3. Keep the user informed</a></li> <li><a href="#be-firefoxy-in-look-and-feel">4. Be Firefoxy in look and feel</a></li> <li><a href="#great-onboarding-experience">5. Great onboarding experience</a></li> <li><a href="#test-test-and-then-test-again">6. Test, test, and then test again</a></li> </ul> </li> </ul> </div> <div class="category"> <h6>Mobile</h6> <ul> <li> <a href="/documentation/develop/differences-between-desktop-and-android-extensions/">Differences between desktop and Android extensions</a><ul class="section"> <li><a href="#introduction">Introduction</a></li> <li><a href="#user-interface">User interface</a></li> <li><a href="#native-application-interaction">Native application interaction</a></li> <li><a href="#permissions">Permissions</a></li> <li><a href="#storage">Storage</a></li> </ul> </li> <li> <a href="/documentation/develop/user-experience-guidelines-for-mobile-extensions/">User experience guidelines for mobile extensions</a><ul class="section"> <li><a href="#introduction">Introduction</a></li> <li><a href="#the-basics">The basics</a></li> <li><a href="#the-extra-mile">The extra mile</a></li> <li><a href="#the-last-mile">The last mile</a></li> </ul> </li> <li> <a href="/documentation/develop/developing-extensions-for-firefox-for-android/">Developing extensions for Firefox for Android</a><ul class="section"> <li><a href="#set-up-your-computer-and-android-emulator-or-device">Set up your computer and Android emulator or device</a></li> <li><a href="#check-for-firefox-for-android-compatibility">Check for Firefox for Android compatibility</a></li> <li><a href="#install-and-run-your-extension-in-firefox-for-android">Install and run your extension in Firefox for Android</a></li> <li><a href="#debug-your-extension">Debug your extension</a></li> <li><a href="#mv3-compatibility">Manifest V3 compatibility</a></li> </ul> </li> <li> <a href="https://github.com/mozilla/geckoview">GeckoView Extensions (Android library)</a> </li> </ul> </div> <div class="category"> <h6>Port Your Extension</h6> <ul> <li> <a href="/documentation/develop/porting-a-google-chrome-extension/">Porting a Google Chrome Extension</a> </li> </ul> </div> <div class="category"> <h6>Debug and Test</h6> <ul> <li> <a href="/documentation/develop/debugging/">Debugging</a><ul class="section"> <li><a href="#developer-tools-toolbox">Developer tools toolbox</a></li> <li><a href="#debugging-background-scripts">Debugging background scripts</a></li> <li><a href="#debugging-options-pages">Debugging options pages</a></li> <li><a href="#debugging-popups">Debugging popups</a></li> <li><a href="#debugging-content-scripts">Debugging content scripts</a></li> <li><a href="#debugging-sidebars">Debugging sidebars</a></li> <li><a href="#debugging-storage">Debugging storage</a></li> <li><a href="#debugging-developer-tools-pages-and-panels">Debugging developer tools pages and panels</a></li> <li><a href="#debug-permission-requests">Debug permission requests</a></li> <li><a href="#debugging-browser-restarts">Debugging browser restarts</a></li> </ul> </li> <li> <a href="/documentation/develop/temporary-installation-in-firefox/">Temporary Installation in Firefox</a><ul class="section"> <li><a href="#reloading-a-temporary-extension">Reloading a temporary extension</a></li> <li><a href="#using-the-command-line">Using the command line</a></li> <li><a href="#detecting-temporary-installation">Detecting temporary installation</a></li> <li><a href="#limitations">Limitations</a></li> </ul> </li> <li> <a href="/documentation/develop/testing-persistent-and-restart-features/">Testing persistent and restart features</a><ul class="section"> <li><a href="#what-is-an-add-on-id">What is an add-on ID?</a></li> <li><a href="#what-is-a-firefox-profile">What is a Firefox profile?</a></li> <li><a href="#extension-behavior-in-firefox">Extension behavior in Firefox</a></li> <li><a href="#what-do-i-do-to-ensure-i-can-test-my-extension">What do I do to ensure I can test my extension?</a></li> </ul> </li> <li> <a href="/documentation/develop/test-permission-requests/">Test permission requests</a><ul class="section"> <li><a href="#permission-grant-behavior-during-testing">Permission grant behavior during testing</a></li> <li><a href="#observe-or-verify-install-time-permission-requests">Observe or verify install time permission requests</a></li> <li><a href="#retest-runtime-permission-grants">Retest runtime permission grants</a></li> </ul> </li> <li> <a href="/documentation/develop/known-issues/">Known issues</a><ul class="section"> <li><a href="#invisible-content-scripts">Content scripts don't appear in DevTools</a></li> <li><a href="#devtools-updates-missing">Extension source don't update in DevTools</a></li> <li><a href="#android-destroyed-actor">"Destroyed actor" errors when debugging Android</a></li> </ul> </li> </ul> </div> </li> <li class="has-children"> <a href="/documentation/publish/" data-overviewtitle="Publish Overview">Publish</a> <ul class="section"> <li><a href="#get-your-extension-signed">Get your extension signed</a></li> <li><a href="#distribute-your-signed-extension">Distribute your signed extension</a></li> <li><a href="#promote-your-extension">Promote your extension</a></li> </ul> <div class="category"> <h6>Policies</h6> <ul> <li> <a href="/documentation/publish/add-on-policies/">Add-on Policies</a><ul class="section"> <li><a href="#no-surprises">No Surprises</a></li> <li><a href="#content">Content</a></li> <li><a href="#submission-guidelines">Submission Guidelines</a></li> <li><a href="#development-practices">Development Practices</a></li> <li><a href="#data-disclosure-collection-and-management">Data Disclosure, Collection and Management</a></li> <li><a href="#monetization">Monetization</a></li> <li><a href="#security-compliance-and-blocking">Security, Compliance and Blocking</a></li> </ul> </li> <li> <a href="/documentation/publish/firefox-add-on-distribution-agreement/">Firefox Add-on Distribution Agreement</a><ul class="section"> <li><a href="#introduction">1. Introduction</a></li> <li><a href="#accounts">2. Accounts</a></li> <li><a href="#privacy-policy">3. Privacy Policy</a></li> <li><a href="#distribution-certificates-and-review-process">4. Distribution, certificates, & review process</a></li> <li><a href="#your-obligations">5. Your obligations</a></li> <li><a href="#licenses-proprietary-rights">6. Licenses; proprietary rights</a></li> <li><a href="#content-removal">7. Content removal</a></li> <li><a href="#disclaimer-of-warranties">8. Disclaimer of warranties</a></li> <li><a href="#limitation-of-liability">9. Limitation of liability</a></li> <li><a href="#release-idemnification">10. Release; indemnification</a></li> <li><a href="#general-legal-terms">11. General legal terms</a></li> </ul> </li> <li> <a href="/documentation/publish/add-ons-blocking-process/">Add-ons Blocking Process</a><ul class="section"> <li><a href="#security-over-choice">Security Over Choice</a></li> <li><a href="#blocking-criteria">Blocking Criteria</a></li> <li><a href="#developer-outreach">Developer Outreach</a></li> <li><a href="#requesting-a-block">Requesting a Block</a></li> <li><a href="#blocking-other-types-of-third-party-software">Blocking Other Types of Third Party Software</a></li> </ul> </li> <li> <a href="/documentation/publish/third-party-library-usage/">Third Party Library Usage</a><ul class="section"> <li><a href="#when-must-links-for-third-party-libraries-be-provided">When must links for third-party libraries be provided?</a></li> <li><a href="#how-to-determine-the-third-party-library-link">How to determine the third-party library link</a></li> <li><a href="#communicating-third-party-library-links-to-the-reviewer">Communicating third-party library links to reviewers</a></li> </ul> </li> <li> <a href="/documentation/publish/what-does-review-rejection-mean-to-users/">What does review rejection mean to users?</a><ul class="section"> <li><a href="#review-overview">Review overview</a></li> <li><a href="#impact-of-review-rejection">Impact of review rejection</a></li> <li><a href="#blocklisting">Blocklisting</a></li> </ul> </li> </ul> </div> <div class="category"> <h6>Sign</h6> <ul> <li> <a href="/documentation/publish/signing-and-distribution-overview/">Signing and distribution overview</a><ul class="section"> <li><a href="#signing-your-addons">Signing your add-ons</a></li> <li><a href="#distributing-your-addon">Distributing your add-on</a></li> <li><a href="#post-submission-review">Post-submission review</a></li> <li><a href="#about-amo">More information about AMO</a></li> </ul> </li> <li> <a href="/documentation/publish/package-your-extension/">Package your extension</a><ul class="section"> <li><a href="#package-windows">Windows</a></li> <li><a href="#package-mac">Mac OSX</a></li> <li><a href="#package-linux">Linux / Mac OSX Terminal</a></li> </ul> </li> </ul> </div> <div class="category"> <h6>Distribute</h6> <ul> <li> <a href="/documentation/publish/distribute-manifest-versions/">Distribute Manifest V2 and V3 extensions</a> </li> <li> <a href="/documentation/publish/distribute-pre-release-versions/">Distribute pre-release versions</a> </li> <li> <a href="/documentation/publish/submitting-an-add-on/">Submitting an add-on</a><ul class="section"> <li><a href="#listing-on-amo">Listing on AMO</a></li> <li><a href="#self-distribution">Self-distribution</a></li> <li><a href="#get-help">Get help</a></li> </ul> </li> <li> <a href="/documentation/publish/source-code-submission/">Source code submission</a><ul class="section"> <li><a href="#provide-your-extension-source-code">Provide your extension source code</a></li> <li><a href="#default-reviewer-build-environment">Default reviewer build environment</a></li> <li><a href="#use-of-obfuscated-code">Use of obfuscated code</a></li> <li><a href="#source-code-checklist">Source code checklist</a></li> </ul> </li> <li> <a href="/documentation/publish/version-compatibility/">Firefox version compatibility</a><ul class="section"> <li><a href="#compatibility">Version compatibility</a></li> <li><a href="#browser-specific-settings">The `browser_specific_settings` key</a></li> <li><a href="#amo-compatibility">AMO compatibility setting</a></li> <li><a href="#recommendations">Recommendations</a></li> </ul> </li> <li> <a href="/documentation/publish/add-on-ownership/">Add-on ownership</a><ul class="section"> <li><a href="#transfer-ownership">Transfer ownership</a></li> <li><a href="#code-disputes">Code disputes</a></li> </ul> </li> <li> <a href="/documentation/publish/developer-accounts/">Developer accounts</a><ul class="section"> <li><a href="#setting-a-display-name">Setting a display name</a></li> <li><a href="#blocked-accounts">Blocked accounts</a></li> <li><a href="#email-issues">Issues receiving emails from AMO</a></li> </ul> </li> <li> <a href="/documentation/publish/self-distribution/">Self-distribution</a><ul class="section"> <li><a href="#options">Self-distribution options</a></li> </ul> </li> <li> <a href="/documentation/publish/distribute-sideloading/">Sideloading</a><ul class="section"> <li><a href="#preparing-your-addon">Preparing your add-on</a></li> <li><a href="#install-addon-from-file">Install add-on from file</a></li> <li><a href="#standard-extension-folders">Installation using the standard extension folders</a></li> </ul> </li> <li> <a href="/documentation/publish/distribute-for-desktop-apps/">For desktop apps</a> </li> </ul> </div> <div class="category"> <h6>Promote</h6> <ul> <li> <a href="/documentation/develop/create-an-appealing-listing/">Create an appealing listing</a><ul class="section"> <li><a href="#your-add-ons-name">Your add-on’s name</a></li> <li><a href="#create-a-captivating-icon">Create a captivating icon</a></li> <li><a href="#create-a-meaningful-set-of-keywords">Create a meaningful set of keywords</a></li> <li><a href="#make-sure-your-summary-is-just-long-enough">Make sure your summary is just long enough</a></li> <li><a href="#focus-on-key-features-in-your-screenshots">Focus on key features in your screenshots</a></li> <li><a href="#the-add-on-description-can-be-longer-but-not-too-long">The add-on description can be longer, but not too long</a></li> <li><a href="#make-it-local">Make it local</a></li> <li><a href="#make-it-experimental">Make it experimental</a></li> <li><a href="#select-the-right-platforms-and-versions">Select the right platforms and versions</a></li> <li><a href="#categorize-well">Categorize well</a></li> <li><a href="#be-prepared-to-provide-support">Be prepared to provide support</a></li> <li><a href="#set-up-a-developer-profile">Set up a developer profile</a></li> <li><a href="#use-plain-language-in-any-privacy-policy-or-license-agreement">Use plain language in any privacy policy or license agreement</a></li> <li><a href="#gently-ask-for-a-review">Gently ask for a review</a></li> <li><a href="#some-other-points">Some other points</a></li> </ul> </li> <li> <a href="https://www.youtube.com/watch?v=a0_OsLGI0k4">What’s great content and design?</a> </li> <li> <a href="/documentation/publish/promoting-your-extension/">Promoting your extension</a><ul class="section"> <li><a href="#promote-your-addon">Promote your add-on from your website</a></li> <li><a href="#friends-family-colleagues">Friends, family, and colleagues</a></li> <li><a href="#events-and-meetups">Events and meetups</a></li> <li><a href="#current-users">Current users</a></li> <li><a href="#social-media">Social media</a></li> <li><a href="#engage-with-users">Engage with your users</a></li> <li><a href="#create-a-forum">Create a forum, user group, or similar</a></li> <li><a href="#engage-with-media">Engage with bloggers and news media</a></li> <li><a href="#advertising">Advertising</a></li> </ul> </li> <li> <a href="/documentation/publish/make-money-from-browser-extensions/">Make money from browser extensions</a><ul class="section"> <li><a href="#sell-through-AMO">Will I ever be able to sell through AMO?</a></li> <li><a href="#what-cant-you-do">What can't you do</a></li> <li><a href="#what-can-you-do">What can you do</a></li> <li><a href="#unsolicited-offers">Unsolicited offers</a></li> <li><a href="#maximize-income">How can I maximize my income?</a></li> </ul> </li> <li> <a href="/documentation/publish/recommended-extensions/">Recommended extensions</a><ul class="section"> <li><a href="#overview">Overview</a></li> <li><a href="#criteria">Criteria for Recommended extensions</a></li> <li><a href="#partnership">Developer partnership</a></li> <li><a href="#selection">Selection process</a></li> </ul> </li> </ul> </div> </li> <li class="has-children"> <a href="/documentation/manage/" data-overviewtitle="Manage Overview">Manage</a> <ul class="section"> <li><a href="#stay-informed-when-firefox-changes">Stay informed when Firefox changes</a></li> <li><a href="#publish-extension-updates">Publish extension updates</a></li> <li><a href="#manage-authors-of-your-extension">Manage authors of your extension</a></li> <li><a href="#promote-your-extension">Promote your extension</a></li> <li><a href="#removing-your-extension-from-distribution">Removing your extension from distribution</a></li> </ul> <div class="category"> <h6>Resources</h6> <ul> <li> <a href="/documentation/manage/updating-your-extension/">Updating your extension</a><ul class="section"> <li><a href="#enable-update">Enabling updates to your extension</a></li> <li><a href="#manifest-structure">Manifest structure</a></li> <li><a href="#testing-automatic-updating">Testing automatic updating</a></li> </ul> </li> <li> <a href="/documentation/manage/best-practices-for-updating/">Best practices for updating your extension</a> </li> <li> <a href="/documentation/manage/monitoring-extension-usage-statistics/">Monitoring extension usage statistics</a><ul class="section"> <li><a href="#accessing-the-statistics-dashboard">Accessing the statistics dashboard</a></li> <li><a href="#tracking-external-sources">Tracking external sources</a></li> <li><a href="#add-on-listing-example">Add-on listing example</a></li> </ul> </li> <li> <a href="/documentation/manage/resources-for-publishers/">Resources for publishers</a> </li> <li> <a href="/documentation/manage/retiring-your-extension/">Retiring your extension</a><ul class="section"> <li><a href="#reasons-for-withdrawing">Reasons for withdrawing your extension</a></li> <li><a href="#steps-to-retiring-an-extension">Steps to retiring an extension</a></li> <li><a href="#suggested-retirement-timetable">Suggested retirement timetable</a></li> </ul> </li> </ul> </div> </li> <li class="has-children"> <a href="/documentation/enterprise/" data-overviewtitle="Enterprise Overview">Enterprise</a> <ul class="section"> <li><a href="#developing-your-enterprise-extension">Developing your enterprise extension</a></li> <li><a href="#distributing-your-enterprise-extension">Distributing your enterprise extension</a></li> </ul> <div class="category"> <h6>Enterprise support</h6> <ul> <li> <a href="https://support.mozilla.org/products/firefox-enterprise/policies-customization-enterprise/manage-add-ons-enterprise">Manage add-ons for Firefox for Enterprise</a> </li> <li> <a href="https://support.mozilla.org/kb/install-system-add-ons-firefox-enterprise">Install system add-ons for Firefox for Enterprise</a> </li> </ul> </div> <div class="category"> <h6>Enterprise resources</h6> <ul> <li> <a href="/documentation/enterprise/enterprise-development/">Enterprise development</a><ul class="section"> <li><a href="#enterprise-consent">Data collection disclosure and consent for enterprise extensions</a></li> <li><a href="#how-to-add-policy">How to add policy support</a></li> <li><a href="#distributing-your-policy">Distributing your policy</a></li> </ul> </li> <li> <a href="/documentation/enterprise/enterprise-policies-that-impact-extensions/">Enterprise policies that impact extensions</a><ul class="section"> <li><a href="#relevant-policies">Relevant policies</a></li> <li><a href="#other-relevant-policies">Other relevant policies</a></li> </ul> </li> <li> <a href="/documentation/enterprise/enterprise-distribution/">Enterprise distribution</a><ul class="section"> <li><a href="#signed-vs-unsigned">Signed vs. unsigned extensions</a></li> <li><a href="#using-an-extensionsettings-policy">Using an ExtensionSettings policy</a></li> <li><a href="#bundling-add-ons-with-custom-Firefox">Bundling add-ons with a custom Firefox</a></li> </ul> </li> </ul> </div> </li> <li class="has-children"> <a href="/documentation/themes/" data-overviewtitle="Themes Overview">Themes</a> <div class="category"> <h6>Creating themes</h6> <ul> <li> <a href="/documentation/themes/using-the-amo-theme-generator/">Using the AMO theme generator</a><ul class="section"> <li><a href="#getting-started">Getting started</a></li> <li><a href="#submitting-your-theme">Submitting your theme</a></li> <li><a href="#updating-your-theme">Updating your theme</a></li> </ul> </li> <li> <a href="/documentation/themes/static-themes/">Static themes</a><ul class="section"> <li><a href="#introduction">Introduction</a></li> <li><a href="#create-a-simple-static-theme">Create a simple static theme</a></li> <li><a href="#updating-static-themes">Updating static themes</a></li> <li><a href="#single-image-themes">Single image themes</a></li> <li><a href="#multiple-image-themes">Multiple image themes</a></li> <li><a href="#static-animated-themes">Static animated themes</a></li> </ul> </li> <li> <a href="/documentation/themes/dynamic-themes/">Dynamic themes</a><ul class="section"> <li><a href="#introduction">Introduction</a></li> <li><a href="#creating-dynamic-themes">Creating dynamic themes</a></li> <li><a href="#publishing-dynamic-themes">Publishing dynamic themes</a></li> </ul> </li> <li> <a href="/documentation/themes/cross-browser-compatibility/">Cross-browser compatibility</a> </li> </ul> </div> </li> </ul> </li><li class="has-children"> <a href="/community/" data-overviewtitle="Community Overview">Community</a> <ul class="section"> <li><a href="#who-is-part-of-the-community">Who is part of the community?</a></li> <li><a href="#connect-with-the-community">Connect with the community</a></li> <li><a href="#get-involved-in-the-community">Get involved in the community</a></li> </ul> <div class="category"> <h6>Get in touch</h6> <ul> <li> <a href="https://discourse.mozilla.org/c/add-ons">Community Forum</a> </li> <li> <a href="https://blog.mozilla.org/addons/">Add-ons Blog</a> </li> <li> <a href="/community/#office-hours">Office Hours</a> </li> <li> <a href="https://stackoverflow.com/tags/firefox-addon">Stack Overflow</a> </li> <li> <a href="https://calendar.google.com/calendar?cid=bW96aWxsYS5jb21fb2ZqbGN0MDdrMTc4NHYxdTUxYnFrNDc2YmtAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ">Communication Calendar</a> </li> <li> <a href="https://mail.mozilla.org/listinfo/dev-addons">Dev Mailing List</a> </li> </ul> </div><div class="category"> <h6>Contribute</h6> <ul> <li> <a href="https://wiki.mozilla.org/Add-ons/Contribute">Contribution opportunities</a> </li> <li> <a href="https://wiki.mozilla.org/WebExtensions/Contribution_Onramp">Onboard to the WebExtensions codebase</a> </li> <li> <a href="https://wiki.mozilla.org/WebExtensions/Hacking">Hacking guide for WebExtensions code contributions</a> </li> <li> <a href="https://webextensions-experiments.readthedocs.io/">WebExtensions Experiments</a> </li> <li> <a href="https://bugzilla.mozilla.org">Find or create a bug</a> </li> </ul> </div> </li> </ul> </div> </nav> <div class="site-content"> <main class="site-content-body" aria-label="Content">  <section class="page-hero"> <div class="module"> <article class="module-content grid-x grid-padding-x"> <div class="cell small-12"> <div class="page-hero-description"> <p class="section-title"><small></small></p> <h1>User experience best practices</h1> <p>You want to make sure your users have a great experience using your extension—when you do, the good reviews and ratings will follow on <a href="https://addons.mozilla.org">addons.mozilla.org</a> (AMO)</p> <p>If you are new to the subject of making software usable, a good place to start is Jakob Nielsen’s <a href="https://en.wikipedia.org/wiki/Heuristic_evaluation#Nielsen">Usability Heuristics</a>. We recommend all developers use Nielsen’s Heuristics as a checklist when building and testing your user experience (UX).</p> <p>Here we lay out the six steps to creating specific Firefox and extension UX features so that you can build an extension that entices, informs, delights, and retains your users.</p> <p>In addition to the steps described here, your extension should follow <a href="/documentation/publish/add-on-policies/">Add-on Policies</a>, which include being transparent with users about user security, privacy and control.</p> </div> <div class="page-hero-cta"> </div> </div> </article> </div> </section>   <section id="keep-it-focused" class="module"> <aside class="module-aside table-of-contents"><div class="table-of-contents-inner"> <h6>Contents</h6> <ol><li><a href="#keep-it-focused">1. Keep it focused</a></li><li><a href="#give-users-what-they-need-where-they-need-it">2. Give users what they need, where they need it</a></li><li><a href="#keep-the-user-informed">3. Keep the user informed</a></li><li><a href="#be-firefoxy-in-look-and-feel">4. Be Firefoxy in look and feel</a></li><li><a href="#great-onboarding-experience">5. Great onboarding experience</a></li><li><a href="#test-test-and-then-test-again">6. Test, test, and then test again</a></li> </ol> </div> </aside> <article class="module-content grid-x grid-padding-x"> <div class="cell small-12"> <h2>1. Keep it focused</h2> <p>The best Firefox extensions provide users with a new feature or capability that addresses a need—be it smarter, more efficient, or more enjoyable browsing. Ideally, your extension saves the user time, money, or frustration.</p> <p>An extension is best when it is centered around one main use case, and addresses that use case as well as possible for the target audience:</p> <ul> <li>It should add one function or set of closely related functions to the browser, modify a function of the browser, or modify web pages.</li> <li>Determine if you have achieved this by asking whether you can easily communicate the features and purpose of the extension in three (short) sentences or less.</li> </ul> </div> </article> </section>   <section id="give-users-what-they-need-where-they-need-it" class="module"> <article class="module-content grid-x grid-padding-x"> <div class="cell small-12"> <h2>2. Give users what they need, where they need it</h2> <p>Choosing the right way, or combination of ways, to make your extension's functionality available to the user can have a significant effect on usability. Asking a few simple questions about your extension’s functionality can quickly guide you to the right choices:</p> <h3>Does my extension work on most websites and web pages?</h3> <p>If your extension provides the user with features they can use on almost every website or page, give the user access to it from a <strong><a href="https://developer.mozilla.org/Add-ons/WebExtensions/user_interface/Browser_action">toolbar button</a> using the <a href="https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/API/browserAction">browser action</a></strong>.</p> <ul> <li>This might include providing access to your image editor or opening a page from your website.</li> </ul> <p><img src="/assets/img/documentation/develop/browser-action.0d899523.png" alt=""></p> <p>Where you have several features you want to give the user access, you can add a <a href="https://developer.mozilla.org/Add-ons/WebExtensions/Popups">popup</a> to the button (a popup appears like a door hanger that opens when the user selects the browser action button).</p> <h3>Does my extension work for only some web sites and pages?</h3> <p>If your extension offers a feature for a type of web page or specific domains, give the user access to it <strong>from an <a href="https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/user_interface/Page_actions">address bar button</a> using a <a href="https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/API/pageAction">page action</a></strong>.</p> <ul> <li>This might include providing access to your RSS reader on pages with RSS feeds or providing an extended feature to pages on your website.</li> </ul> <p><img src="/assets/img/documentation/develop/page-action.5339a33a.png" alt=""></p> <p>Where you have several features you want to give the user access, you can add a <a href="https://developer.mozilla.org/Add-ons/WebExtensions/Popups">popup</a> to the button.</p> <h3>Does my extension need to show information or offer actions in parallel with web pages?</h3> <p>If your extension includes information or actions that a user would want immediate access to while viewing any web page, <strong>use a <a href="https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars">sidebar</a></strong>.</p> <ul> <li>This might include notes the user can make about a page’s content or a feature offering various font substitutions to improve readability.</li> </ul> <p><img src="/assets/img/documentation/develop/bookmarks-sidebar.95340822.png" alt=""></p> <h3>Does my extension offer functionality specific to page content or other browser features?</h3> <p>If your extension offers features the user might want to access in context, <strong>add them to an appropriate <a href="https://developer.mozilla.org/Add-ons/WebExtensions/user_interface/Context_menu_items">context menu</a></strong>.</p> <ul> <li>This might include offering access to an image editor on the image context menu or offering extended copy features on the context menu for selected page content.</li> </ul> <p><img src="/assets/img/documentation/develop/context_menu_example.0cba967a.png" alt="Example of content menu items added by a WebExtension, from the context-menu-demo example"></p> <h3>Does my extension have settings the user can adjust?</h3> <p>If your extension enables the user to change and save settings that affect the behavior of the extension, use an <strong><a href="https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages">options page</a> to provide a standard Preferences link to settings</strong> from the Add-on Manager.</p> <p><img src="/assets/img/documentation/develop/add-on-manager-preferences-button.da6de493.png" alt="Typical preferences button, to access an extension's settings, from the Add-on Manager"></p> <div class="note"> <p>In the Windows operating system, the “Preferences” button is labeled “Options”.</p> </div> <h3>Does my extension need to gather a lot of information or display content in addition to the current tabs?</h3> <p>Where your extension needs to gather or display significant amounts of information (more than is suitable for an <a href="https://developer.mozilla.org/docs/Web/API/Window/alert">alert</a> or would benefit from additional formatting) <strong>use <a href="https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/user_interface/Bundled_web_pages">bundled web pages</a> to deliver forms and similar content.</strong></p> <p><img src="/assets/img/documentation/develop/bundled_page_as_panel.e35f5a62.png" alt="Example of a simple bundled page displayed as a detached panel."></p> <h3>Does my extension try to help the user find web pages or content?</h3> <p>If your extension includes functionality to locate web pages or content, such as offering a site-specific search, use <a href="https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/user_interface/Omnibox">address bar suggestions</a> to deliver those recommendations.</p> <p><img src="/assets/img/documentation/develop/omnibox_example_full.bd246d7d.png" alt="Example showing the result of the WebExtension's customization of the address bar suggestions."></p> <h3>Does my extension offer tools for developers?</h3> <p>If you are providing tools for developers, add them to the Firefox developer tools using <a href="https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels">developer tools panels</a>.</p> </div> </article> </section>   <section id="keep-the-user-informed" class="module"> <article class="module-content grid-x grid-padding-x"> <div class="cell small-12"> <h2>3. Keep the user informed</h2> <p>Ensuring the user knows what will happen, is happening, and has happened in your extension is an essential part of building trust and ensuring a happy user.</p> <h3>Tell the user what will happen, before it happens</h3> <p>Users should understand what will happen when they click a button:</p> <ul> <li>Do provide a meaningful, descriptive button label.</li> <li>Do provide tooltips that describe the action that the button will perform.</li> <li>Do <strong>not</strong> put the name of the extension alone in the tooltip, unless it is descriptive of the action the button will perform.</li> <li>Do <strong>not</strong> use the tooltip for any other types of information such as elaborate statistics about your extension. Keep the tooltip content simple and focused on what will happen when the user clicks the button.</li> </ul> <h3>If something is <em>really</em> important and the user may not be aware, notify them</h3> <p>If your extension has completed a critical, long running background task, use the operating system’s native <a href="https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/user_interface/Notifications">notifications</a> to update the user when the task completes. This can be useful where the user may not be focusing on the extension or the browser, when the task finishes.</p> <p>However, use notifications sparingly. If it is sufficient for the user to discover that a process has completed when they return to the browser or extension, do <strong>not</strong> use notifications.</p> <p><img src="/assets/img/documentation/develop/notify-shadowed.31d421c3.png" alt=""></p> <h3>Use browserAction badges sparingly</h3> <p>To inform users of important events, you can <a href="https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/API/browserAction/setBadgeText">add a badge</a> over the toolbar icon of a <a href="https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/API/browserAction"><code>browserAction</code></a>. Do so sparingly—do not use badges to provide regular or persistent status updates.</p> <p>When it comes to <a href="https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/API/browserAction/setBadgeBackgroundColor">coloring a badge</a>, using one of four colors for notifications of different severity is recommended:</p> <ul> <li>Casual: blue</li> <li>Success: green</li> <li>Warning: yellow</li> <li>Error: red</li> </ul> <div class="note"> <p>Use of Firefox colors is suggested, for more details see <a href="http://design.firefox.com/photon/visuals/color.html">Firefox Colors</a>. However, for purposes of <a href="https://developer.chrome.com/extensions/browserAction#icon">Chrome</a> and Opera compatibility, we support any color you wish to use.</p> </div> </div> </article> </section>   <section id="be-firefoxy-in-look-and-feel" class="module"> <article class="module-content grid-x grid-padding-x"> <div class="cell small-12"> <h2>4. Be Firefoxy in look and feel</h2> <p>Your users have chosen Firefox for a reason, possibly several reasons, so match your extension’s look and feel to that of Firefox using the <a href="http://design.firefox.com/photon">Firefox Photon Design System</a>.</p> <p>Following Photon will ensure that your extension integrates with the Firefox experience and will make it easier for people to use.</p> </div> </article> </section>   <section id="great-onboarding-experience" class="module"> <article class="module-content grid-x grid-padding-x"> <div class="cell small-12"> <h2>5. Great onboarding experience</h2> <p>The first few minutes after someone installs your extension can be critical to its success. Your new user needs to know where to start and how to use the features of your browser extension.</p> <p>Provide an onboarding page that gives users the essential information they need to get started. Keep the information brief and to the point, and provide simple configuration options if applicable. For more information on creating an onboarding page, see <a href="/documentation/develop/onboard-upboard-offboard-users/">Best practices for onboarding, upboarding, and offboarding users</a>.</p> <p>In case the user skips the onboarding page, ensure that your extension is ready to be used immediately after installation. It should be optimized for its main use case, and work as expected for most users without the need for customization.</p> </div> </article> </section>   <section id="test-test-and-then-test-again" class="module"> <article class="module-content grid-x grid-padding-x"> <div class="cell small-12"> <h2>6. Test, test, and then test again</h2> <p>Testing is a vital part of creating an outstanding UX for your extension. There are two key aspects of testing your UX:</p> <ol> <li>Test across devices and platforms to ensure your extension works and performs well in as many places as possible. This includes considering factors such as the user’s screen size and resolution—just because your extension looks good and is easy to use on your desktop monitor does not mean it looks as good and works as well on a smaller laptop screen, or, indeed, vice versa.</li> <li>Test with as many users as possible. Do not assume that you know your audience, as people’s backgrounds and experience can make a huge difference to how they interact with your extension. So, allow for user testing as part of your extension’s development.</li> </ol> <p>Testing tips:</p> <ul> <li>In AMO you have the option to <a href="/documentation/publish/submitting-an-add-on/#listing-on-amo">identify your extension as "experimental"</a> or publish a <a href="/documentation/publish/signing-and-distribution-overview/">beta or other non-final release</a>. <ul> <li>If you flag your extension as experimental it is listed in AMO, but with a lower profile. When the extension is ready for a wider audience, you can turn off the experimental flag in AMO.</li> <li>If you have a published extension, you can use the Development channel to offer an alpha or beta version for testing. You will need to direct your testers to the Development Channel of your extension’s listing or let your testers know the link to use to install your extension.<br> <img src="/assets/img/documentation/develop/extensions-development-channel.d19a9ad4.png" alt="The development channel section of an extension's listing page, offering access to alpha and beta versions for testing."><br> When you are happy with your update, you can publish it as the new release version of your extension.</li> </ul> </li> <li>If you want to distribute your extension to users outside AMO, you can find the instructions for doing so, and the installation instructions you need to provide users, in the article on <a href="/documentation/publish/distribute-sideloading/">Sideloading add-ons</a>. Remember that, unlike distribution through AMO, you will need to send users any updated versions of your extension as you make improvements.</li> <li>Use the <a href="https://developer.mozilla.org/docs/Tools/Responsive_Design_Mode">Responsive Design Mode</a> to test your extension for its behavior on other screen sizes and device types.</li> </ul> <p><strong>Creating a great extension is an iterative process. While we’ve laid out the six steps here, you’ll likely revisit these as you learn what works and what doesn’t through user feedback, testing, and time.</strong></p> </div> </article> </section>  <section class="module meta-data"> <article class="module-content grid-x grid-padding-x"> <div class="cell small-12"><p><span class="meta-label tags">Tags:</span>  <a href="/tags/add-ons/">add-ons</a>  <a href="/tags/extensions/">extensions</a>  <a href="/tags/guide/">guide</a>  <a href="/tags/ui/">ui</a>  <a href="/tags/ux/">ux</a> </p><p><span class="meta-label contributors">Contributors:</span> <a href="https://github.com/MeridelW/" title="View MeridelW on Github">MeridelW</a> <a href="https://github.com/andrewtruongmoz/" title="View andrewtruongmoz on Github">andrewtruongmoz</a> <a href="https://github.com/rebloor/" title="View rebloor on Github">rebloor</a> <a href="https://github.com/hellosct1/" title="View hellosct1 on Github">hellosct1</a> <a href="https://github.com/wbamberg/" title="View wbamberg on Github">wbamberg</a> <a href="https://github.com/0711kps/" title="View 0711kps on Github">0711kps</a> <a href="https://github.com/atsay/" title="View atsay on Github">atsay</a> <a href="https://github.com/bryanyou/" title="View bryanyou on Github">bryanyou</a> </p><p><span class="meta-label date">Last update:</span> <a href="https://github.com/rebloor/" title="View rebloor on Github" itemprop="author" itemscope="" itemtype="http://schema.org/Person"><span class="p-author h-card" itemprop="name">rebloor</span></a> <time class="dt-published" datetime="2019-03-18T17:05:14+00:00" itemprop="datePublished">Mar 18, 2019 </time> </p></div> </article> </section> <section class="module up-next"> <article class="module-content grid-x grid-padding-x"> <div class="cell small-12"> <h6>Up Next</h6> </div> <a href="/documentation/develop/differences-between-desktop-and-android-extensions/" class="cell auto tile tile-block-link"> <div class="block-link"><p>Develop</p><h5>Differences between desktop and Android extensions</h5> </div> </a> <a href="/documentation/develop/user-experience-guidelines-for-mobile-extensions/" class="cell auto tile tile-block-link"> <div class="block-link"><p>Develop</p><h5>User experience guidelines for mobile extensions</h5> </div> </a> <a href="/documentation/develop/developing-extensions-for-firefox-for-android/" class="cell auto tile tile-block-link"> <div class="block-link"><p>Develop</p><h5>Developing extensions for Firefox for Android</h5> </div> </a> </article> </section> </main> <aside class="documentation-topics"> <div class="grid-container grid-x grid-padding-x"> <div class="cell small-12"> <h6>Documentation Topics</h6> <ul> <li><a href="/documentation/develop/">Develop</a></li> <li><a href="/documentation/publish/">Publish</a></li> <li><a href="/documentation/manage/">Manage</a></li> <li><a href="/documentation/enterprise/">Enterprise</a></li> <li><a href="/documentation/themes/">Themes</a></li> </ul> </div> </div> </aside> <aside class="panel social"> <div class="grid-container grid-x grid-padding-x"> <div class="cell small-12"> <h2>Connect With Us</h2> </div> <div class="cell small-12 large-3"> <h4>Twitter</h4> <p>For developers: <br><a href="https://twitter.com/mozamo" class="twitter">@mozamo</a></p> <p>For end users: <br><a href="https://twitter.com/rockyourfirefox" class="twitter">@rockyourfirefox</a></p> </div> <div class="cell small-12 large-4"> <h4>More</h4> <p><a href="https://wiki.mozilla.org/Matrix" class="irc">Matrix</a></p> <p><a href="https://discourse.mozilla.org/c/add-ons/" class="irc">Community forum</a></p> </div> <div class="cell small-12 large-5"> <h4>Extensions Developer Newsletter</h4> <p>Stay up-to-date on news and events for Firefox extension developers.</p> <div class="newsletter" id="newsletter_wrap">  <form id="newsletter_form" name="newsletter_form" action="https://www.mozilla.org/en-US/newsletter/" method="post" data-no-csrf=""> <input type="hidden" id="fmt" name="fmt" value="H"> <input type="hidden" id="newsletters" name="newsletters" value="about-addons"> <div id="newsletter-errors" class="newsletter-errors"></div> <div id="newsletter_email" class="form_group"> <label for="email" class="visually-hidden">Email Address</label> <input type="email" id="email" name="email" class="form_input" required="" placeholder="Email Address" size="30"> </div> <div id="newsletter_privacy" class="form_group form_group-agree"> <input type="checkbox" id="privacy" name="privacy" required=""> <label for="privacy">I’m okay with Mozilla handling my info as explained in this <a href="https://www.mozilla.org/privacy/websites/">Privacy Notice</a>.</label> </div> <div id="newsletter_submit"> <button type="submit" class="button btn btn-success">Sign up</button> </div> </form> <div id="newsletter-thanks" class="newsletter-thanks"> <h6>Thanks! Please check your inbox to confirm your subscription.</h6> <p>If you haven’t previously confirmed a subscription to a Mozilla-related newsletter you may have to do so. Please check your inbox or your spam filter for an email from us.</p> </div> </div> </div> </div> </aside> <footer class="site-footer panel mzp-c-footer mzp-has-lang-switcher"> <div class="mzp-l-content"> <nav class="grid-container grid-x grid-padding-x mzp-c-footer-primary"> <div class="cell small-12 large-3"> <div class="mzp-c-footer-primary-logo"><a href="https://www.mozilla.org/">Mozilla</a></div> </div> <section class="cell small-12 large-4 mzp-c-footer-section"> <h4> <a href="https://addons.mozilla.org/">Add-ons</a> </h4> <ul> <li><a href="https://addons.mozilla.org/about">About</a></li> <li><a href="https://blog.mozilla.com/addons">Blog</a></li> <li><a href="https://addons.mozilla.org/developers/">Developer Hub</a></li> <li><a href="/documentation/publish/add-on-policies/">Developer Policies</a></li> <li><a href="https://discourse.mozilla.org/c/add-ons">Forum</a></li> </ul> </section> <section class="cell small-12 large-5 mzp-c-footer-section"> <h4> <a href="https://www.mozilla.org/firefox/">Firefox</a> </h4> <ul> <li><a href="https://www.mozilla.org/firefox/new/?utm_source=extensionworkshop.com&utm_campaign=footer&utm_medium=referral">Download Firefox</a></li> <li><a href="https://www.mozilla.org/firefox/?utm_source=extensionworkshop.com&utm_campaign=footer&utm_medium=referral">Desktop</a></li> <li><a href="https://www.mozilla.org/firefox/mobile/?utm_source=extensionworkshop.com&utm_campaign=footer&utm_medium=referral">Mobile</a></li> <li><a href="https://www.mozilla.org/firefox/features/?utm_source=extensionworkshop.com&utm_campaign=footer&utm_medium=referral">Features</a></li> <li><a href="https://www.mozilla.org/firefox/channel/desktop/?utm_source=extensionworkshop.com&utm_campaign=footer&utm_medium=referral">Beta, Nightly, Developer Edition</a></li> <li> <ul class="mzp-c-footer-links-social"> <li><a class="twitter" href="https://twitter.com/firefox">Twitter<span> (@firefox)</span></a></li> <li><a class="youtube" href="https://www.youtube.com/firefoxchannel">YouTube<span> (firefoxchannel)</span></a></li> <li><a class="github" href="https://github.com/mozilla">Github<span> (mozilla)</span></a></li> </ul> </li> </ul> </section> </nav> <nav class="grid-container grid-x grid-padding-x mzp-c-footer-secondary"> <div class="cell small-12 large-7 mzp-c-footer-legal"> <ul> <li><a rel="nofollow" href="https://www.mozilla.org/privacy/websites/">Website Privacy Notice</a></li> <li><a rel="nofollow" href="https://www.mozilla.org/privacy/websites/#cookies">Cookies</a></li> <li><a rel="nofollow" href="https://www.mozilla.org/about/legal/">Legal</a></li> <li><a class="edit" href="https://github.com/mozilla/extension-workshop/blob/master/./src/content/documentation/develop/user-experience-best-practices.md">Edit this page on GitHub</a></li> </ul> <p class="mzp-c-footer-license"> Portions of this content are ©1998–2024 by individual mozilla.org contributors. Content available under a <a rel="license" href="https://www.mozilla.org/foundation/licensing/website-content/">Creative Commons license</a>. </p> </div> </nav> </div> </footer> </div> </div> <aside id="video-popup"> <div class="bg"></div> <div class="grid-container grid-x grid-padding-x align-center align-middle"> <div class="cell small-12 large-10"> <button id="stdVideo-close"></button> </div> </div> </aside> <script src="/assets/js/bundle.4c00b90c.js"></script> <script src="/assets/js/basket-client.60d84618.js"></script> </body> </html>

CINXE.COM

User experience best practices | Firefox Extension Workshop