Debugging | 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>Debugging | 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/debugging/"> <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="Debugging"> <meta property="og:url" content="https://extensionworkshop.com/documentation/develop/debugging/"> <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\u002Fdebugging\u002F", "@type": "TechArticle", "datePublished": "2024-06-27T14:57:48.406Z", "headline": "Debugging" }</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> <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 class="is-active"> <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> <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 class="is-active"> <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> <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 class="is-active"> <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>Debugging</h1> <p>This article explains how to use the Firefox developer tools to debug extensions.</p> <p>An extension can consist of several components—background scripts, popups, options pages, content scripts, sidebars, and alike—and you'll use slightly different workflows to debug each component. Each component has a section in this article, and you can read each section in isolation. We'll begin by introducing the developer tools, which you'll use to debug all the pieces of your extension.</p> </div> <div class="page-hero-cta"> </div> </div> </article> </div> </section>   <section id="developer-tools-toolbox" class="module"> <aside class="module-aside table-of-contents"><div class="table-of-contents-inner"> <h6>Contents</h6> <ol><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> </ol> </div> </aside> <article class="module-content grid-x grid-padding-x"> <div class="cell small-12"> <h2>Developer tools toolbox</h2> <p>You use an implementation of the developer tools called Toolbox to debug extensions. To open Toolbox for an extension:</p> <ul> <li>enter <code>about:debugging</code> in the URL bar.</li> <li>in the left-hand menu, click <strong>This Firefox</strong> (or <strong>This Nightly</strong>).</li> <li>click <strong>Inspect</strong> next to your extension.</li> </ul> <p>A new tab opens showing <strong>Inspector</strong> in the Toolbox.</p> <p><img src="/assets/img/documentation/develop/developing_tools_inspector.5ad54533.png" alt="developers tool screenshot"></p> <p>To debug your extension, you'll use:</p> <ul> <li><a href="https://developer.mozilla.org/docs/Tools/Page_Inspector"><strong>Inspector</strong></a> to examine and modify the HTML and CSS used to build your extension's pages.</li> <li><a href="https://developer.mozilla.org/docs/Tools/Web_Console"><strong>Console</strong></a> to view messages logged by the extension and error messages logged by the browser as it runs the extension. It also provides a command line, where you can execute JavaScript in the extension's context.</li> <li><a href="https://developer.mozilla.org/docs/Tools/Debugger"><strong>Debugger</strong></a> to set breakpoints and watchpoints in your extension's JavaScript, and examine and modify the extension's state.</li> <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Storage_Inspector"><strong>Storage</strong></a> to view details of data stored by the extension.</li> </ul> <p>This console shows messages from your background script and extension pages; other logs may appear elsewhere.<br> There is an overview of all relevant places to look for messages at <a href="#viewing_log_output">Viewing log output</a>.</p> <p>For much of the debugging work, it's useful to be able to view <strong>Console</strong> with <strong>Inspector</strong> or <strong>Debugger</strong>. You do this using the <a href="https://developer.mozilla.org/docs/Tools/Web_Console/Split_console">split console</a>, press <code>esc</code> to activate this mode.</p> <p><img src="/assets/img/documentation/develop/developing_tools_inspector_split.f766fdcf.png" alt="developers tool split screenshot"></p> <p>You can now drag the toolbox tab to a separate window, so you can place it alongside the window where you're executing the extension.</p> <p><img src="/assets/img/documentation/develop/arranging_tools.1b8e21de.png" alt="developers tool split screenshot"></p> </div> </article> </section>   <section id="viewing_log_output" class="module"> <article class="module-content grid-x grid-padding-x"> <div class="cell small-12"> <h2>Viewing log output</h2> <p>Your extension can generate log messages, e.g. with the <a href="https://developer.mozilla.org/docs/Web/API/Console_API">Console API</a> or by triggering (uncaught) errors.</p> <p>Log messages can usually be viewed via the <a href="https://developer.mozilla.org/docs/Tools/Web_Console">Console</a> of the context where the script runs.<br> The <a href="#developer-tools-toolbox">Developer tools toolbox</a> at <code>about:debugging</code> shows log messages from extension scripts. For specific cases, see:</p> <ul> <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-sidebars">Debugging sidebars</a></li> <li><a href="#debugging-developer-tools-pages-and-panels">Debugging devtools panels</a>.</li> </ul> <p>Log messages from content scripts can be viewed in the developer tools of the tab where the content script runs instead of <code>about:debugging</code>, see:</p> <ul> <li><a href="#debugging-content-scripts">Debugging content scripts</a></li> </ul> <p>Log messages not associated with an extension script, such as the <code>stderr</code> output of the <a href="https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/Native_messaging">nativeMessaging API</a><br> can only be viewed via the Browser Console. This console contains messages from the whole browser, including your and other extensions.<br> It occasionally contains more detailed information about errors reported to your extension. For more information, see:</p> <ul> <li><a href="https://developer.mozilla.org/docs/Tools/Browser_Console">Browser Console</a></li> </ul> </div> </article> </section>   <section id="debugging-background-scripts" class="module"> <article class="module-content grid-x grid-padding-x"> <div class="cell small-12"> <h2>Debugging background scripts</h2> <div class="note"> <p>We use the <a href="https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n">notify-link-clicks-i18n</a> extension example to illustrate the debugging features relevant to background scripts. This example is in the <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> repository.</p> </div>  <p><a href="https://developer.mozilla.org/Add-ons/WebExtensions/Background_scripts">Background scripts</a> enable an extension to monitor and react to events in the browser, such as navigating to a new page, removing a bookmark, or closing a tab. These scripts can be persistent or non-persistent. Persistent background scripts remain loaded for the lifetime of the extension. In contrast, non-persistent background scripts load when needed to respond to an event and unloaded when they become idle. Non-persistent background scripts are recommended because they consume less of the browser's resources.</p> <p>Background scripts are loaded inside an invisible background page: by default, this is an empty HTML document, but you can specify a custom page and define it as the background page using the <code>manifest.json</code> <a href="https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/manifest.json/background"><code>background</code></a> key.</p> <p>To debug background scripts, use the <a href="#developer-tools-toolbox">Toolbox</a> <strong>Debugger</strong> in the <a href="https://developer.mozilla.org/docs/Tools/Web_Console/Split_console">split console</a> view so you can view the <strong>Console</strong> below <strong>Debugger</strong>.</p> <p>To get started, open your background script in <strong>Sources</strong>.</p> <p><img src="/assets/img/documentation/develop/locate_background_script.a82ee879.png" alt="background script screenshot"></p> <p>As you run your extension, the <strong>Console</strong> displays logged output, including calls to <a href="https://developer.mozilla.org/docs/Web/API/Console/log"><code>console.log()</code></a> made by the extension's background scripts and any errors the browser raises as it executes these scripts. Note that the console shows all errors raised by the browser, not just errors related to your extension's code.</p> <p>When you debug a non-persistent background script, the background script won't go idle while the toolbox is open. However, if you need to terminate the background page, you can do so in <code>about:debugging</code>.</p> <p>For example, the <a href="https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n">notify-link-clicks-i18n</a> example extension logs a message from its background script when it receives a message from one of its content scripts.</p> <p><img src="/assets/img/documentation/develop/background_script_console_log.a51f08e2.png" alt="background script console log screenshot"></p> <p>Using the <strong>Console</strong> command line, you can access and modify the objects created by your background scripts. For example, you can call the <code>notify()</code> function:</p> <p><img src="/assets/img/documentation/develop/execute_from_console.56a9a2e9.png" alt="execute from console screenshot"></p> <p>In the <strong>Debugger</strong> you can set breakpoints, step through code, modify the extension's state, and do <a href="https://developer.mozilla.org/docs/Tools/Debugger">everything else you'd expect to be able to do in a debugger</a>.</p> <p><img src="/assets/img/documentation/develop/adding_breakpoint.7c708391.png" alt="add breakpoint screenshot"></p> <p>For more information about using the debugger, see the <a href="https://developer.mozilla.org/docs/Tools/Debugger">Debugger</a> guide.</p> </div> </article> </section>  <section id="debugging-options-pages" class="module"> <article class="module-content grid-x grid-padding-x"> <div class="cell small-12"> <h2>Debugging options pages</h2> <div class="note"> <p>We use the <a href="https://github.com/mdn/webextensions-examples/tree/master/favourite-colour">favourite-colour</a> extension example to illustrate the debugging features relevant to options pages. This example is in the <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> repository.</p> </div> <p>An <a href="https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages">options pages</a> is an HTML page shown when the user accesses your extension's preferences in Add-ons Manager, either by opening Add-ons Manager themselves or using a link provided in your extension. You use an options page to enable the user to set and save options and settings that affect the behavior of your extension. Options pages display in an iframe in Add-ons Manager.</p> <p>To debug options pages, use the <a href="#developer-tools-toolbox">Toolbox</a> <strong>Debugger</strong> in the <a href="https://developer.mozilla.org/docs/Tools/Web_Console/Split_console">split console</a> view so you can view the <strong>Console</strong> below <strong>Debugger</strong>.</p> <p>To get started:</p> <ul> <li>enter <code>about:addons</code> in the URL bar, to open Add-ons Manager.</li> <li>open your extension's preferences:</li> </ul> <p><img src="/assets/img/documentation/develop/open_preferences.f4cf562f.png" alt="open preferences screenshot"></p> <ul> <li>locate the options page script in Sources.</li> </ul> <p><img src="/assets/img/documentation/develop/options_script_in_debugger.d74bd18c.png" alt="open scripts in debugger screenshot"></p> <p>In the <strong>Debugger</strong> you can set breakpoints, step through code, modify the extension's state, and do <a href="https://developer.mozilla.org/docs/Tools/Debugger">everything else you'd expect to be able to do in a debugger</a>. Any messages logged by your code display in <strong>Console</strong>.</p> <p>To debug the options page's HTML and CSS, point the tools at the iframe that hosts the page. To do this:</p> <ul> <li>switch to <strong>Inspector</strong>.</li> <li>click the page selector (1).</li> <li>click the options page's HTML item (2).</li> </ul> <p><img src="/assets/img/documentation/develop/open_options_page_HTML.b277d464.png" alt="open options page HTML screenshot"></p> <p>For more information about using <strong>Inspector</strong>, see the <a href="https://developer.mozilla.org/docs/Tools/Page_Inspector">Inspector</a> guide.</p> </div> </article> </section>   <section id="debugging-popups" class="module"> <article class="module-content grid-x grid-padding-x"> <div class="cell small-12"> <h2>Debugging popups</h2> <div class="note"> <p>We use the <a href="https://github.com/mdn/webextensions-examples/tree/master/beastify">beastify</a> extension example to illustrate the debugging features relevant to popups. This example is in the <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> repository.</p> </div> <p><a href="https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/Popups">Popups</a> are dialogs attached to browser or page actions. Popups are specified using an HTML document that can include CSS and JavaScript, which define styling and behavior.</p> <p>To debug popups, use the <a href="#developer-tools-toolbox">Toolbox</a> <strong>Debugger</strong> in the <a href="https://developer.mozilla.org/docs/Tools/Web_Console/Split_console">split console</a> view so you can view the <strong>Console</strong> below <strong>Debugger</strong>.</p> <p>To debug a popup it needs to be visible (so that its HTML document is loaded). However, having opened a popup, if you click outside the popup it closes and its code unloads. This would appear to make debugging rather difficult. To overcome this challenge, in the options menu, click <strong>Disable Popup Auto-Hide</strong>.</p> <p><img src="/assets/img/documentation/develop/disable_popup_auto_hide.be0f2f17.png" alt="disable popup auto-hide screenshot"></p> <p>Now, when you open a popup it stays open and its code remains loaded.</p> <div class="note"> <p>Disable popup auto-hide also applies to built-in browser popups, such as the options menu. The setting doesn't persist across sessions. When you close the window, the setting reverts to auto-hide popups.</p> <p>Internally, this option toggles the <code>ui.popup.disable_autohide</code> preference, which you can toggle manually from <code>about:config</code>.</p> </div> <p>With the popup open, its JavaScript sources are listed in <strong>Debugger</strong>. In the <strong>Debugger</strong> you can set breakpoints, step through code, modify the extension's state, and do <a href="https://developer.mozilla.org/docs/Tools/Debugger">everything else you'd expect to be able to do in a debugger</a>. Any messages logged by your code display in <strong>Console</strong>.</p> <p><img src="/assets/img/documentation/develop/popup_in_debugger.c644b5b1.png" alt="popup in debugger screenshot"></p> <p>To inspect the popup's HTML and CSS, use <strong>Inspector</strong> in the <a href="https://developer.mozilla.org/docs/Tools/Web_Console/Split_console">split console</a> view so you can view the <strong>Console</strong> below <strong>Inspector</strong>. You can <a href="https://developer.mozilla.org/docs/Tools/Page_Inspector">review and modify the popup's HTML and CSS in <strong>Inspector</strong></a>, as you would with any webpage.</p> <p><img src="/assets/img/documentation/develop/popup_in_inspector.25227e77.png" alt="popup in inspector screenshot"></p> <p>If your extension has multiple HTML documents open, click the page select icon (<img src="/assets/img/documentation/develop/page-selector.40463827.png" alt="pages selector">) to open the popup's document.</p> </div> </article> </section>   <section id="debugging-content-scripts" class="module"> <article class="module-content grid-x grid-padding-x"> <div class="cell small-12"> <h2>Debugging content scripts</h2> <div class="note"> <p>We use the <a href="https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n">notify-link-clicks-i18n</a> extension example to illustrate the debugging features relevant to content scripts. This example is in the <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> repository.</p> </div> <p>A <a href="https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content script</a> is a part of your extension that runs in the context of a webpage; it enables your extension to react to events on the webpage and make changes to a webpage's content.</p> <p>Because <a href="https://developer.mozilla.org/docs/Mozilla/Firefox/Multiprocess_Firefox">Firefox is multiprocess</a>, content scripts run in a different process to other parts of an extension. Therefore, to debug content scripts, you use the developer tools for the page containing the script. To do this:</p> <ul> <li>in the Firefox menu (or <strong>Tools</strong> menu if you display the menu bar or are on macOS), click <strong>Web Developer</strong> then <strong>Debugger</strong>.</li> <li>press <code>Ctrl + Shift + i</code> (<code>Command + Option + i</code> on macOS) and click <strong>Debugger</strong>.</li> </ul> <p>If you've already activated the <a href="https://developer.mozilla.org/docs/Tools/Web_Console/Split_console">split console</a> view, so you can view the <strong>Console</strong> below <strong>Debugger</strong>, the tools open in this mode. Otherwise, press <code>esc</code> to activate this mode.</p> <p><img src="/assets/img/documentation/develop/content_script_in_debug.2e48d9f9.png" alt="content script in debug"></p> <p>Select your content scripts listed in <strong>Sources</strong>. You can set breakpoints, step through code, modify the extension's state, and do <a href="https://developer.mozilla.org/docs/Tools/Debugger">everything else you'd expect to be able to do in a debugger</a>. Any messages logged by your code display in <strong>Console</strong>.</p> <div class="note"> <p>If the developer tools tab was not open when the content script injected, the content script may not be list in <strong>Sources</strong>. If you experience this behavior, reloading the page with the developer tools open should provide a fix.</p> </div> </div> </article> </section>   <section id="debugging-sidebars" class="module"> <article class="module-content grid-x grid-padding-x"> <div class="cell small-12"> <h2>Debugging sidebars</h2> <div class="note"> <p>We use the <a href="https://github.com/mdn/webextensions-examples/tree/master/annotate-page">annotate-page</a> extension example to illustrate the debugging features relevant to sidebars. This example is in the <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> repository.</p> </div> <p>A <a href="https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars">Sidebar</a> is a pane displayed at the side of the browser window, next to the web page. Sidebars are specified using an HTML document that can include CSS and JavaScript, which define styling and behavior.</p> <p>To debug a sidebar, use the <a href="#developer-tools-toolbox">Toolbox</a> <strong>Debugger</strong> in the <a href="https://developer.mozilla.org/docs/Tools/Web_Console/Split_console">split console</a> view so you can view the <strong>Console</strong> below <strong>Debugger</strong>.</p> <p>To debug a sidebar, open the sidebar and locate its JavaScript in <strong>Debugger</strong>.</p> <p><img src="/assets/img/documentation/develop/sidebar_script_in_debugger.17fe90e1.png" alt="sidebar script in debugger"></p> <p>In the <strong>Debugger</strong> you can set breakpoints, step through code, modify the extension's state, and do <a href="https://developer.mozilla.org/docs/Tools/Debugger">everything else you'd expect to be able to do in a debugger</a>. Any messages logged by your code display in <strong>Console</strong>.</p> <p>To inspect the sidebar's HTML and CSS, use <strong>Inspector</strong> in the <a href="https://developer.mozilla.org/docs/Tools/Web_Console/Split_console">split console</a> view so you can view the <strong>Console</strong> below <strong>Inspector</strong>. You can <a href="https://developer.mozilla.org/docs/Tools/Page_Inspector">review and modify the sidebar's HTML and CSS in <strong>Inspector</strong></a>, as you would with any webpage.</p> <p><img src="/assets/img/documentation/develop/sidebar_page_in_inspector.db6e7fd3.png" alt="sidebar script in debugger"></p> <p>If your extension has multiple HTML documents open, click the page select icon (<img src="/assets/img/documentation/develop/page-selector.40463827.png" alt="pages selector">) to open the sidebar's document.</p> </div> </article> </section>   <section id="debugging-storage" class="module"> <article class="module-content grid-x grid-padding-x"> <div class="cell small-12"> <h2>Debugging storage</h2> <div class="note"> <p>We use the <a href="https://github.com/mdn/webextensions-examples/tree/master/annotate-page">annotate-page</a> extension example to illustrate the debugging features relevant to extension storage. This example is in the <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> repository.</p> </div> <p>An extension can store data using the <a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage">Storage API</a>. To view this data, in the <a href="#developer-tools-toolbox">Toolbox</a> open the <strong>Storage</strong> tab and locate <strong>Extension Storage</strong>.</p> <p><img src="/assets/img/documentation/develop/sidebar_data_in_storage.b73b888b.png" alt="sidebar script in debugger"></p> </div> </article> </section>   <section id="debugging-developer-tools-pages-and-panels" class="module"> <article class="module-content grid-x grid-padding-x"> <div class="cell small-12"> <h2>Debugging developer tools pages and panels</h2> <div class="note"> <p>We use the <a href="https://github.com/mdn/webextensions-examples/tree/master/devtools-panels">devtools-panels</a> extension example to illustrate the debugging features relevant to developer tools pages and panels. This example is in the <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> repository.</p> </div> <p><a href="https://developer.mozilla.org/Add-ons/WebExtensions/Extending_the_developer_tools">Developer tools</a> are extended with a hidden HTML page that is loaded when the tools are opened. From the hidden HTML page, <a href="https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/API/devtools.panels/create">developer tools panels</a> can be added; these are HTML pages displayed as a tool tab in the browser UI.</p> <p>To debug development tools pages and panels, use the <a href="#developer-tools-toolbox">Toolbox</a> <strong>Debugger</strong> in the <a href="https://developer.mozilla.org/docs/Tools/Web_Console/Split_console">split console</a> view so you can view the <strong>Console</strong> below <strong>Debugger</strong>.</p> <p>To debug additions to the developer tools, open the developer tools and any custom panels, and locate their JavaScript in <strong>Debugger</strong>.</p> <p><img src="/assets/img/documentation/develop/developer_tools_in_debugger.7ddcbe4a.png" alt="developer tools in debugger"></p> <p>In the <strong>Debugger</strong> you can set breakpoints, step through code, modify the extension's state, and do <a href="https://developer.mozilla.org/docs/Tools/Debugger">everything else you'd expect to be able to do in a debugger</a>. Any messages logged by your code display in <strong>Console</strong>.</p> <p>To debug the custom developer tools pages' HTML and CSS:</p> <ul> <li>switch to <strong>Inspector</strong>.</li> <li>click the page selector (1).</li> <li>click the custom development tools page item you want to inspect (2).</li> </ul> <p><img src="/assets/img/documentation/develop/developer_tools_selecting_page_in_inspector.455d6e66.png" alt="developer tools selecting page in inspector"></p> <p>You can <a href="https://developer.mozilla.org/docs/Tools/Page_Inspector">review and modify the custom development tools page HTML and CSS in <strong>Inspector</strong></a>, as you would with any webpage.</p> </div> </article> </section>   <section id="debug-permission-requests" class="module"> <article class="module-content grid-x grid-padding-x"> <div class="cell small-12"> <h2>Debug permission requests</h2> <p>For information on debugging permission requests, see <a href="/documentation/develop/test-permission-requests/">Test permission requests</a>.</p> </div> </article> </section>   <section id="debugging-browser-restarts" class="module"> <article class="module-content grid-x grid-padding-x"> <div class="cell small-12"> <h2>Debugging browser restarts</h2> <p>If your extension could be affected by the browser restarting, such as when a session is restored, you may want to test to ensure your code works as expected in those conditions.</p> <p>For more details, see <a href="/documentation/develop/testing-persistent-and-restart-features/">Testing persistent and restart features</a>.</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/debugging/">debugging</a>  <a href="/tags/firefox/">firefox</a>  <a href="/tags/guide/">guide</a>  <a href="/tags/mozilla/">mozilla</a>  <a href="/tags/webextensions/">webextensions</a> </p><p><span class="meta-label contributors">Contributors:</span> <a href="https://github.com/majordwarf/" title="View majordwarf on Github">majordwarf</a> <a href="https://github.com/rebloor/" title="View rebloor on Github">rebloor</a> <a href="https://github.com/irenesmith/" title="View irenesmith on Github">irenesmith</a> <a href="https://github.com/hellosct1/" title="View hellosct1 on Github">hellosct1</a> <a href="https://github.com/janat08/" title="View janat08 on Github">janat08</a> <a href="https://github.com/MNizam0802/" title="View MNizam0802 on Github">MNizam0802</a> <a href="https://github.com/ExE-Boss/" title="View ExE-Boss on Github">ExE-Boss</a> <a href="https://github.com/Dietrich/" title="View Dietrich on Github">Dietrich</a> <a href="https://github.com/freaktechnik/" title="View freaktechnik on Github">freaktechnik</a> <a href="https://github.com/suterj/" title="View suterj on Github">suterj</a> <a href="https://github.com/andrewtruongmoz/" title="View andrewtruongmoz on Github">andrewtruongmoz</a> <a href="https://github.com/wbamberg/" title="View wbamberg on Github">wbamberg</a> <a href="https://github.com/CaemU/" title="View CaemU on Github">CaemU</a> <a href="https://github.com/carlin-scott/" title="View carlin-scott on Github">carlin-scott</a> <a href="https://github.com/matthewjwein/" title="View matthewjwein on Github">matthewjwein</a> <a href="https://github.com/abdullahdiaa/" title="View abdullahdiaa on Github">abdullahdiaa</a> <a href="https://github.com/aroraharsh010/" title="View aroraharsh010 on Github">aroraharsh010</a> </p><p><span class="meta-label date">Last update:</span> <a href="https://github.com/aroraharsh010/" title="View aroraharsh010 on Github" itemprop="author" itemscope="" itemtype="http://schema.org/Person"><span class="p-author h-card" itemprop="name">aroraharsh010</span></a> <time class="dt-published" datetime="2020-01-24T20:07:00+00:00" itemprop="datePublished">Jan 24, 2020 </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/temporary-installation-in-firefox/" class="cell auto tile tile-block-link"> <div class="block-link"><p>Develop</p><h5>Temporary installation in Firefox</h5> </div> </a> <a href="/documentation/develop/testing-persistent-and-restart-features/" class="cell auto tile tile-block-link"> <div class="block-link"><p>Develop</p><h5>Testing persistent and restart features</h5> </div> </a> <a href="/documentation/develop/test-permission-requests/" class="cell auto tile tile-block-link"> <div class="block-link"><p>Develop</p><h5>Test permission requests</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/debugging.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

Debugging | Firefox Extension Workshop