Firefox users will now be prompted for permissions on the welcome page (#258)

Author: NikkelM

CHANGELOG.md

@@ -1,11 +1,18 @@
 # Changelog
 
-## v3.0.2
+## v3.1.0
 
 <!--Releasenotes start-->
-- Fixed the fetch percentage in the shuffling page being misaligned.
+- Firefox: The welcome page now prompts users to allow the extension to access the youtube.com domain, this is needed for the extension to function.
+- Fixed a bug where the shuffle button in the popup would only work on the second try.
+- Firefox: Fixed the options page not being accessible.
+- Firefox: Fixed a bug where the extension was unable to retrieve the amount of local storage used.
 <!--Releasenotes end-->
 
+## v3.0.2
+
+- Fixed the fetch percentage in the shuffling page being misaligned.
+
 ## v3.0.1
 
 - Fixed the old "Ignore shorts" option not being updated to the new format correctly.

README.md

@@ -49,9 +49,10 @@ Do you have a favourite YouTube channel, but don't know what to watch? This exte
 The Random YouTube Video extension adds a 'Shuffle' button to YouTube channel, video and shorts pages, which will play a truly random video from the current channel. You can use the extension's popup to customize your experience further.
 
 Highlighted Features:<br>
+- The shuffle button fits right in with the YouTube interface you're used to, for an optimal experience when browsing!
 - Choose from a wide range of options to individualize your experience, such as ignoring shorts, only shuffling from the most recent videos, shuffling multiple videos into a playlist, and much more!
-- You don't need to open YouTube to shuffle from your favourite channels - the extension popup allows you to shuffle from your most recently visited channel at any time!
-- If another user has already shuffled from the channel you want to watch, the extension will run faster for you as video IDs are shared!
+- Shuffle at any time by using the shuffle button in the extension popup, which allows you to shuffle from your most recently visited channel at any time!
+- Shuffles run even faster for you if another user has already shuffled from the channel you're watching, as video IDs are shared!
 
 ## Contribution
 
@@ -89,6 +90,14 @@ Loading the extension like this will persist it until you remove it manually.
 Loading the extension like this will persist it only *until you restart Firefox*. 
 You may also test the extension with Firefox by running `npm run dev:firefox`, which uses `web-ext` to load the extension in a temporary Firefox profile. 
 
+### Firefox for Android
+
+- Make sure to have an Android device or Emulator set up for developer mode and running (follow [these instructions](https://extensionworkshop.com/documentation/develop/developing-extensions-for-firefox-for-android/#install-and-run-your-extension-in-firefox-for-android) to learn how to do so).
+- Run `adb devices` to get the device ID of your device or emulator.
+- Exchange the device ID in the `dev:android` script in `package.json` with the ID you just got. The default is `emulator-5554`.
+- Run `npm run dev:android` to load the extension in Firefox for Android.
+- Your device or emulator should now open Firefox for Android with the extension loaded.
+
 ---
 
 If you enjoy this extension and want to say thanks, consider buying me a [coffee](https://ko-fi.com/nikkelm) or [sponsoring](https://github.com/sponsors/NikkelM) this project.

package-lock.json

@@ -1,15 +1,17 @@
 {
   "name": "random-youtube-video",
-  "version": "3.0.2",
+  "version": "3.1.0",
   "description": "Customize, shuffle and play random videos from any YouTube channel.",
   "scripts": {
 		"dev": "concurrently \"npm run dev:chromium\" \"npm run dev:firefox\"",
     "dev:chromium": "webpack --env browser=chromium --watch --config webpack.dev.cjs",
     "dev:firefox": "concurrently --kill-others \"webpack --env browser=firefox --watch --config webpack.dev.cjs\" \"web-ext run --source-dir ./dist/firefox\"",
+    "dev:android": "concurrently --kill-others \"webpack --env browser=firefox --watch --config webpack.dev.cjs\" \"web-ext run --source-dir ./dist/firefox -t firefox-android --adb-device emulator-5554 --firefox-apk org.mozilla.fenix\"",
     "build": "npm run build:chromium && npm run build:firefox",
     "build:chromium": "webpack --env browser=chromium --config webpack.prod.cjs",
     "build:firefox": "webpack --env browser=firefox --config webpack.prod.cjs",
     "lint": "eslint --ext .ts,.js --max-warnings=0 . --ignore-path .eslintignore",
+    "lint:firefox": "web-ext lint --source-dir ./dist/firefox",
     "test": "c8 --reporter=lcov --reporter=text mocha ./test/testSetup.js ./test/chromeStorage.test.js ./test/**/*.test.js --require mocha-suppress-logs"
   },
   "type": "module",

package.json

@@ -3,6 +3,7 @@
 import { configSync, setSyncStorageValue } from "./chromeStorage.js";
 
 // ---------- Initialization/Chrome event listeners ----------
+const isFirefox = typeof browser !== "undefined";
 
 // Check whether a new version was installed
 async function initExtension() {
@@ -12,6 +13,10 @@ async function initExtension() {
 		await setSyncStorageValue("previousVersion", manifestData.version);
 		const welcomeUrl = chrome.runtime.getURL("html/welcome.html");
 		await chrome.tabs.create({ url: welcomeUrl });
+	} else if (isFirefox && !await browser.permissions.contains({ permissions: ["tabs"], origins: ["*://*.youtube.com/*"] })) {
+		console.log("The extension is running in Firefox and does not have the required permissions.");
+		const welcomeUrl = chrome.runtime.getURL("html/welcome.html");
+		await chrome.tabs.create({ url: welcomeUrl });
 	}
 	// 3.0.0 introduced the previousVersion config value, so the update would not be handled correctly here
 	if (configSync.previousVersion < manifestData.version || configSync.previousVersion === "3.0.0") {
@@ -25,8 +30,9 @@ await initExtension();
 // Make sure we are not using too much local storage
 async function checkLocalStorageCapacity() {
 	// If over 90% of the storage quota for playlists is used, remove playlists that have not been accessed in a long time
-	const utilizedStorage = await chrome.storage.local.getBytesInUse();
-	const maxLocalStorage = chrome.storage.local.QUOTA_BYTES;
+	const utilizedStorage = isFirefox ? JSON.stringify(await chrome.storage.local.get()).length : await chrome.storage.local.getBytesInUse();
+	// Firefox does not offer a way to get the maximum local storage capacity, so we use 5MB as per the documentation
+	const maxLocalStorage = isFirefox ? 5000000 : chrome.storage.local.QUOTA_BYTES;
 
 	console.log(`${((utilizedStorage / maxLocalStorage) * 100).toFixed(2)}% of local storage is used. (${utilizedStorage}/${maxLocalStorage} bytes)`);
 

src/background.js

@@ -30,6 +30,13 @@ await setPopupDomElementValuesFromConfig(domElements);
 await setPopupDomElemenEventListeners(domElements);
 await determineOverlayVisibility(domElements);
 
+// Restart the background script if it was stopped to make sure the shuffle button immediately works
+try {
+	await chrome.runtime.sendMessage({ command: "connectionTest" });
+} catch (error) {
+	console.log("The background worker was stopped and had to be restarted.");
+}
+
 // ----- DOM -----
 // --- Private ---
 // Get relevant DOM elements

src/html/popup/popup.js

@@ -1,15 +1,21 @@
 // Contains logic for the "Welcome" page
 import { setSyncStorageValue } from "../chromeStorage.js";
 import { buildShufflingHints, tryFocusingTab } from "./htmlUtils.js";
+import { delay } from "../utils.js";
 
 // ----- Setup -----
+const isFirefox = typeof browser !== "undefined";
 const domElements = getDomElements();
 
-// Show the "Reload all YouTube pages" div if there are youtube pages open
+let mayShowReloadAllYouTubePagesDiv = false;
 chrome.tabs.query({}, function (tabs) {
 	for (let i = 0; i <= tabs.length - 1; i++) {
 		if (tabs[i].url.split("/")[2]?.includes("youtube")) {
-			domElements.needToReloadYouTubePagesDiv.classList.remove("hidden");
+			mayShowReloadAllYouTubePagesDiv = true;
+			// Immediately show if we are not waiting for Firefox permissions
+			if (!isFirefox) {
+				domElements.needToReloadYouTubePagesDiv.classList.remove("hidden");
+			}
 			break;
 		}
 	}
@@ -29,6 +35,12 @@ function getDomElements() {
 		// The document heading with the current version
 		updateHeading: document.getElementById("updateHeading"),
 
+		// FIREFOX PERMISSIONS
+		// The div containing the permission request button
+		firefoxPermissionsDiv: document.getElementById("firefoxPermissionsDiv"),
+		// The button to request permissions
+		giveFirefoxPermissionsButton: document.getElementById("giveFirefoxPermissionsButton"),
+
 		// RELOAD YOUTUBE PAGES
 		// The div containing the button and texts to reload all YouTube pages
 		needToReloadYouTubePagesDiv: document.getElementById("needToReloadYouTubePagesDiv"),
@@ -53,6 +65,28 @@ function getDomElements() {
 
 // Set event listeners for DOM elements
 async function setPopupDomElemenEventListeners(domElements) {
+	// Firefox permissions button
+	if (isFirefox && !await browser.permissions.contains({ permissions: ["tabs"], origins: ["*://*.youtube.com/*"] })) {
+		domElements.firefoxPermissionsDiv.classList.remove("hidden");
+
+		// This is so important that we will use a browser alert window to make sure the user sees and acknowledges it
+		await delay(50);
+		alert("You need to grant the extension permission to run on YouTube in order to use it. Please grant permissions using the highlighted button.")
+
+		domElements.giveFirefoxPermissionsButton.addEventListener("click", async function () {
+			await requestFirefoxPermissions();
+			// If permissions were not granted we must ask again, without them the extension does not work
+			if (!await browser.permissions.contains({ permissions: ["tabs"], origins: ["*://*.youtube.com/*"] })) {
+				alert("You need to grant the extension permission to run on YouTube in order to use it. Please grant permissions.")
+			} else {
+				domElements.firefoxPermissionsDiv.classList.add("hidden");
+				if (mayShowReloadAllYouTubePagesDiv) {
+					domElements.needToReloadYouTubePagesDiv.classList.remove("hidden");
+				}
+			}
+		});
+	}
+
 	// Reload all YouTube pages button
 	domElements.reloadAllYouTubePagesButton.addEventListener("click", async function () {
 		let tabs = await chrome.tabs.query({});
@@ -87,4 +121,12 @@ async function setPopupDomElemenEventListeners(domElements) {
 			await chrome.tabs.create({ url: changelogUrl });
 		}
 	});
+}
+
+async function requestFirefoxPermissions() {
+	const permissionsToRequest = {
+		permissions: ["tabs"],
+		origins: ["*://*.youtube.com/*"]
+	}
+	await browser.permissions.request(permissionsToRequest);
 }

src/html/welcome.js

@@ -1,5 +1,6 @@
 {
 	"background": {
 		"service_worker": "background.js"
-	}
+	},
+	"options_page": "html/popup.html"
 }

static/chromium-manifest-extra.json

@@ -8,5 +8,11 @@
 		"gecko": {
 			"id": "RandomYouTubeVideo@NikkelM"
 		}
+	},
+	"optional_permissions": [
+		"tabs"
+	],
+	"options_ui": {
+		"page": "html/popup.html"
 	}
 }

static/firefox-manifest-extra.json

@@ -11,10 +11,17 @@
 		<div id="randomYoutubeVideo" style="margin-top: 10px">
 			<h1 id="updateHeading">Random YouTube Video</h1>
 			<h2>Welcome!</h2>
-
-			<br />
 			<br />
+
+			<div id="firefoxPermissionsDiv" class="hidden">
+				<br />
+				<h3>To be able to use the extension, you <b>MUST</b></h3>
+				<button id="giveFirefoxPermissionsButton" class="randomYoutubeVideoButton highlight-green" style="font-size: 20px">give the extension permission to access YouTube</button>
+			</div>
+
 			<div id="needToReloadYouTubePagesDiv" class="hidden">
+				<br />
+				<br />
 				<h3>Before you can start and see 'Shuffle' buttons, you need to</h3>
 				<button id="reloadAllYouTubePagesButton" class="randomYoutubeVideoButton highlight-green" style="font-size: 20px">click me to reload all <i>YouTube.com</i> pages</button>
 				<p>or do so manually.</p>