Firefox Extension Workshop | Get help creating & publishing Firefox extensions.

<!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>Firefox Extension Workshop | Get help creating & publishing Firefox extensions.</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/"> <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=""> <meta property="og:url" content="https://extensionworkshop.com/"> <meta property="article:published_time" content="2024-06-27T14:57:48.410Z"> <script type="application/ld+json">{ "@context": "http:\u002F\u002Fschema.org", "url": "https:\u002F\u002Fextensionworkshop.com\u002F", "@type": "WebSite", "name": "Firefox Extension Workshop" }</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 full-width"><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> <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> <main class="site-content" aria-label="Content"> <div class="home"> <header id="top" class="banner intro"> <div class="graphic-bg"> <div class="parallaxFG-left left" style="background-image: url('/assets/img/header-v2-a.22abb0d6.svg');"></div> <div class="parallaxFG-right right" style="background-image: url('/assets/img/header-v2-b.b2df6bd9.svg');"></div> </div> <div class="grid-container grid-x grid-padding-x align-middle banner-content"> <div class="cell small-12 text-center"> <h1>Extend the Web</h1> <p>Get help creating and publishing Firefox add-ons that make browsing smarter, safer, and faster.</p> <p>You’ll find the resources you need, whether you’re getting started with extension development, preparing to launch your innovation, or developing a custom enterprise solution.</p> </div> </div> <div class="bottom-content"> <div class="grid-container grid-x grid-padding-x align-bottom"> <div class="cell small-12"> <section class="search-cta" 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> </section> </div> </div> </div> </header> <section id="about">  <div class="panel-intro bg-dark"> <div class="bg alt"></div> <div class="grid-container grid-x grid-padding-x align-center panel-nested"> <div class="cell small-12 medium-6 xlarge-5"> <h2>Why Create Extensions on Firefox?</h2> </div> <div class="cell small-12 medium-6 xlarge-5"> <p>Get your great idea into the hands of millions of Firefox users. Join an international community of developers. Be supported every step of the way. And, when you build for Firefox first, it’s easy to port your extension to other browsers, saving you valuable development time.</p> <p><a href="https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/What_are_WebExtensions">Learn more about extensions</a></p> </div> </div> <div class="grid-container grid-x grid-padding-x align-center tiles-intro"> <div class="cell small-12 medium-8 xlarge-6 text-center"> <h3>Cool Things Add-ons Can Do</h3> </div> </div> <div class="tiles-container mobile-slider"> <div class="grid-container grid-x grid-padding-x align-center">  <a href="https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/Working_with_the_Tabs_API" class="cell small-12 large-4 tile illustrated-tile tile-block-link"> <div class="block-link"> <p><img src="/assets/img/Tinker-with-Tabs-v2.de1eedcf.svg" alt="Tinker with Tabs" title="Tinker with Tabs"></p> <h4>Tinker with Tabs</h4> <p>Your extension can control browser tabs. Use the API to open, close, move, hide, and perform other tab management actions.</p> <p><span class="block-link-inline">Learn more about tabs</span></p> </div> </a>   <a href="https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/Content_scripts" class="cell small-12 large-4 tile illustrated-tile tile-block-link"> <div class="block-link"> <p><img src="/assets/img/Integrate-Web-Search.e6b077ed.svg" alt="Transform Web Content" title="Transform Web Content"></p> <h4>Integrate Web Search</h4> <p>Use Firefox's powerful built-in search capabilities to open up the web for users from within your own extension.</p> <p><span class="block-link-inline">Learn about enhancing content</span></p> </div> </a>   <a href="https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/user_interface" class="cell small-12 large-4 tile illustrated-tile tile-block-link"> <div class="block-link"> <p><img src="/assets/img/Add-Innovative-Features-v2.0c322dab.svg" alt="Add Innovative Features" title="Add Innovative Features"></p> <h4>Add Innovative Features</h4> <p>Think the browser is missing a feature, such as a built-in calculator, music streaming, or language translation? Add a toolbar button to expose your extension's new capabilities.</p> <p><span class="block-link-inline">Visit example</span></p> </div> </a>  </div> </div> </div>   <div class="grid-container grid-x grid-padding-x align-center tiles-footer"> <div class="cell small-12 medium-8 xlarge-6 text-center"> <p><a href="https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/Examples">View more extension code examples</a></p> <p><a href="https://addons.mozilla.org">Explore live extensions</a></p> </div> </div>   <div class="section-anatomy panel"> <div class="grid-container grid-x grid-padding-x align-center"> <div class="cell small-12 medium-6 xlarge-5"> <h2>Anatomy of an Extension</h2> </div> <div class="cell small-12 medium-6 xlarge-5"> <p>An extension is a simple collection of files that modify the browser’s appearance and behavior. It can add user interface elements, alter content, or perform background tasks that enhance browsing.</p> <p><a href="https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">Learn more about extension anatomy</a></p> </div> </div> <div class="grid-container grid-x grid-padding-x align-center"> <div class="cell small-12 xlarge-10"> <div class="anatomy-container"> <div class="anatomy-illustration"><svg id="anatomy-of-an-extension-graphic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="702.7" height="518.9" viewBox="0 0 702.7 518.9"> <defs> <radialGradient id="radial-gradient" cx="399.52" cy="1405.34" r="703.71" gradientTransform="translate(1227.22 -692.18) rotate(44.6)" gradientUnits="userSpaceOnUse"><stop offset="0.4" stop-color="#cdcdd4" stop-opacity="0"></stop><stop offset="0.58" stop-color="#cdcdd4" stop-opacity="0.02"></stop><stop offset="0.77" stop-color="#cdcdd4" stop-opacity="0.08"></stop><stop offset="0.96" stop-color="#cdcdd4" stop-opacity="0.18"></stop><stop offset="1" stop-color="#cdcdd4" stop-opacity="0.2"></stop></radialGradient><radialGradient id="radial-gradient-2" cx="1951.3" cy="-191.3" r="703.71" gradientTransform="translate(1690.77 1162.8) rotate(-135.4)" xlink:href="#radial-gradient"></radialGradient><radialGradient id="radial-gradient-3" cx="471.51" cy="222.81" r="242.29" gradientUnits="userSpaceOnUse"><stop offset="0.26" stop-color="#cdcdd4" stop-opacity="0"></stop><stop offset="0.4" stop-color="#cdcdd4" stop-opacity="0.02"></stop><stop offset="0.55" stop-color="#cdcdd4" stop-opacity="0.08"></stop><stop offset="0.69" stop-color="#cdcdd4" stop-opacity="0.18"></stop><stop offset="0.72" stop-color="#cdcdd4" stop-opacity="0.2"></stop></radialGradient><radialGradient id="radial-gradient-4" cx="335.08" cy="216.93" r="355.96" gradientUnits="userSpaceOnUse"><stop offset="0.27" stop-color="#cdcdd4" stop-opacity="0"></stop><stop offset="0.46" stop-color="#cdcdd4" stop-opacity="0.02"></stop><stop offset="0.66" stop-color="#cdcdd4" stop-opacity="0.08"></stop><stop offset="0.86" stop-color="#cdcdd4" stop-opacity="0.18"></stop><stop offset="0.9" stop-color="#cdcdd4" stop-opacity="0.2"></stop></radialGradient> </defs> <g id="graphic"><path d="M253.52,470.86A40.08,40.08,0,0,0,253,390.7c-72.67.51-132.2-58.2-132.7-130.86s58.2-132.2,130.86-132.7A40.09,40.09,0,0,0,250.56,47C133.7,47.78,39.28,143.53,40.09,260.39S136.65,471.68,253.52,470.86Z" style="fill:url(#radial-gradient)"></path><path d="M438.48,47a40.09,40.09,0,0,0,.56,80.17c72.67-.51,132.2,58.2,132.7,130.86s-58.2,132.2-130.86,132.7a40.09,40.09,0,0,0,.56,80.17c116.86-.82,211.28-96.56,210.47-213.42S555.35,46.16,438.48,47Z" style="fill:url(#radial-gradient-2)"></path><path d="M644.1,126.65a22.45,22.45,0,0,1-22.36,22.45h-89.9a17.17,17.17,0,0,1,0-34.33,17.48,17.48,0,0,1,4.12.52,17.43,17.43,0,0,1-.47-4A17.7,17.7,0,0,1,563.2,96.72a29.75,29.75,0,0,1,58.54,7.47A22.46,22.46,0,0,1,644.1,126.65Z" style="fill:url(#radial-gradient-3)"></path><path d="M201.07,368.43a25.7,25.7,0,0,0-6.18.75,26.68,26.68,0,0,0-41.08-28,44.85,44.85,0,0,0-88.23,11.27,33.7,33.7,0,1,0,0,67.39H201.07a25.72,25.72,0,1,0,0-51.44Z" style="fill:url(#radial-gradient-4)"></path></g> <g class="tile popup-action" id="background" data-panel="anatomy-background"><path d="M597.86,351.49a.74.74,0,0,0-.55-.58l-260-60.07a.69.69,0,0,0-.35,0L96.37,350.91a.75.75,0,0,0-.54.58h0v22h.13a.71.71,0,0,0-.13.4.77.77,0,0,0,.57.73L337,434.72l.18,0,.17,0,260-60.07a.75.75,0,0,0,.58-.73.78.78,0,0,0-.12-.4h.12v-22Z" style="fill:#4f42ff"></path><path d="M597.86,351.49a.4.4,0,0,1,0,.15v-.15Z" style="fill:#3e3ee5"></path><path d="M597.31,352.37l-260,60.07a.47.47,0,0,1-.17,0,.55.55,0,0,1-.18,0L96.37,352.37a.75.75,0,0,1-.57-.73v21.88h.13a.71.71,0,0,0-.13.4.77.77,0,0,0,.57.73L337,434.72l.18,0,.17,0,260-60.07a.75.75,0,0,0,.58-.73.78.78,0,0,0-.12-.4h.12V351.64A.75.75,0,0,1,597.31,352.37Z" style="fill:#592acb"></path><path d="M95.8,351.49v.15a.8.8,0,0,1,0-.15Z" style="fill:#3e3ee5"></path><path d="M597.31,350.91l-260-60.07a.69.69,0,0,0-.35,0L96.37,350.91a.75.75,0,0,0-.54.58.8.8,0,0,0,0,.15.75.75,0,0,0,.57.73L337,412.44a.55.55,0,0,0,.18,0,.47.47,0,0,0,.17,0l260-60.07a.75.75,0,0,0,.58-.73.4.4,0,0,0,0-.15A.74.74,0,0,0,597.31,350.91Z" style="fill:#7542e5"></path><path d="M331.74,300.47c-64.27,16.28-128.72,31.83-193,48.12-3.36.86-3.44,2.22-.05,3.14,64.55,17.4,129.57,33.1,194.37,49.59a24.81,24.81,0,0,0,10.21-.17h0c70.09-16.55,140.31-32.57,210.52-48.61,2.94-.62,2.69-1.74-.61-2.61h-.05c-70.13-17.41-140.6-33.39-211-49.79a24.93,24.93,0,0,0-10.37.33Zm-1.06,4a17.4,17.4,0,0,1,7.14-.16c2,.45,2.07,1.27,0,1.81a18.66,18.66,0,0,1-7.44.13c-2-.46-1.79-1.25.27-1.78ZM318.2,307.7a18.53,18.53,0,0,1,7.47-.2c2,.46,2,1.31-.2,1.88a19.58,19.58,0,0,1-7.76.18c-2-.47-1.72-1.29.49-1.86Zm-126,33.88c-2.32-.61-2-1.62.68-2.3h0q51.09-13,102.2-25.89a21.15,21.15,0,0,1,8.56-.28l.35.08c2.22.51,2.07,1.49-.52,2.16q-50.91,13.14-101.83,26.22a21.55,21.55,0,0,1-9.07.11h0ZM170,345.38a18.61,18.61,0,0,1,8,0c2.14.57,2.06,1.54-.22,2.13a18.88,18.88,0,0,1-8.06,0c-2.17-.58-2-1.5.24-2.09Zm-13,3.35a18.21,18.21,0,0,1,7.81,0c2.18.58,2.26,1.53.13,2.1a18.22,18.22,0,0,1-7.88-.07h0C154.93,350.19,154.92,349.29,157.07,348.73Zm388.56,1.1c3,.75,3.23,1.21.76,1.78-68.47,15.87-137,31.55-205.36,47.9a12.81,12.81,0,0,1-6.92,0c-56.27-14.35-112.63-28.28-168.82-42.9,64.26-17.4,128.88-33.41,193.13-50.86C420.88,320.22,483.39,334.48,545.63,349.83Z" style="fill:#c689ff"></path><path d="M389.48,354.74c-32.31,8.23-64.63,16.45-96.89,24.9a10.78,10.78,0,0,1-4.47-.1c-1.38-.35-1.63-.86-.54-1.15,32.13-8.46,64.32-16.7,96.51-24.94a12.7,12.7,0,0,1,5.06,0C390.64,353.85,390.79,354.4,389.48,354.74Zm9.31,5.27a12.33,12.33,0,0,0-5,0q-44.64,11.22-89.22,22.65c-1.11.29-.91.79.41,1.12a10.49,10.49,0,0,0,4.38.09q44.75-11.49,89.59-22.63C400.29,360.9,400.22,360.35,398.79,360Z" style="fill:#c689ff"></path><path d="M424.71,363.17Q374.84,375.4,325,387.82a10.29,10.29,0,0,1-4.24-.05c-1.23-.31-1.35-.8-.23-1.08q49.59-12.54,99.28-24.7a12.2,12.2,0,0,1,4.89,0C426.06,362.31,426.06,362.84,424.71,363.17ZM407.18,374a11.74,11.74,0,0,0-4.68.06Q369,382.2,335.45,390.45c-1.13.28-1.11.74,0,1a9.92,9.92,0,0,0,4.06,0q33.64-8.25,67.33-16.34C408.23,374.81,408.38,374.3,407.18,374Z" style="fill:#c689ff"></path><path d="M291.82,336.65c-27.43,7.26-54.88,14.5-82.25,22a10.16,10.16,0,0,1-4.34-.1c-1.33-.34-1.55-.84-.49-1.13,27.36-7.46,54.77-14.69,82.18-21.93a11.27,11.27,0,0,1,4.7,0C293,335.78,293.07,336.31,291.82,336.65Zm39.81-3a11.78,11.78,0,0,0-4.84,0c-35.07,9.29-70.16,18.53-105.17,28.07-1.06.29-.8.81.59,1.16a10.51,10.51,0,0,0,4.44.12c35.08-9.56,70.24-18.81,105.38-28.12C333.26,334.53,333.08,334,331.63,333.65Z" style="fill:#c689ff"></path><path d="M317,348c-24.31,6.42-48.63,12.84-72.89,19.46a10.63,10.63,0,0,1-4.5-.12c-1.43-.36-1.72-.89-.66-1.18,24.2-6.62,48.46-13,72.71-19.45a12.08,12.08,0,0,1,5,0C318.09,347.05,318.26,347.61,317,348Zm-13.17,11.43a11.86,11.86,0,0,0-4.92-.06c-14.06,3.73-28.12,7.46-42.16,11.28-1.08.29-.78.82.65,1.18a10.77,10.77,0,0,0,4.53.12q21.12-5.72,42.29-11.27C305.45,360.3,305.28,359.74,303.81,359.38Z" style="fill:#c689ff"></path></g> <g class="tile popup-action" id="content" data-panel="anatomy-content"><path d="M598.18,259.9a.75.75,0,0,0-.58-.73l-260-60.07a.69.69,0,0,0-.35,0L96.66,259.17a.77.77,0,0,0-.57.73v0h0v22h.15a.74.74,0,0,0,.42,1.17l240.63,60.07a.55.55,0,0,0,.18,0,.47.47,0,0,0,.17,0l260-60.07A.74.74,0,0,0,598,282h.15v-22h0Z" style="fill:#00c8d7"></path><path d="M597.6,260.63l-260,60.07a.47.47,0,0,1-.17,0,.55.55,0,0,1-.18,0L96.66,260.63a.76.76,0,0,1-.57-.71h0v22h.15a.74.74,0,0,0,.42,1.17l240.63,60.07a.55.55,0,0,0,.18,0,.47.47,0,0,0,.17,0l260-60.07A.74.74,0,0,0,598,282h.15v-22h0A.75.75,0,0,1,597.6,260.63Z" style="fill:#c60084"></path><path d="M96.66,260.63,337.29,320.7a.55.55,0,0,0,.18,0,.47.47,0,0,0,.17,0l260-60.07a.75.75,0,0,0,.58-.71v0a.75.75,0,0,0-.58-.73l-260-60.07a.69.69,0,0,0-.35,0L96.66,259.17a.77.77,0,0,0-.57.73v0A.76.76,0,0,0,96.66,260.63Z" style="fill:#e31587"></path><path d="M416.85,249.61c-34.15,9.31-68.44,18.12-102.68,27.1a16.74,16.74,0,0,1-6.51-.13c-2.09-.47-2.58-1.17-1.08-1.57,34-9,68.07-17.78,102-27.12a17.14,17.14,0,0,1,5.74.42C416.59,248.79,417.75,249.37,416.85,249.61Zm19.38,6.12a17,17,0,0,0-5.76-.34c-32.67,8.59-65.42,16.93-98.14,25.36-1.54.4-1.16,1.09.83,1.53a16.18,16.18,0,0,0,6.38.08c32.94-8.44,65.9-16.78,98.8-25.35C439.35,256.75,438.4,256.18,436.23,255.73Z" style="fill:#ff6bba"></path><path d="M469.57,260.6c-35.63,9.09-71.32,18-107,27a15.36,15.36,0,0,1-6.08,0c-1.79-.4-2-1.06-.4-1.46,35.49-9,71-17.84,106.46-27a15.28,15.28,0,0,1,5.11.33C469.61,259.88,470.45,260.38,469.57,260.6Zm-6.41,10.09a14.4,14.4,0,0,0-5.28,0q-40.33,10.1-80.66,20.18c-1.62.4-1.67,1-.18,1.36a14.32,14.32,0,0,0,5.6-.12q40.49-10.16,81-20.26C464.93,271.52,464.74,271,463.16,270.69Z" style="fill:#ff6bba"></path><path d="M289.68,227.21c-29.37,8.15-58.82,16-88.25,24a11.89,11.89,0,0,1-4.93.09c-1.32-.32-1.24-.86.14-1.23,29.52-7.87,59.06-15.68,88.53-23.73a10.28,10.28,0,0,1,4.11-.09C290.52,226.46,290.74,226.92,289.68,227.21Zm34.43-2.05a11.33,11.33,0,0,0-4.36-.19c-34.85,10.31-70,19.67-105,29.31-1.37.37-1.18,1,.48,1.37a13.64,13.64,0,0,0,5.55,0c35-9.66,70.13-19,104.93-29.42C326.48,226,325.74,225.51,324.11,225.16Z" style="fill:#ff6bba"></path><path d="M323.5,238.49c-26.69,7.6-53.46,14.92-80.21,22.33a14.69,14.69,0,0,1-6-.09c-1.91-.43-2.3-1.09-.9-1.47,26.62-7.38,53.27-14.69,79.84-22.26a14.82,14.82,0,0,1,5.61.16C323.85,237.57,324.62,238.17,323.5,238.49ZM317.92,251a16.66,16.66,0,0,0-6.33-.14q-25.33,7-50.68,13.94c-1.43.39-.93,1.08,1.13,1.54a16,16,0,0,0,6.33.13q25.53-7,51.06-14C320.78,252.1,320.09,251.43,317.92,251Z" style="fill:#ff6bba"></path><path d="M188.87,267.33c3-.87,1-1.75-1.48-2.36s-4.89-1.1-7.25-1.59-4.84-1-7.15-1.6c-7.92-2-7.81-3.8-1.78-5.44l1.23-.33,5.89,1.53-1,.26c-2.42.67-1,1.55,2.1,2.34,1.88.47,3.86.9,5.71,1.3s3.72.79,5.51,1.24c5.74,1.41,8.08,2.83,6.71,4.05l.19,0c4.45-.48,9.87,0,16.74,1.64,2,.49,4,1,6.19,1.61,1.94.52,4,1.08,6.21,1.61,3.88.92,8,1.59,10.82.78l.81-.23,8.69,2.06-1.31.37c-7.85,2-16.5.77-24.21-1.1-2.93-.7-5.49-1.38-8.09-2.09s-5.08-1.39-7.69-2c-2.4-.57-6.29-1.12-9.25-.25Z" style="fill:#ff6bba"></path><path d="M477.63,246.43c-3.9,1.09-1.58,2.07.83,2.65,2.62.62,5.59,1.21,8.5,1.79s6,1.19,9,1.89c11.39,2.68,10.58,5,4.88,6.61l-1.46.41-8.75-2.07.9-.25c2.74-1,.34-1.92-3.57-2.85-2.22-.53-4.56-1-6.77-1.46-2.42-.5-4.71-1-6.74-1.47-6.89-1.64-8.92-3.07-6.93-4.42l-.19,0A46.74,46.74,0,0,1,450.81,246c-1.77-.44-3.29-.88-4.93-1.37s-3.25-1-5.1-1.41a19.91,19.91,0,0,0-9.09-.34l-1,.28-5.77-1.5,1.24-.33a43.21,43.21,0,0,1,21.49-.16c2.23.56,4.19,1.15,6.19,1.76s3.92,1.18,6.36,1.77a19.63,19.63,0,0,0,9.87-.06Z" style="fill:#ff6bba"></path></g> <g class="tile popup-action" id="interface" data-panel="anatomy-ui"><path d="M601.26,174.31a.75.75,0,0,0-.58-.73l-260-60.07a.69.69,0,0,0-.35,0L99.74,173.58a.77.77,0,0,0-.57.73v0h0v22h.15a.74.74,0,0,0,.42,1.17L340.37,257.6a.55.55,0,0,0,.18,0,.47.47,0,0,0,.17,0l260-60.07a.74.74,0,0,0,.43-1.17h.15v-22h0Z" style="fill:#ccf4ff"></path><path d="M600.68,175l-260,60.07a.47.47,0,0,1-.17,0,.55.55,0,0,1-.18,0L99.74,175a.76.76,0,0,1-.57-.71h0v22h.15a.74.74,0,0,0,.42,1.17L340.37,257.6a.55.55,0,0,0,.18,0,.47.47,0,0,0,.17,0l260-60.07a.74.74,0,0,0,.43-1.17h.15v-22h0A.75.75,0,0,1,600.68,175Z" style="fill:#ff7139"></path><path d="M99.74,175l240.63,60.07a.55.55,0,0,0,.18,0,.47.47,0,0,0,.17,0l260-60.07a.75.75,0,0,0,.58-.71v0a.75.75,0,0,0-.58-.73l-260-60.07a.69.69,0,0,0-.35,0L99.74,173.58a.77.77,0,0,0-.57.73v0A.76.76,0,0,0,99.74,175Z" style="fill:#ff8a50"></path><path d="M431.94,155.75c3.51.68,4,1.9,1,2.73a30.6,30.6,0,0,1-11.77.3c-3.5-.68-3.9-1.9-.93-2.74A30.22,30.22,0,0,1,431.94,155.75Z" style="fill:#ffb587"></path><path d="M413.8,152.26c3.48.67,3.94,1.89,1,2.73a30,30,0,0,1-11.65.31c-3.46-.67-3.86-1.9-.92-2.74A29.65,29.65,0,0,1,413.8,152.26Z" style="fill:#ffb587"></path><path d="M389.87,148.37c4.48-.12,8.44.65,8.84,1.72s-3,2-7.49,2.15-8.45-.65-8.81-1.72S385.38,148.49,389.87,148.37Z" style="fill:#ffb587"></path><path d="M380.81,200.16l-43.17,10.36c-4.21,1-12.38.76-18.11-.55l-12.93-3c-5.7-1.3-6.9-3.19-2.71-4.2,17.51-4.23,26.1-6.3,43-10.4,4.05-1,12-.71,17.78.61l13,3C383.44,197.31,384.87,199.18,380.81,200.16Z" style="fill:#ffd5b2"></path><path d="M377.38,192.75C391.44,196,395,200.5,385,202.89s-29.59,1.74-43.6-1.46-17.13-7.75-7.23-10.15S363.32,189.54,377.38,192.75Z" style="fill:#ffb587"></path><path d="M314.31,131c-2.71,0-4.91.49-4.94,1.12s2.17,1.14,4.88,1.14c11.95,0,17.92,0,29.88.11-16,3.64-24.2,5.48-40.89,9.23-2,.44-2.05,1.17-.12,1.63a19,19,0,0,0,7.1,0c16.71-3.75,24.89-5.59,40.93-9.23.11,2.76.14,4.15.2,6.94,0,.64,2.26,1.17,5,1.18a16.59,16.59,0,0,0,3.54-.31c.9-.2,1.45-.49,1.44-.81-.15-3.9-.25-5.83-.49-9.68,0-.62-2.26-1.14-5-1.16C339.25,131,330.93,131,314.31,131Z" style="fill:#ffb587"></path><path d="M482.45,162.13c-1.41.34-1.15.93.58,1.33l7.58,1.74c-9.64-.75-19.58-.35-26.15,1.21-10,2.37-8.64,6.58,3.48,9.37s30.55,3.14,40.65.77c4.89-1.14,7.12-2.75,6.31-4.52-.23-.52-2.25-1-4.5-1s-3.87.33-3.64.85c.55,1.27-1.05,2.42-4.54,3.24-7.21,1.69-20.3,1.44-29-.55s-9.72-5-2.55-6.7c5.26-1.24,13.55-1.44,21.17-.62l-6.58,1.55c-1.43.34-1.19.94.55,1.34a15.13,15.13,0,0,0,5.75.11l12.87-3c1.41-.33,1.14-.93-.61-1.33l-15.73-3.6A14.94,14.94,0,0,0,482.45,162.13Z" style="fill:#ffb587"></path><path d="M226,162.94c-17.59,4.5-26.16,6.71-43.27,11.11a11.58,11.58,0,0,1-4.69-.27c-1.58-.4-2-.94-1-1.2,17.14-4.37,25.73-6.57,43.36-11.05a11.8,11.8,0,0,1,4.69.23C226.65,162.14,227.07,162.68,226,162.94Zm11.9,5.45a11.83,11.83,0,0,0-4.72-.24c-14.74,3.83-22,5.72-36.4,9.49-1,.26-.52.8,1.08,1.21a11.67,11.67,0,0,0,4.71.26c14.41-3.78,21.63-5.68,36.35-9.52C240,169.33,239.53,168.79,237.94,168.39Z" style="fill:#ffb587"></path><path d="M286.34,176.25a11.94,11.94,0,0,0-4.81-.25c-18.1,4.78-26.92,7.13-44.56,11.83-1,.27-.49.82,1.14,1.23a11.75,11.75,0,0,0,4.76.26c17.65-4.71,26.47-7.06,44.57-11.84C288.46,177.21,288,176.66,286.34,176.25Z" style="fill:#ffb587"></path><path d="M298.48,183.57a11.9,11.9,0,0,0-4.83-.26c-14.69,3.88-21.9,5.8-36.33,9.66-1,.26-.49.82,1.15,1.23a11.89,11.89,0,0,0,4.79.26c14.44-3.85,21.66-5.77,36.36-9.66C300.64,184.53,300.13,184,298.48,183.57Z" style="fill:#ffb587"></path></g> </svg> <p class="manifest show-for-medium"><img src="/assets/img/icons/manifest.7cdcf99d.svg" alt=""><code class="nobackground">Manifest.json</code></p> </div> <div id="anatomy-control" class="anatomy-description"><svg id="anatomy-of-an-extension-graphic-mobile" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 270 424"> <defs> <radialGradient id="radial-gradient" cx="-38.68" cy="1269.55" r="300.06" gradientTransform="translate(1132.01 -554.05) rotate(44.6)" gradientUnits="userSpaceOnUse"><stop offset="0.4" stop-color="#cdcdd4" stop-opacity="0"></stop><stop offset="0.58" stop-color="#cdcdd4" stop-opacity="0.02"></stop><stop offset="0.77" stop-color="#cdcdd4" stop-opacity="0.08"></stop><stop offset="0.96" stop-color="#cdcdd4" stop-opacity="0.18"></stop><stop offset="1" stop-color="#cdcdd4" stop-opacity="0.2"></stop></radialGradient><radialGradient id="radial-gradient-2" cx="1545.5" cy="-274.99" r="300.06" gradientTransform="translate(1353.98 930.66) rotate(-135.4)" xlink:href="#radial-gradient"></radialGradient><radialGradient id="radial-gradient-3" cx="190.27" cy="166.6" r="103.31" gradientUnits="userSpaceOnUse"><stop offset="0.26" stop-color="#cdcdd4" stop-opacity="0"></stop><stop offset="0.4" stop-color="#cdcdd4" stop-opacity="0.02"></stop><stop offset="0.55" stop-color="#cdcdd4" stop-opacity="0.08"></stop><stop offset="0.69" stop-color="#cdcdd4" stop-opacity="0.18"></stop><stop offset="0.72" stop-color="#cdcdd4" stop-opacity="0.2"></stop></radialGradient><radialGradient id="radial-gradient-4" cx="132.1" cy="164.1" r="151.78" gradientUnits="userSpaceOnUse"><stop offset="0.27" stop-color="#cdcdd4" stop-opacity="0"></stop><stop offset="0.46" stop-color="#cdcdd4" stop-opacity="0.02"></stop><stop offset="0.66" stop-color="#cdcdd4" stop-opacity="0.08"></stop><stop offset="0.86" stop-color="#cdcdd4" stop-opacity="0.18"></stop><stop offset="0.9" stop-color="#cdcdd4" stop-opacity="0.2"></stop></radialGradient> </defs> <g id="mobile-graphic"><path d="M97.32,272.37a17.09,17.09,0,0,0-.24-34.18,56.19,56.19,0,0,1-.78-112.38,17.1,17.1,0,0,0-.24-34.19,90.38,90.38,0,1,0,1.26,180.75Z" style="fill:url(#radial-gradient)"></path><path d="M176.19,91.63a17.09,17.09,0,1,0,.24,34.18,56.19,56.19,0,1,1,.78,112.38,17.1,17.1,0,0,0,.24,34.19,90.38,90.38,0,0,0-1.26-180.75Z" style="fill:url(#radial-gradient-2)"></path><path d="M263.86,125.6a9.57,9.57,0,0,1-9.53,9.57H216a7.32,7.32,0,0,1,0-14.63,7.23,7.23,0,0,1,1.75.22,7.39,7.39,0,0,1-.2-1.7,7.55,7.55,0,0,1,11.82-6.22,12.69,12.69,0,0,1,25,3.19A9.57,9.57,0,0,1,263.86,125.6Z" style="fill:url(#radial-gradient-3)"></path><path d="M75,228.69a10.89,10.89,0,0,0-2.63.33A11.38,11.38,0,0,0,54.8,217.09a19.12,19.12,0,0,0-37.62,4.81,14.37,14.37,0,1,0,0,28.73H75a11,11,0,1,0,0-21.94Z" style="fill:url(#radial-gradient-4)"></path></g> <g class="tile popup-action" id="mobile-background" data-panel="anatomy-background"><path d="M246.06,281.24a.32.32,0,0,0-.25-.26L129.26,254.05a.29.29,0,0,0-.16,0L21.21,281a.35.35,0,0,0-.25.26h0v9.88H21a.28.28,0,0,0-.06.18.33.33,0,0,0,.26.32L129.1,318.56h.16l116.55-26.93a.33.33,0,0,0,.21-.51h.06v-9.88Z" style="fill:#4f42ff"></path><path d="M246.06,281.24a.14.14,0,0,1,0,.07v-.07Z" style="fill:#3e3ee5"></path><path d="M245.81,281.64,129.26,308.57h-.16L21.21,281.64a.35.35,0,0,1-.26-.33v9.81H21a.28.28,0,0,0-.06.18.33.33,0,0,0,.26.32L129.1,318.56h.16l116.55-26.93a.33.33,0,0,0,.21-.51h.06v-9.81A.34.34,0,0,1,245.81,281.64Z" style="fill:#592acb"></path><path d="M21,281.24v.07s0-.05,0-.07Z" style="fill:#3e3ee5"></path><path d="M245.81,281,129.26,254.05a.29.29,0,0,0-.16,0L21.21,281a.35.35,0,0,0-.25.26s0,0,0,.07a.35.35,0,0,0,.26.33L129.1,308.57h.16l116.55-26.93a.34.34,0,0,0,.27-.33.14.14,0,0,0,0-.07A.32.32,0,0,0,245.81,281Z" style="fill:#7542e5"></path><path d="M126.74,258.37c-28.82,7.3-57.72,14.27-86.53,21.57-1.51.39-1.54,1,0,1.41,28.95,7.8,58.1,14.84,87.15,22.23a11.07,11.07,0,0,0,4.58-.07h0c31.43-7.42,62.91-14.6,94.39-21.79,1.32-.28,1.21-.78-.27-1.17h0c-31.44-7.8-63-15-94.59-22.32a11,11,0,0,0-4.65.15Zm-.47,1.8a7.69,7.69,0,0,1,3.2-.07c.88.2.93.57,0,.81a8.36,8.36,0,0,1-3.34,0c-.89-.2-.8-.55.13-.79Zm-5.6,1.44a8.09,8.09,0,0,1,3.35-.09c.9.2.89.58-.09.84a8.71,8.71,0,0,1-3.48.08c-.91-.21-.77-.58.22-.83ZM64.15,276.8c-1-.27-.88-.73.31-1h0q22.91-5.83,45.82-11.61a9.48,9.48,0,0,1,3.84-.13l.16,0c1,.23.92.67-.24,1q-22.83,5.9-45.66,11.75a9.61,9.61,0,0,1-4.06,0h0Zm-9.92,1.7a8.36,8.36,0,0,1,3.59,0c1,.26.93.69-.1.95a8.29,8.29,0,0,1-3.61,0c-1-.26-.92-.67.1-.93ZM48.42,280a8.1,8.1,0,0,1,3.5,0c1,.26,1,.69.06.94a7.94,7.94,0,0,1-3.53,0h0C47.46,280.66,47.46,280.26,48.42,280Zm174.22.49c1.36.33,1.45.54.35.8-30.71,7.11-61.43,14.14-92.09,21.47a5.73,5.73,0,0,1-3.1,0c-25.23-6.43-50.5-12.68-75.69-19.24,28.81-7.8,57.79-15,86.59-22.8C166.71,267.22,194.74,273.61,222.64,280.5Z" style="fill:#c689ff"></path><path d="M152.63,282.7q-21.74,5.54-43.44,11.16a4.9,4.9,0,0,1-2,0c-.62-.16-.73-.39-.24-.52,14.41-3.79,28.84-7.48,43.27-11.18a5.61,5.61,0,0,1,2.27,0C153.15,282.3,153.22,282.55,152.63,282.7Zm4.18,2.36a5.68,5.68,0,0,0-2.25,0q-20,5-40,10.15c-.49.13-.41.36.19.51a4.64,4.64,0,0,0,2,0q20.07-5.14,40.17-10.14C157.48,285.46,157.45,285.22,156.81,285.06Z" style="fill:#c689ff"></path><path d="M168.43,286.48q-22.37,5.47-44.71,11a4.51,4.51,0,0,1-1.9,0c-.56-.14-.61-.36-.11-.49Q144,291.41,166.23,286a5.39,5.39,0,0,1,2.19,0C169,286.09,169,286.33,168.43,286.48Zm-7.87,4.86a5.27,5.27,0,0,0-2.09,0q-15,3.64-30.07,7.34c-.5.13-.5.33,0,.46a4.3,4.3,0,0,0,1.82,0q15.09-3.69,30.19-7.32C161,291.7,161.1,291.47,160.56,291.34Z" style="fill:#c689ff"></path><path d="M108.84,274.59c-12.3,3.25-24.6,6.5-36.88,9.85a4.56,4.56,0,0,1-1.94,0c-.6-.15-.7-.38-.22-.51,12.26-3.34,24.55-6.58,36.84-9.83a5.17,5.17,0,0,1,2.11,0C109.36,274.2,109.4,274.44,108.84,274.59Zm17.85-1.35a5.47,5.47,0,0,0-2.17,0c-15.73,4.17-31.46,8.31-47.16,12.59-.47.13-.35.36.27.52a4.65,4.65,0,0,0,2,.05c15.73-4.28,31.49-8.43,47.25-12.6C127.42,273.64,127.34,273.4,126.69,273.24Z" style="fill:#c689ff"></path><path d="M120.12,279.65c-10.9,2.88-21.8,5.76-32.68,8.73a4.65,4.65,0,0,1-2-.06c-.64-.16-.77-.39-.29-.52,10.85-3,21.72-5.85,32.6-8.72a5.41,5.41,0,0,1,2.23,0C120.62,279.25,120.69,279.5,120.12,279.65Zm-5.9,5.13a5.5,5.5,0,0,0-2.21,0q-9.45,2.5-18.9,5.06c-.49.13-.35.37.29.53a4.84,4.84,0,0,0,2,.05q9.46-2.56,19-5.05C115,285.19,114.87,284.94,114.22,284.78Z" style="fill:#c689ff"></path></g> <g class="tile popup-action" id="mobile-content" data-panel="anatomy-content"><path d="M246,176.25a.34.34,0,0,0-.26-.33L129.22,149a.22.22,0,0,0-.16,0L21.2,175.92a.33.33,0,0,0-.25.33h0v9.87H21a.31.31,0,0,0-.07.2.34.34,0,0,0,.25.33l107.86,26.92h.16l116.52-26.92a.34.34,0,0,0,.26-.33.37.37,0,0,0-.07-.2H246v-9.87h0Z" style="fill:#00c8d7"></path><path d="M245.74,176.58,129.22,203.5h-.16L21.2,176.58a.34.34,0,0,1-.25-.32h0v9.87H21a.31.31,0,0,0-.07.2.34.34,0,0,0,.25.33l107.86,26.92h.16l116.52-26.92a.34.34,0,0,0,.26-.33.37.37,0,0,0-.07-.2H246v-9.87h0A.35.35,0,0,1,245.74,176.58Z" style="fill:#c60084"></path><path d="M21.2,176.58,129.06,203.5h.16l116.52-26.92a.35.35,0,0,0,.26-.32h0a.34.34,0,0,0-.26-.33L129.22,149a.22.22,0,0,0-.16,0L21.2,175.92a.33.33,0,0,0-.25.33h0A.34.34,0,0,0,21.2,176.58Z" style="fill:#e31587"></path><path d="M164.72,171.64c-15.31,4.17-30.67,8.12-46,12.14a7.43,7.43,0,0,1-2.92-.06c-.94-.21-1.16-.52-.49-.7,15.25-4,30.51-8,45.71-12.16a7.93,7.93,0,0,1,2.58.19C164.61,171.27,165.12,171.53,164.72,171.64Zm8.69,2.74a7.57,7.57,0,0,0-2.58-.15c-14.65,3.85-29.33,7.58-44,11.36-.69.18-.52.49.37.69a7.47,7.47,0,0,0,2.86,0c14.76-3.79,29.53-7.53,44.28-11.37C174.8,174.83,174.38,174.58,173.41,174.38Z" style="fill:#ff6bba"></path><path d="M188.35,176.56c-16,4.08-32,8.06-47.95,12.09a6.91,6.91,0,0,1-2.72,0c-.81-.18-.9-.48-.19-.66,15.91-4,31.83-8,47.72-12.08a6.92,6.92,0,0,1,2.29.15C188.37,176.24,188.75,176.46,188.35,176.56Zm-2.87,4.52a6.73,6.73,0,0,0-2.37,0l-36.15,9c-.73.18-.75.46-.08.61a6.27,6.27,0,0,0,2.51-.06l36.29-9.08C186.27,181.46,186.19,181.23,185.48,181.08Z" style="fill:#ff6bba"></path><path d="M107.72,161.6c-13.17,3.65-26.37,7.18-39.56,10.74a5.49,5.49,0,0,1-2.21,0c-.59-.15-.55-.39.07-.55,13.23-3.53,26.47-7,39.68-10.64a4.36,4.36,0,0,1,1.84,0C108.1,161.26,108.2,161.46,107.72,161.6Zm15.43-.92a5,5,0,0,0-2-.09c-15.62,4.62-31.37,8.82-47.08,13.14-.61.17-.53.44.22.61a6.09,6.09,0,0,0,2.48,0c15.69-4.33,31.44-8.53,47-13.19C124.22,161.05,123.88,160.83,123.15,160.68Z" style="fill:#ff6bba"></path><path d="M122.88,166.65c-12,3.41-24,6.69-35.95,10a6.62,6.62,0,0,1-2.69,0c-.86-.19-1-.49-.41-.66,11.94-3.31,23.88-6.58,35.79-10a6.59,6.59,0,0,1,2.51.08C123,166.24,123.38,166.51,122.88,166.65Zm-2.5,5.6a7.42,7.42,0,0,0-2.84-.06l-22.72,6.25c-.63.17-.41.48.51.69a7.2,7.2,0,0,0,2.84.05l22.89-6.26C121.66,172.75,121.35,172.45,120.38,172.25Z" style="fill:#ff6bba"></path><path d="M62.53,179.58c1.34-.39.45-.79-.66-1.06s-2.19-.49-3.25-.71-2.17-.46-3.2-.72c-3.55-.89-3.5-1.7-.8-2.44l.55-.14,2.64.68-.43.12c-1.08.3-.46.69.94,1,.84.22,1.73.41,2.56.59s1.67.35,2.47.55c2.57.64,3.62,1.27,3,1.82l.08,0a22.47,22.47,0,0,1,7.51.74c.9.21,1.81.46,2.77.72s1.8.48,2.78.72a10.8,10.8,0,0,0,4.85.35l.37-.1,3.89.92-.58.16c-3.52.91-7.4.35-10.86-.49-1.31-.31-2.46-.62-3.62-.94s-2.28-.62-3.45-.9A8.86,8.86,0,0,0,66,180.4Z" style="fill:#ff6bba"></path><path d="M192,170.21c-1.74.49-.7.93.38,1.19s2.5.54,3.81.8,2.67.53,4,.85c5.1,1.2,4.74,2.25,2.18,3l-.65.18-3.92-.92.4-.12c1.23-.44.15-.86-1.6-1.27-1-.24-2-.45-3-.66s-2.12-.44-3-.65c-3.09-.74-4-1.38-3.11-2l-.08,0a21,21,0,0,1-7.39-.55c-.79-.2-1.47-.4-2.21-.61s-1.45-.43-2.28-.64a9,9,0,0,0-4.08-.15l-.46.12-2.59-.67.56-.15a19.5,19.5,0,0,1,9.63-.07c1,.25,1.88.52,2.78.79s1.75.53,2.85.8a8.89,8.89,0,0,0,4.42,0Z" style="fill:#ff6bba"></path></g> <g class="tile popup-action" id="mobile-interface" data-panel="anatomy-ui"><path d="M247.14,71.2a.34.34,0,0,0-.26-.33L130.34,43.94h-.16L22.3,70.88a.33.33,0,0,0-.26.32h0v9.88h.07a.32.32,0,0,0-.07.2.34.34,0,0,0,.26.32l107.88,26.93h.16L246.88,81.61a.32.32,0,0,0,.26-.32.32.32,0,0,0-.06-.2h.06V71.21h0Z" style="fill:#ccf4ff"></path><path d="M246.88,71.53,130.34,98.46h-.16L22.3,71.53a.33.33,0,0,1-.25-.32h0v9.88h.07a.32.32,0,0,0-.07.2.34.34,0,0,0,.26.32l107.88,26.93h.16L246.88,81.61a.32.32,0,0,0,.26-.32.32.32,0,0,0-.06-.2h.06V71.21h0A.33.33,0,0,1,246.88,71.53Z" style="fill:#ff7139"></path><path d="M22.3,71.53,130.18,98.46h.16L246.88,71.53a.33.33,0,0,0,.26-.32h0a.34.34,0,0,0-.26-.33L130.34,43.94h-.16L22.3,70.88a.33.33,0,0,0-.26.32h0A.33.33,0,0,0,22.3,71.53Z" style="fill:#ff8a50"></path><path d="M171.23,62.88c1.58.3,1.79.85.45,1.23a13.88,13.88,0,0,1-5.28.13c-1.56-.3-1.74-.85-.41-1.23A13.66,13.66,0,0,1,171.23,62.88Z" style="fill:#ffb587"></path><path d="M163.1,61.32c1.56.3,1.77.84.44,1.22a13.56,13.56,0,0,1-5.22.14c-1.56-.3-1.73-.85-.42-1.23A13.27,13.27,0,0,1,163.1,61.32Z" style="fill:#ffb587"></path><path d="M152.37,59.57c2,0,3.79.29,4,.77s-1.33.91-3.35,1-3.79-.29-3.95-.77S150.36,59.63,152.37,59.57Z" style="fill:#ffb587"></path><path d="M148.31,82.79,129,87.44a21.64,21.64,0,0,1-8.11-.25L115,85.86c-2.56-.58-3.1-1.43-1.22-1.88l19.29-4.66a21.2,21.2,0,0,1,8,.27l5.83,1.33C149.49,81.51,150.13,82.35,148.31,82.79Z" style="fill:#ffd5b2"></path><path d="M146.77,79.47c6.31,1.44,7.89,3.48,3.42,4.55s-13.26.77-19.54-.66-7.68-3.47-3.25-4.55S140.47,78,146.77,79.47Z" style="fill:#ffb587"></path><path d="M118.5,51.76c-1.22,0-2.21.22-2.22.5s1,.51,2.19.52l13.4,0C124.68,54.46,121,55.28,113.54,57c-.9.2-.92.53-.06.73a8.5,8.5,0,0,0,3.18,0L135,53.56c0,1.24.06,1.86.08,3.11,0,.29,1,.52,2.26.53a7,7,0,0,0,1.58-.14c.41-.09.65-.22.65-.36-.07-1.75-.11-2.62-.22-4.34,0-.28-1-.51-2.23-.52C129.68,51.79,126,51.78,118.5,51.76Z" style="fill:#ffb587"></path><path d="M193.88,65.74c-.63.15-.52.42.26.6l3.4.78a41.6,41.6,0,0,0-11.73.54c-4.49,1.06-3.87,3,1.56,4.2s13.7,1.41,18.23.35c2.19-.52,3.19-1.24,2.83-2-.11-.24-1-.44-2-.46s-1.74.15-1.63.38c.24.57-.47,1.08-2,1.45a34.36,34.36,0,0,1-13-.25c-3.89-.89-4.36-2.24-1.15-3A31.57,31.57,0,0,1,198.1,68l-2.95.7c-.64.15-.53.42.25.6a6.83,6.83,0,0,0,2.58.05L203.75,68c.63-.15.5-.42-.28-.6l-7.05-1.62A6.63,6.63,0,0,0,193.88,65.74Z" style="fill:#ffb587"></path><path d="M78.92,66.1l-19.4,5a5,5,0,0,1-2.1-.12c-.71-.18-.92-.42-.46-.53,7.68-2,11.53-3,19.44-5a5.3,5.3,0,0,1,2.1.1C79.2,65.75,79.39,66,78.92,66.1Zm5.34,2.45a5.25,5.25,0,0,0-2.12-.11L65.82,72.69c-.45.12-.23.36.49.55a5.21,5.21,0,0,0,2.11.11l16.3-4.26C85.17,69,85,68.73,84.26,68.55Z" style="fill:#ffb587"></path><path d="M106,72.07A5.46,5.46,0,0,0,103.8,72c-8.11,2.14-12.07,3.19-20,5.3-.45.12-.22.37.5.55a5.21,5.21,0,0,0,2.14.12c7.91-2.11,11.86-3.17,20-5.31C106.91,72.5,106.69,72.25,106,72.07Z" style="fill:#ffb587"></path><path d="M111.4,75.35a5.54,5.54,0,0,0-2.17-.12L92.94,79.57c-.44.12-.21.36.52.55a5.45,5.45,0,0,0,2.15.12c6.47-1.73,9.71-2.59,16.3-4.33C112.37,75.79,112.14,75.54,111.4,75.35Z" style="fill:#ffb587"></path></g> </svg> <button class="popup-action" data-panel="anatomy-ui"><img src="/assets/img/icons/user-interface-link.2adc0ebf.svg" alt="">User Interface</button> <button class="popup-action" data-panel="anatomy-content"><img src="/assets/img/icons/content-script-link.e855cf42.svg" alt="">Content Scripts</button> <button class="popup-action" data-panel="anatomy-background"><img src="/assets/img/icons/background-scripts-link.ede09274.svg" alt="">Background Scripts</button> </div> <p class="manifest show-for-small-only"><img src="/assets/img/icons/manifest.7cdcf99d.svg" alt=""><code class="nobackground">Manifest.json</code></p> </div> <aside class="popup-panel" id="anatomy-ui"> <p><img src="/assets/img/icons/user-interface.0da1a8c0.svg" alt="User Interface" title="User Interface"></p> <h4>User Interface</h4> <p>Add toolbar buttons, menu choices, and—only in Firefox—sidebars to display additional content. Manage tab behavior and create pop-up windows that respond to user events.</p> <p><a href="https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/user_interface">Learn more</a></p> <p><button class="close"></button></p> </aside> <aside class="popup-panel" id="anatomy-content"> <p><img src="/assets/img/icons/content-script.36474397.svg" alt="Content Scripts" title="Content Scripts"></p> <h4>Content Scripts</h4> <p>Change webpage content. Remove ads, highlight key words, and reformat elements for readability.</p> <p><a href="https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">Learn more</a></p> <p><button class="close"></button></p> </aside> <aside class="popup-panel" id="anatomy-background"> <p><img src="/assets/img/icons/background-scripts.baf8dca2.svg" alt="Background Scripts" title="Background Scripts"></p> <h4>Background Scripts</h4> <p>Manage long-term configuration beyond the current tab, and respond to user events such as button clicks and menu selections.</p> <p><a href="https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/Background_scripts">Learn more</a></p> <p><button class="close"></button></p> </aside> </div> </div> </div>  </section> <section id="build">  <div class="panel-intro bg-dark"> <div class="bg"></div> <div class="grid-container grid-x grid-padding-x align-center align-middle panel-nested"> <div class="cell small-12 medium-6"> <h2>Build extensions</h2> <p>It's easy to create your cross-browser extension for Firefox. Where your development journey begins depends on your skill and experience.</p> </div> <div class="cell small-12 medium-6"> <img src="/assets/img/build-extensions.beff3176.jpg" class="image-block-last" alt="Build extensions" title="Build extensions"> </div> </div> <div class="tiles-container"> <div class="grid-container grid-x grid-padding-x align-center">  <a href="https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/What_are_WebExtensions" class="cell small-12 medium-12 tile illustrated-tile tile-block-link"> <div class="block-link"> <p><img src="/assets/img/MDN-Docs.db7c7ab8.svg" alt="Manifest Keys" title="MDN Docs"></p> <h4>Brand new to extensions development?</h4> <p>MDN web docs will onboard you to the basics. With tutorials from simple user interface changes to complex event handling, MDN covers the structure and API behind extensions. Once you know the fundamentals, come back here to learn how Firefox takes extension development to the next level.</p> <p><span class="block-link-inline">Learn the fundamentals on MDN</span></p> </div> </a>  </div> </div> </div>   <div class="panel-collapse quick-links"> <div class="grid-container grid-x grid-padding-x align-space-between"> <div class="cell small-12"> <h2>Ready to build an extension for Firefox?</h2> <p>If you know the basics of extension development, you’re ready to create an extension for Firefox. We’ve got all the resources you need right here. Learn about cross-browser development. Get tips on testing. Make user updates smooth and painless.</p> </div>  <a href="/extension-basics/" class="cell small-6 medium-auto tile tile-block-link"> <div class="block-link"> <p><img src="/assets/img/icons/quick-link-learn.64bd5ad2.svg" alt="Community Forums" title="Community Forums"></p> <p><span class="block-link-inline">Learn</span></p> </div> </a>   <a href="/documentation/develop/" class="cell small-6 medium-auto tile tile-block-link"> <div class="block-link"> <p><img src="/assets/img/icons/quick-link-develop.98a7f1a7.svg" alt="Community Forums" title="Community Forums"></p> <p><span class="block-link-inline">Develop</span></p> </div> </a>   <a href="/documentation/develop/debugging/" class="cell small-6 medium-auto tile tile-block-link"> <div class="block-link"> <p><img src="/assets/img/icons/quick-link-test.df302783.svg" alt="Community Forums" title="Community Forums"></p> <p><span class="block-link-inline">Test & Debug</span></p> </div> </a>   <a href="/documentation/publish/" class="cell small-6 medium-auto tile tile-block-link"> <div class="block-link"> <p><img src="/assets/img/icons/quick-link-publish.db75b1e4.svg" alt="Community Forums" title="Community Forums"></p> <p><span class="block-link-inline">Publish</span></p> </div> </a>   <a href="/documentation/manage/" class="cell small-6 medium-auto tile tile-block-link"> <div class="block-link"> <p><img src="/assets/img/icons/quick-link-manage.4d0c09b2.svg" alt="Community Forums" title="Community Forums"></p> <p><span class="block-link-inline">Manage</span></p> </div> </a>  </div> </div>  <div class="panel-collapse"> <div class="grid-container grid-x grid-padding-x align-center"> <div class="cell small-12"> <h2>Build secure extensions</h2> <p>Mozilla takes the safety and privacy of its users very seriously. Be sure to review and follow these practices and policies so you can make your great idea a reality.</p> </div> </div> <div class="grid-container grid-x grid-padding-x align-center"> <div class="cell small-12 medium-6"> <img src="/assets/img/Learn-About-Security-Best-Practices.9d810c17.svg" class="image-block-first" alt="Learn about security best practices" title="Learn about security best practices"> <p><a href="/documentation/develop/build-a-secure-extension/">Learn about security best practices</a></p> </div> <div class="cell small-12 medium-6"> <img src="/assets/img/Learn-About-Our-Policies.132254cf.svg" class="image-block-first" alt="Learn about our policies" title="Learn about our policies"> <p><a href="/documentation/publish/add-on-policies/">Learn about our policies</a></p> </div> </div> </div>  <div class="panel-collapse"> <div class="grid-container grid-x grid-padding-x align-center"> <div class="cell small-12 medium-6"> <h2>Build across browsers</h2> </div> <div class="cell small-12 medium-6"> <p>Firefox is at the forefront of cross-browser compatibility. Firefox add-ons are built using the WebExtensions API, so your creation will be accessible to users no matter what browser they use.</p> <p><a href="/documentation/develop/browser-compatibility/">Learn about browser differences</a></p> <p><a href="/documentation/develop/porting-a-google-chrome-extension/">Port a Google Chrome Extension</a></p> </div> </div> </div>  <div class="section-cta bg-dark" style="background-image: url('/assets/img/extension-bg.5f631aea.svg');"> <div class="img" style="background-image: url('/assets/img/extension-v2.c27ea66d.svg');"></div> <div class="grid-container grid-x grid-padding-x align-middle"> <div class="cell small-12 large-4 xlarge-3 xlarge-offset-1"> <h3>Your extension might already be compatible!</h3> <p>See if your extension works in Firefox. Simply upload your <code>.crx</code> file to the <a href="https://addons.mozilla.org/developers/addon/validate">Developer Hub</a>.</p> </div> </div> </div>  </section> <section id="connect">  <div class="panel"> <div class="grid-container grid-x grid-padding-x align-center tiles-intro"> <div class="cell small-12"> <h2>Need some extra help along the way?</h2> <p>When you build on Firefox, you build with a community of add-on developers. And they’re eager to share their expertise and answer your questions.</p> </div> </div> <div class="tiles-container"> <div class="grid-container grid-x grid-padding-x align-center">  <a href="https://discourse.mozilla.org/c/add-ons" class="cell small-12 medium-6 tile-compact tile-block-link"> <div class="block-link"> <p><img src="/assets/img/icons/community-forums.cb8622db.svg" alt="Community Forums" title="Community Forums"></p> <h4>Community Forums</h4> <p><span class="block-link-inline">Ask questions in the forum</span></p> </div> </a>   <a href="https://mail.mozilla.org/listinfo/dev-addons" class="cell small-12 medium-6 tile-compact tile-block-link"> <div class="block-link"> <p><img src="/assets/img/icons/get-involved.6b91c47b.svg" alt="Get Involved" title="Get Involved"></p> <h4>Connect with other extension developers</h4> <p><span class="block-link-inline">Email the community</span></p> </div> </a>  </div> </div> <div class="grid-container grid-x grid-padding-x align-center tiles-footer"> <div class="cell small-12 medium-8 xlarge-6 text-center"> <p><a href="/community/">Learn more about the community</a></p> <p><a href="/community/#get-involved-in-the-community">Learn about enhancing the API</a></p> </div> </div> </div>  </section> <section id="news"> <div class="bottom-of-page parallaxFG" style="background-image: url('/assets/img/home-footer-left.a2efdc82.svg'), url('/assets/img/home-footer-right.96e30b66.svg')"></div> <div class="grid-container grid-x grid-padding-x align-center tiles-intro"> <div class="cell small-12"> <h2>Latest Developer News</h2> </div> </div> <div class="tiles-container news-slider"> <div id="rss-feed" class="grid-container grid-x grid-padding-x align-center"></div> </div> <div class="grid-container grid-x grid-padding-x align-center tiles-footer"> <div class="cell small-12 medium-8 large-6 text-center"> <p><a href="https://blog.mozilla.org/addons/">Visit add-ons blog</a></p> </div> </div> </section> </div> </main><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/index.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> <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

Firefox Extension Workshop | Get help creating & publishing Firefox extensions.