{"id":2100,"date":"2026-01-12T14:20:40","date_gmt":"2026-01-12T13:20:40","guid":{"rendered":"https:\/\/www.stefanvd.net\/blog\/?p=2100"},"modified":"2026-01-24T21:48:01","modified_gmt":"2026-01-24T20:48:01","slug":"developing-and-testing-extension-on-firefox-for-android","status":"publish","type":"post","link":"https:\/\/www.stefanvd.net\/blog\/2026\/01\/12\/developing-and-testing-extension-on-firefox-for-android\/","title":{"rendered":"Firefox for Android: 23 Essential Steps to Build and Test Extensions"},"content":{"rendered":"\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><p>Table of Contents<\/p><nav><ul><li><a href=\"#deveklpmen-enviroment\">Development Environment<\/a><ul><li><a href=\"#install-android-studio\">Install Android Studio<\/a><\/li><li><a href=\"#start-the-android-emulator\">Start the Android Emulator<\/a><\/li><li><a href=\"#install-firefox-for-android\">Install Firefox for Android<\/a><ul><li><a href=\"#enable-remote-debugging\">Enable Remote Debugging<\/a><\/li><\/ul><\/li><\/ul><\/li><li><a href=\"#required-tools-on-your-computer\">Required Tools on Your Computer<\/a><ul><li><a href=\"#android-platform-tools-adb\">Android Platform Tools (ADB)<\/a><\/li><li><a href=\"#open-firefox-desktop-debugging-tools\">Open Firefox Desktop Debugging Tools<\/a><\/li><li><a href=\"#navigate-to-your-extension-directory\">Navigate to Your Extension Directory<\/a><\/li><li><a href=\"#run-the-extension-on-firefox-android\">Run the Extension on Firefox Android<\/a><\/li><li><a href=\"#debugging-firefox-extensions-on-android\">Debugging Firefox Extensions on Android<\/a><\/li><li><a href=\"#build-a-zip-package\">Build a ZIP Package<\/a><\/li><li><a href=\"#linting-and-building-your-extension\">Linting and Building Your Extension<\/a><\/li><\/ul><\/li><li><a href=\"#how-to-debug\">Troubleshooting<\/a><\/li><li><a href=\"#flash-card\">Resources<\/a><\/li><li><a href=\"#conclusion\">Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<p>Developing a browser extension should not be limited to a single platform. Today\u2019s web runs everywhere: desktop, mobile, and even spatial computing. As browser extension developers, it is time to ensure our work delivers a great experience on <strong>mobile browsers<\/strong> as well. This includes my most popular <a href=\"https:\/\/www.turnoffthelights.com\" target=\"_blank\" rel=\"noopener\">Turn Off the Lights browser extension<\/a>, which is available on all platforms, including Firefox for Android.<\/p>\n\n\n\n<p>In this guide, I will show you how to take an existing <strong>desktop browser extension<\/strong> and run it locally in <strong>Firefox for Android<\/strong>. You will learn how to set up the development environment, launch your extension on an Android emulator, and debug it using Firefox\u2019s developer tools.<\/p>\n\n\n\n<p>This article is written for developers who already have a working browser extension and want to expand support to mobile.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"deveklpmen-enviroment\">Development Environment<\/h2>\n\n\n\n<p>To run Firefox for Android locally, I will use an <strong>Android emulator<\/strong>. This requires <strong>Android Studio<\/strong>, which is available on macOS, Windows, and Linux. The steps below are shown on macOS, but the workflow is the same on Windows.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"install-android-studio\">Install Android Studio<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Download and install <a href=\"https:\/\/developer.android.com\/studio\/install\" target=\"_blank\" rel=\"noopener\">Android Studio<\/a> from the official Android Developer website.<\/li>\n\n\n\n<li>When you have Android Studio installed on your computer. Launch Android Studio and click <strong>New Project<\/strong>.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"857\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/welcome-android-studio-1024x857.webp\" alt=\"Welcome to Android Studio\" class=\"wp-image-2121\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/welcome-android-studio-1024x857.webp 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/welcome-android-studio-300x251.webp 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/welcome-android-studio-768x643.webp 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/welcome-android-studio-1536x1285.webp 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/welcome-android-studio.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Welcome to Android Studio<\/figcaption><\/figure>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>Select <strong>No Activity<\/strong>, then click <strong>Next<\/strong>.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"800\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/android-studio-new-project-1024x800.webp\" alt=\"New Project window in Android Studio\" class=\"wp-image-2122\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/android-studio-new-project-1024x800.webp 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/android-studio-new-project-300x234.webp 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/android-studio-new-project-768x600.webp 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/android-studio-new-project-1536x1201.webp 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/android-studio-new-project.webp 2024w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">New Project window in Android Studio<\/figcaption><\/figure>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li>Choose a project name (you can keep the default, &#8220;My Application&#8221;). Keep the other values, such as the package name and language, set to Kotlin, since we only need a running emulator and do not intend to build an Android app.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"800\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/new-project-android-studio-android-name-and-android-os-version-number-1024x800.webp\" alt=\"Project description window in Android Studio\" class=\"wp-image-2124\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/new-project-android-studio-android-name-and-android-os-version-number-1024x800.webp 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/new-project-android-studio-android-name-and-android-os-version-number-300x234.webp 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/new-project-android-studio-android-name-and-android-os-version-number-768x600.webp 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/new-project-android-studio-android-name-and-android-os-version-number-1536x1201.webp 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/new-project-android-studio-android-name-and-android-os-version-number.webp 2024w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Project description window in Android Studio<\/figcaption><\/figure>\n\n\n\n<ol start=\"5\" class=\"wp-block-list\">\n<li>Set the <strong>Minimum SDK<\/strong> to a recent Android version (use the latest available that is now Android 16.0).<\/li>\n\n\n\n<li>Click <strong>Finish<\/strong> and wait for the project to initialize.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"753\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/Android-studio-project-window-1024x753.webp\" alt=\"Android Studio on your My Application project\" class=\"wp-image-2126\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/Android-studio-project-window-1024x753.webp 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/Android-studio-project-window-300x221.webp 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/Android-studio-project-window-768x565.webp 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/Android-studio-project-window-1536x1130.webp 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/Android-studio-project-window-2048x1506.webp 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Android Studio on your My Application project<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"start-the-android-emulator\">Start the Android Emulator<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open the <strong>Device Manager<\/strong> from the right sidebar (the phone icon).<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"753\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/android-studio-sidebar-emulator-1024x753.webp\" alt=\"Device Manager side panel open in Android Studio\" class=\"wp-image-2127\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/android-studio-sidebar-emulator-1024x753.webp 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/android-studio-sidebar-emulator-300x221.webp 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/android-studio-sidebar-emulator-768x565.webp 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/android-studio-sidebar-emulator-1536x1130.webp 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/android-studio-sidebar-emulator-2048x1506.webp 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Device Manager side panel open in Android Studio<\/figcaption><\/figure>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>In the Device Manager list, locate <strong>\u201cMedium Phone API 36.1\u201d<\/strong> and click the Play button (to the left of the three-dot icon).<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"745\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/android-studio-with-emulator-inside-1024x745.webp\" alt=\"Emulator running in Android Studio\" class=\"wp-image-2128\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/android-studio-with-emulator-inside-1024x745.webp 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/android-studio-with-emulator-inside-300x218.webp 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/android-studio-with-emulator-inside-768x559.webp 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/android-studio-with-emulator-inside-1536x1117.webp 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/android-studio-with-emulator-inside-2048x1490.webp 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Emulator running in Android Studio<\/figcaption><\/figure>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><em>(Optional but recommended)<\/em> It can be inconvenient to keep the full Android Studio window visible. You can move the emulator outside of Android Studio. Open the <strong>Settings<\/strong> window, navigate to <strong>Tools<\/strong>, and uncheck <strong>&#8220;Launch in the Running Devices tool window&#8221;.<\/strong><\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"781\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/android-studio-settings-window-change-emulator-window-1024x781.webp\" alt=\"Android Studio Settings window\" class=\"wp-image-2129\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/android-studio-settings-window-change-emulator-window-1024x781.webp 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/android-studio-settings-window-change-emulator-window-300x229.webp 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/android-studio-settings-window-change-emulator-window-768x585.webp 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/android-studio-settings-window-change-emulator-window-1536x1171.webp 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/android-studio-settings-window-change-emulator-window-2048x1561.webp 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Android Studio Settings window<\/figcaption><\/figure>\n\n\n\n<p>Now the Android Emulator window runs outside of the Android Studio app. You can place it anywhere on your screen or even side by side, with Visual Studio Code on the left side and the Android Emulator on the right side.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"513\" height=\"1024\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/android-studio-emulator-separated-window-513x1024.webp\" alt=\"Android Emulator\" class=\"wp-image-2130\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/android-studio-emulator-separated-window-513x1024.webp 513w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/android-studio-emulator-separated-window-150x300.webp 150w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/android-studio-emulator-separated-window-768x1533.webp 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/android-studio-emulator-separated-window-769x1536.webp 769w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/android-studio-emulator-separated-window-1026x2048.webp 1026w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/android-studio-emulator-separated-window.webp 1056w\" sizes=\"(max-width: 513px) 100vw, 513px\" \/><figcaption class=\"wp-element-caption\">Android Emulator<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"install-firefox-for-android\">Install Firefox for Android<\/h3>\n\n\n\n<p>Now you need to install the Firefox web browser from the Google Play Store. I have already installed the latest stable version of Firefox on my emulator. The stable version is what most users use, so you will see the same experience as regular users. Of course, you can also install Firefox Beta or Firefox Nightly if you want a broader developer experience, including testing permissions and observing update behavior.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"513\" height=\"1024\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-about-android-513x1024.webp\" alt=\"Firefox for Android about page\" class=\"wp-image-2158\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-about-android-513x1024.webp 513w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-about-android-150x300.webp 150w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-about-android-768x1533.webp 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-about-android-769x1536.webp 769w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-about-android-1026x2048.webp 1026w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-about-android.webp 1056w\" sizes=\"(max-width: 513px) 100vw, 513px\" \/><figcaption class=\"wp-element-caption\">Firefox for Android about page<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"enable-remote-debugging\">Enable Remote Debugging<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li>When the stable Firefox for Android web browser is installed on your device, open the app.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"513\" height=\"1024\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-android-web-browser-513x1024.webp\" alt=\"Firefox for Android web browser\" class=\"wp-image-2133\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-android-web-browser-513x1024.webp 513w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-android-web-browser-150x300.webp 150w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-android-web-browser-768x1533.webp 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-android-web-browser-769x1536.webp 769w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-android-web-browser-1026x2048.webp 1026w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-android-web-browser.webp 1056w\" sizes=\"(max-width: 513px) 100vw, 513px\" \/><figcaption class=\"wp-element-caption\">Firefox for Android web browser<\/figcaption><\/figure>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>Tap the <strong>three-dot menu<\/strong> and select the menu item <strong>Settings<\/strong>.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"513\" height=\"1024\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-android-3-dots-icon-menu-panel-513x1024.webp\" alt=\"Flyout menu in Firefox for Android\" class=\"wp-image-2134\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-android-3-dots-icon-menu-panel-513x1024.webp 513w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-android-3-dots-icon-menu-panel-150x300.webp 150w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-android-3-dots-icon-menu-panel-768x1533.webp 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-android-3-dots-icon-menu-panel-769x1536.webp 769w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-android-3-dots-icon-menu-panel-1026x2048.webp 1026w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-android-3-dots-icon-menu-panel.webp 1056w\" sizes=\"(max-width: 513px) 100vw, 513px\" \/><figcaption class=\"wp-element-caption\">Flyout menu in Firefox for Android<\/figcaption><\/figure>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>Scroll to the bottom.<\/li>\n\n\n\n<li>Enable <strong>Remote debugging via USB<\/strong>.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"513\" height=\"1024\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-for-android-settings-page-usb-connection-513x1024.webp\" alt=\"Remote debugging via USB switch\" class=\"wp-image-2132\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-for-android-settings-page-usb-connection-513x1024.webp 513w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-for-android-settings-page-usb-connection-150x300.webp 150w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-for-android-settings-page-usb-connection-768x1533.webp 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-for-android-settings-page-usb-connection-769x1536.webp 769w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-for-android-settings-page-usb-connection-1026x2048.webp 1026w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-for-android-settings-page-usb-connection.webp 1056w\" sizes=\"(max-width: 513px) 100vw, 513px\" \/><figcaption class=\"wp-element-caption\">Remote debugging via USB switch<\/figcaption><\/figure>\n\n\n\n<p>This allows Firefox Desktop on your Mac and Windows computer to connect to Firefox Android.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"required-tools-on-your-computer\">Required Tools on Your Computer<\/h2>\n\n\n\n<p>Now we need some libraries on your computer to run this browser extension on your Android emulator.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"android-platform-tools-adb\">Android Platform Tools (ADB)<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Now open your Terminal on macOS. On Windows, open the Command Prompt.<\/li>\n\n\n\n<li>Type this command to install the Android SDK Platform Tools:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>brew install --cask android-platform-tools<\/code><\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>Next, type this command to see the currently active emulator on your computer. This is needed so the tested browser extension can be sent to the correct emulator ID.<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>adb devices<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"735\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/terminal-adb-devices-1024x735.webp\" alt=\"The Terminal window opens showing the result of the adb devices command\" class=\"wp-image-2164\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/terminal-adb-devices-1024x735.webp 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/terminal-adb-devices-300x215.webp 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/terminal-adb-devices-768x552.webp 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/terminal-adb-devices.webp 1384w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">The Terminal window opens showing the result of the adb devices command<\/figcaption><\/figure>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li>Finally, install this Node-based application, a command-line tool to help build, run, and test web extensions:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>brew install web-ext<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"735\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/terminal-code-adb-devices-1024x735.webp\" alt=\"The Terminal window opens, showing that the installation of web-ext is complete\" class=\"wp-image-2138\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/terminal-code-adb-devices-1024x735.webp 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/terminal-code-adb-devices-300x215.webp 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/terminal-code-adb-devices-768x552.webp 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/terminal-code-adb-devices.webp 1384w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">The Terminal window opens, showing that the installation of web-ext is complete<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"open-firefox-desktop-debugging-tools\">Open Firefox Desktop Debugging Tools<\/h3>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>Open your desktop Firefox web browser and go to <strong>about:debugging<\/strong>.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"621\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/desktop-firefox-web-browser-about-debugging-1024x621.webp\" alt=\"Desktop Firefox web browser at the about:debugging page\" class=\"wp-image-2139\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/desktop-firefox-web-browser-about-debugging-1024x621.webp 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/desktop-firefox-web-browser-about-debugging-300x182.webp 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/desktop-firefox-web-browser-about-debugging-768x465.webp 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/desktop-firefox-web-browser-about-debugging-1536x931.webp 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/desktop-firefox-web-browser-about-debugging-2048x1241.webp 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Desktop Firefox web browser at the about:debugging page<\/figcaption><\/figure>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>Click on the gray button &#8220;<strong>Enable<\/strong> <strong>USB Devices<\/strong>&#8220;.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"621\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/desktop-firefox-web-browser-usb-device-enabled-1024x621.webp\" alt=\"Active list of emulators on the left side in the desktop Firefox web browser\" class=\"wp-image-2140\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/desktop-firefox-web-browser-usb-device-enabled-1024x621.webp 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/desktop-firefox-web-browser-usb-device-enabled-300x182.webp 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/desktop-firefox-web-browser-usb-device-enabled-768x465.webp 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/desktop-firefox-web-browser-usb-device-enabled-1536x931.webp 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/desktop-firefox-web-browser-usb-device-enabled-2048x1241.webp 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Active list of emulators on the left side in the desktop Firefox web browser<\/figcaption><\/figure>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>Now you will see a list of active emulators on the right side, where you can click Connect. This allows your current Firefox web browser to debug that specific page, such as your background service worker or even the current web page in that Firefox for Android tab.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"navigate-to-your-extension-directory\">Navigate to Your Extension Directory<\/h3>\n\n\n\n<p>Now the necessary library is installed. Open your Terminal and navigate to the folder where the <code>manifest.json<\/code> file of your browser extension is located. Do this by typing <code>cd<\/code> followed by a space, then drag the folder into the Terminal and press the Enter key.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>cd \/Users\/stefanvandamme\/Documents\/GitHub\/Turn-Off-the-Lights-browser-extension\/dist\/firefox<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"run-the-extension-on-firefox-android\">Run the Extension on Firefox Android<\/h3>\n\n\n\n<p>Now, in the folder where your source browser extension is located, run it on mobile by typing:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>web-ext run -t firefox-android<\/code><\/pre>\n\n\n\n<p>If needed, add the <code>--android-device<\/code> option with the emulator name shown on your computer. For me, that is <code>emulator-5554<\/code>.<\/p>\n\n\n\n<p>The full command you need to type in the Terminal window is:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>web-ext run -t firefox-android --android-device=emulator-5554<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"735\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/terminal-web-ext-running-1024x735.webp\" alt=\"Running the web-ext command in the Terminal window\" class=\"wp-image-2142\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/terminal-web-ext-running-1024x735.webp 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/terminal-web-ext-running-300x215.webp 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/terminal-web-ext-running-768x552.webp 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/terminal-web-ext-running.webp 1384w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Running the web-ext command in the Terminal window<\/figcaption><\/figure>\n\n\n\n<p>Firefox Android will prompt you to allow a temporary extension installation. Tap OK.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"513\" height=\"1024\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-android-run-web-ext-code-513x1024.webp\" alt=\"Firefox shows a permission prompt confirming that the extension has been installed\" class=\"wp-image-2141\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-android-run-web-ext-code-513x1024.webp 513w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-android-run-web-ext-code-150x300.webp 150w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-android-run-web-ext-code-768x1533.webp 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-android-run-web-ext-code-770x1536.webp 770w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-android-run-web-ext-code.webp 1012w\" sizes=\"(max-width: 513px) 100vw, 513px\" \/><figcaption class=\"wp-element-caption\">Firefox shows a permission prompt confirming that the extension has been installed<\/figcaption><\/figure>\n\n\n\n<p>Your extension will now appear in:<\/p>\n\n\n\n<p>Three-dot menu and in the &#8220;Extensions&#8221; menu item.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"513\" height=\"1024\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-android-extension-panel-513x1024.webp\" alt=\"Firefox floating menu panel\" class=\"wp-image-2144\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-android-extension-panel-513x1024.webp 513w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-android-extension-panel-150x300.webp 150w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-android-extension-panel-768x1533.webp 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-android-extension-panel-769x1536.webp 769w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-android-extension-panel-1026x2048.webp 1026w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-android-extension-panel.webp 1056w\" sizes=\"(max-width: 513px) 100vw, 513px\" \/><figcaption class=\"wp-element-caption\">Firefox floating menu panel<\/figcaption><\/figure>\n\n\n\n<p>Next, tap on &#8220;Turn Off the Lights&#8221; menu item.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"513\" height=\"1024\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-turn-off-the-lights-for-android-listed-513x1024.webp\" alt=\"Turn Off the Lights menu item in Firefox for Android\" class=\"wp-image-2143\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-turn-off-the-lights-for-android-listed-513x1024.webp 513w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-turn-off-the-lights-for-android-listed-150x300.webp 150w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-turn-off-the-lights-for-android-listed-768x1533.webp 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-turn-off-the-lights-for-android-listed-769x1536.webp 769w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-turn-off-the-lights-for-android-listed-1026x2048.webp 1026w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-turn-off-the-lights-for-android-listed.webp 1056w\" sizes=\"(max-width: 513px) 100vw, 513px\" \/><figcaption class=\"wp-element-caption\">Turn Off the Lights menu item in Firefox for Android<\/figcaption><\/figure>\n\n\n\n<p>With a single tap on the Turn Off the Lights menu item, the web page will fade to a transparent black layer with 80% opacity, which is the default value when you install the extension for the first time.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"513\" height=\"1024\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/turn-off-the-lights-dark-layer-added-on-firefox-android-513x1024.webp\" alt=\"Dimmed web page on Firefox for Android\" class=\"wp-image-2146\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/turn-off-the-lights-dark-layer-added-on-firefox-android-513x1024.webp 513w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/turn-off-the-lights-dark-layer-added-on-firefox-android-150x300.webp 150w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/turn-off-the-lights-dark-layer-added-on-firefox-android-768x1533.webp 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/turn-off-the-lights-dark-layer-added-on-firefox-android-769x1536.webp 769w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/turn-off-the-lights-dark-layer-added-on-firefox-android-1026x2048.webp 1026w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/turn-off-the-lights-dark-layer-added-on-firefox-android.webp 1056w\" sizes=\"(max-width: 513px) 100vw, 513px\" \/><figcaption class=\"wp-element-caption\">Dimmed web page on Firefox for Android<\/figcaption><\/figure>\n\n\n\n<p>When you open the three-dot menu and go to the Extensions menu item, tap on Extensions Manager. You will then see the complete list of installed extensions, along with suggestions for extensions you can install on your Android device.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"513\" height=\"1024\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-extension-list-panel-513x1024.webp\" alt=\"Firefox for Android Extensions Manager\" class=\"wp-image-2148\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-extension-list-panel-513x1024.webp 513w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-extension-list-panel-150x300.webp 150w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-extension-list-panel-768x1533.webp 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-extension-list-panel-769x1536.webp 769w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-extension-list-panel-1026x2048.webp 1026w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-extension-list-panel.webp 1056w\" sizes=\"(max-width: 513px) 100vw, 513px\" \/><figcaption class=\"wp-element-caption\">Firefox for Android Extensions Manager<\/figcaption><\/figure>\n\n\n\n<p>Tap on the name Turn Off the Lights to open a new page where you can enable the Firefox extension, allow it in private browsing, view details, check permissions, and access the Settings page.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"513\" height=\"1024\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-turn-off-the-lights-manage-513x1024.webp\" alt=\"Turn Off the Lights extension page\" class=\"wp-image-2149\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-turn-off-the-lights-manage-513x1024.webp 513w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-turn-off-the-lights-manage-150x300.webp 150w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-turn-off-the-lights-manage-768x1533.webp 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-turn-off-the-lights-manage-769x1536.webp 769w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-turn-off-the-lights-manage-1026x2048.webp 1026w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-turn-off-the-lights-manage.webp 1056w\" sizes=\"(max-width: 513px) 100vw, 513px\" \/><figcaption class=\"wp-element-caption\">Turn Off the Lights extension page<\/figcaption><\/figure>\n\n\n\n<p>Tap on Settings, and it will open the Turn Off the Lights Options page.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"513\" height=\"1024\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/turn-off-the-lights-options-page-firefox-for-android-513x1024.webp\" alt=\"Turn Off the Lights Options page\" class=\"wp-image-2150\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/turn-off-the-lights-options-page-firefox-for-android-513x1024.webp 513w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/turn-off-the-lights-options-page-firefox-for-android-150x300.webp 150w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/turn-off-the-lights-options-page-firefox-for-android-768x1533.webp 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/turn-off-the-lights-options-page-firefox-for-android-769x1536.webp 769w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/turn-off-the-lights-options-page-firefox-for-android-1026x2048.webp 1026w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/turn-off-the-lights-options-page-firefox-for-android.webp 1056w\" sizes=\"(max-width: 513px) 100vw, 513px\" \/><figcaption class=\"wp-element-caption\">Turn Off the Lights Options page<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"debugging-firefox-extensions-on-android\">Debugging Firefox Extensions on Android<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open your Firefox desktop web browser on the left side of your screen, and place your running Android emulator on the right side.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"566\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-emulator-and-firefox-desktop-web-browser-1024x566.webp\" alt=\"Desktop Firefox web browser and Android Emulator\" class=\"wp-image-2153\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-emulator-and-firefox-desktop-web-browser-1024x566.webp 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-emulator-and-firefox-desktop-web-browser-300x166.webp 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-emulator-and-firefox-desktop-web-browser-768x424.webp 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-emulator-and-firefox-desktop-web-browser-1536x849.webp 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/firefox-emulator-and-firefox-desktop-web-browser-2048x1132.webp 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Desktop Firefox web browser and Android Emulator<\/figcaption><\/figure>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>When you click on the active device name sdk_gphone64_arm64, you will see a list of items that you can inspect, such as your temporary extension Turn Off the Lights. Clicking the gray Inspect button will open the inspection view for the background service worker.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"796\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/background-service-worker-script-debug-tab-1024x796.webp\" alt=\"Turn Off the Lights background service worker debug page\" class=\"wp-image-2154\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/background-service-worker-script-debug-tab-1024x796.webp 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/background-service-worker-script-debug-tab-300x233.webp 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/background-service-worker-script-debug-tab-768x597.webp 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/background-service-worker-script-debug-tab-1536x1193.webp 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/background-service-worker-script-debug-tab-2048x1591.webp 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Turn Off the Lights background service worker debug page<\/figcaption><\/figure>\n\n\n\n<p>You can also debug the currently active tab in Firefox for Android. Right-click on the Google tab name and click the gray Inspect button. You will see the complete DOM of that web page, and below, you can observe the stefanvd dimmed layer applied to the page.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"605\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/inspect-web-page-on-firefox-android-web-browser-1024x605.webp\" alt=\"Google web page with the stefanvd dimmed HTML element on the web page\" class=\"wp-image-2155\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/inspect-web-page-on-firefox-android-web-browser-1024x605.webp 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/inspect-web-page-on-firefox-android-web-browser-300x177.webp 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/inspect-web-page-on-firefox-android-web-browser-768x454.webp 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/inspect-web-page-on-firefox-android-web-browser-1536x907.webp 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/inspect-web-page-on-firefox-android-web-browser-2048x1210.webp 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Google web page with the stefanvd dimmed HTML element on the web page<\/figcaption><\/figure>\n\n\n\n<p>To quit debugging on your Android emulator, press Ctrl + C on your keyboard. This will end the process.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"735\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/terminal-code-running-temp-firefox-extension-1024x735.webp\" alt=\"Terminal window with the last message to quit debugging press ctrl + c\" class=\"wp-image-2151\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/terminal-code-running-temp-firefox-extension-1024x735.webp 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/terminal-code-running-temp-firefox-extension-300x215.webp 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/terminal-code-running-temp-firefox-extension-768x552.webp 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/terminal-code-running-temp-firefox-extension.webp 1384w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Terminal window with the last message to quit debugging press ctrl + c<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"build-a-zip-package\">Build a ZIP Package<\/h3>\n\n\n\n<p>When you are ready to distribute or upload your extension to the Firefox Add-ons Gallery, use the following command to build it as a ZIP file:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>web-ext build<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"807\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/web-ext-build-folder-1024x807.webp\" alt=\"Build extension ZIP file\" class=\"wp-image-2157\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/web-ext-build-folder-1024x807.webp 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/web-ext-build-folder-300x236.webp 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/web-ext-build-folder-768x605.webp 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/web-ext-build-folder-1536x1210.webp 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/web-ext-build-folder-2048x1614.webp 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Build extension ZIP file<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"linting-and-building-your-extension\">Linting and Building Your Extension<\/h3>\n\n\n\n<p>To check for errors, you can type the following command in your Terminal window:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>web-ext lint<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"621\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/visual-studio-code-eslint-1024x621.webp\" alt=\"Use ESLint in Visual Studio Code to identify which parts of your manifest or code might not work\" class=\"wp-image-2159\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/visual-studio-code-eslint-1024x621.webp 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/visual-studio-code-eslint-300x182.webp 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/visual-studio-code-eslint-768x465.webp 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/visual-studio-code-eslint-1536x931.webp 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/visual-studio-code-eslint-2048x1241.webp 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Use ESLint in Visual Studio Code to identify which parts of your manifest or code might not work<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-to-debug\">Troubleshooting<\/h2>\n\n\n\n<p>If you see a message about old ADB artifacts, try running this command to clean the folder.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>adb shell rm -f -rR -v \/sdcard\/Documents\/<\/code><\/pre>\n\n\n\n<p>Recursively and permanently deletes the entire <code>\/sdcard\/Documents\/<\/code> folder and all its contents on the connected Android device, printing each deletion as it happens without any confirmation, and then restarts the process.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>web-ext run -t firefox-android --android-device=emulator-5554<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"flash-card\">Resources<\/h2>\n\n\n\n<p>To further explore the development of the mobile Firefox for Android extension:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/developer.android.com\/studio\" target=\"_blank\" rel=\"noopener\">Download the Android Studio application<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/extensionworkshop.com\/documentation\/develop\/developing-extensions-for-firefox-for-android\/\" target=\"_blank\" rel=\"noopener\">Developing extensions for Firefox for Android<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/extensionworkshop.com\/documentation\/develop\/choosing-a-firefox-version-for-extension-development\/\" target=\"_blank\" rel=\"noopener\">Choose a Firefox version for web extension development<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/mozilla\/web-ext\" target=\"_blank\" rel=\"noopener\">GitHub Mozilla web-ext<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/extensionworkshop.com\/documentation\/develop\/getting-started-with-web-ext\/\" target=\"_blank\" rel=\"noopener\">Getting started with web-ext<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusion\">Conclusion<\/h2>\n\n\n\n<p>You now know how to run, test, and debug an existing browser extension in Firefox for Android like a pro. This workflow allows you to improve usability, performance, and reliability on mobile devices, where more users are browsing every day.<\/p>\n\n\n\n<p>By supporting mobile platforms, you are not just extending compatibility, you are delivering a better experience for your users everywhere.<\/p>\n\n\n\n<p>If you found this guide useful and would like to support continued work on browser extensions and developer education, consider supporting my work. <a href=\"https:\/\/www.stefanvd.net\/donate\/\" target=\"_blank\" rel=\"noreferrer noopener\">Every donation, big or small, makes a huge difference<\/a>. Thank you for helping me continue this important work!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Developing a browser extension should not be limited to a single platform. Today\u2019s web runs everywhere: desktop, mobile, and even spatial computing. As browser extension developers, it is time to ensure our work delivers a great experience on mobile browsers as well. This includes my most popular Turn Off the Lights browser extension, which is [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2193,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,9],"tags":[],"class_list":["post-2100","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-browser","category-programming"],"_links":{"self":[{"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/posts\/2100","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/comments?post=2100"}],"version-history":[{"count":54,"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/posts\/2100\/revisions"}],"predecessor-version":[{"id":2287,"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/posts\/2100\/revisions\/2287"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/media\/2193"}],"wp:attachment":[{"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/media?parent=2100"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/categories?post=2100"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/tags?post=2100"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}