Added permissions required overlay to popup for Firefox (#283)

NikkelM · May 21, 2024 · c97f609 · c97f609
1 parent 2ebf7d5
commit c97f609
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 118 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,9 +1,10 @@
 # Changelog
 
-## v3.1.2-beta
+## v3.1.2
 
 <!--Releasenotes start-->
 - Fixed the shuffle button not showing up if the user is on a different version of the YouTube UI.
+- Firefox: If not already granted, the extension will now ask for permissions whenever the popup is opened.
 - Fixed a bug that would cause the changelog page to show changes from an incorrect version in some cases.
 - Updated versioning scheme for a better distinction between stable and beta versions.
 <!--Releasenotes end-->

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "random-youtube-video",
-  "version": "3.1.1",
+  "version": "3.1.2",
   "description": "Customize, shuffle and play random videos from any YouTube channel.",
   "scripts": {
 		"dev": "concurrently \"npm run dev:chromium\" \"npm run dev:firefox\"",

diff --git a/src/html/popup/popup.js b/src/html/popup/popup.js
@@ -25,6 +25,7 @@ if (isPopup) {
 	}
 }
 
+const isFirefox = typeof browser !== "undefined";
 const domElements = getPopupDomElements();
 await setPopupDomElementValuesFromConfig(domElements);
 await setPopupDomElemenEventListeners(domElements);
@@ -41,7 +42,7 @@ try {
 // --- Private ---
 // Get relevant DOM elements
 function getPopupDomElements() {
-	/* global reviewDonationDiv, reviewDiv, donationDiv, customApiKeyInputDiv, customApiKeyInputInfoDiv, shuffleNumVideosInPlaylistDiv, channelCustomOptionsDiv, channelCustomOptionsDropdownDiv, forYourInformationDiv, dailyQuotaNoticeDiv */
+	/* global reviewDonationDiv, reviewDiv, donationDiv, firefoxPermissionsNeededDiv, customApiKeyInputDiv, customApiKeyInputInfoDiv, shuffleNumVideosInPlaylistDiv, channelCustomOptionsDiv, channelCustomOptionsDropdownDiv, forYourInformationDiv, dailyQuotaNoticeDiv */
 	/* eslint no-undef: "error" */
 	return {
 		body: document.body,
@@ -57,6 +58,10 @@ function getPopupDomElements() {
 		donationDiv: reviewDonationDiv.children.namedItem("donationDiv"),
 		// Donation close button
 		donationOverlayCloseButton: donationDiv.children.namedItem("donationOverlayCloseButton"),
+		// Firefox permissions needed div
+		firefoxPermissionsNeededDiv: document.getElementById("firefoxPermissionsNeededDiv"),
+		// Firefox permissions needed button
+		firefoxPermissionsNeededButton: document.getElementById("firefoxPermissionsNeededButton"),
 
 		// GLOBAL SETTINGS
 		// Custom API key: Option toggle
@@ -429,34 +434,45 @@ async function setPopupDomElemenEventListeners(domElements) {
 	});
 }
 
+// When the popup is opened, checks if an overlay should be shown
 async function determineOverlayVisibility(domElements) {
-	if (!configSync.reviewMessageShown && configSync.numShuffledVideosTotal < 150 && configSync.numShuffledVideosTotal >= 20) {
-		domElements.reviewDiv.classList.remove("hidden");
-		domElements.reviewDonationDiv.classList.remove("hidden");
-		await setSyncStorageValue("reviewMessageShown", true);
-
-		domElements.reviewOverlayCloseButton.addEventListener("click", function () {
-			domElements.reviewDonationDiv.classList.add("hidden");
-			domElements.reviewDiv.classList.add("hidden");
+	// If we are on Firefox and have not been granted permissions, show the overlay and then ask for permissions
+	if (isFirefox && !await browser.permissions.contains({ permissions: ["tabs"], origins: ["*://*.youtube.com/*"] })) {
+		domElements.firefoxPermissionsNeededDiv.classList.remove("hidden");
+
+		domElements.firefoxPermissionsNeededButton.addEventListener("click", async function () {
+			browser.permissions.request({ permissions: ["tabs"], origins: ["*://*.youtube.com/*"] });
+			window.close();
 		});
-	} else if (!configSync.donationMessageShown && configSync.numShuffledVideosTotal >= 150) {
-		domElements.donationDiv.classList.remove("hidden");
-		domElements.reviewDonationDiv.classList.remove("hidden");
-		await setSyncStorageValue("donationMessageShown", true);
-
-		domElements.donationOverlayCloseButton.addEventListener("click", function () {
-			domElements.reviewDonationDiv.classList.add("hidden");
-			domElements.donationDiv.classList.add("hidden");
+	} else {
+		if (!configSync.reviewMessageShown && configSync.numShuffledVideosTotal < 150 && configSync.numShuffledVideosTotal >= 20) {
+			domElements.reviewDiv.classList.remove("hidden");
+			domElements.reviewDonationDiv.classList.remove("hidden");
+			await setSyncStorageValue("reviewMessageShown", true);
+
+			domElements.reviewOverlayCloseButton.addEventListener("click", function () {
+				domElements.reviewDonationDiv.classList.add("hidden");
+				domElements.reviewDiv.classList.add("hidden");
+			});
+		} else if (!configSync.donationMessageShown && configSync.numShuffledVideosTotal >= 150) {
+			domElements.donationDiv.classList.remove("hidden");
+			domElements.reviewDonationDiv.classList.remove("hidden");
+			await setSyncStorageValue("donationMessageShown", true);
+
+			domElements.donationOverlayCloseButton.addEventListener("click", function () {
+				domElements.reviewDonationDiv.classList.add("hidden");
+				domElements.donationDiv.classList.add("hidden");
+			});
+		}
+
+		domElements.reviewDonationDiv.addEventListener("click", function (event) {
+			if (event.target === this) {
+				reviewDonationDiv.classList.add("hidden");
+				domElements.reviewDiv.classList.add("hidden");
+				domElements.donationDiv.classList.add("hidden");
+			}
 		});
 	}
-
-	domElements.reviewDonationDiv.addEventListener("click", function (event) {
-		if (event.target === this) {
-			reviewDonationDiv.classList.add("hidden");
-			domElements.reviewDiv.classList.add("hidden");
-			domElements.donationDiv.classList.add("hidden");
-		}
-	});
 }
 
 // Responsible for all DOM elements that need a reference to the current channel

diff --git a/static/html/popup.html b/static/html/popup.html
@@ -28,25 +28,9 @@ <h1>Random YouTube Video</h1>
 					<br />
 					<p>
 						Review on:
-						<a
-							class="buttonLink"
-							href="https://chromewebstore.google.com/detail/random-youtube-video/kijgnjhogkjodpakfmhgleobifempckf"
-							target="_blank"
-							rel="noopener"
-							title="Leave a review on the Chrome Web Store"
-							>Chrome</a
-						>
-						<a class="buttonLink" href="https://addons.mozilla.org/en-GB/firefox/addon/random-youtube-video/" target="_blank" rel="noopener" title="Leave a review on the Firefox Add-Ons page"
-							>Firefox</a
-						>
-						<a
-							class="buttonLink"
-							href="https://microsoftedge.microsoft.com/addons/detail/random-youtube-video/fccfflipicelkilpmgniblpoflkbhdbe"
-							target="_blank"
-							rel="noopener"
-							title="Leave a review on the Edge Add-Ons page"
-							>Edge</a
-						>
+						<a class="buttonLink" href="https://chromewebstore.google.com/detail/random-youtube-video/kijgnjhogkjodpakfmhgleobifempckf" target="_blank" rel="noopener" title="Leave a review on the Chrome Web Store">Chrome</a>
+						<a class="buttonLink" href="https://addons.mozilla.org/en-GB/firefox/addon/random-youtube-video/" target="_blank" rel="noopener" title="Leave a review on the Firefox Add-Ons page">Firefox</a>
+						<a class="buttonLink" href="https://microsoftedge.microsoft.com/addons/detail/random-youtube-video/fccfflipicelkilpmgniblpoflkbhdbe" target="_blank" rel="noopener" title="Leave a review on the Edge Add-Ons page">Edge</a>
 						<br />
 						<br />
 					</p>
@@ -69,15 +53,23 @@ <h1>Random YouTube Video</h1>
 					<br />
 					<a class="buttonLink" href="https://ko-fi.com/nikkelm" target="_blank" rel="noopener" title="Show your appreciation and support the development of the extension">Donate on Ko-Fi</a>
 					<p style="display: inline">or</p>
-					<a class="buttonLink" href="https://github.com/sponsors/NikkelM" target="_blank" rel="noopener" title="Show your appreciation and support the development of the extension"
-						>Sponsor on GitHub</a
-					>
+					<a class="buttonLink" href="https://github.com/sponsors/NikkelM" target="_blank" rel="noopener" title="Show your appreciation and support the development of the extension">Sponsor on GitHub</a>
 					<br />
 					<br />
 					<button id="donationOverlayCloseButton" class="randomYoutubeVideoButton" type="button">Maybe later</button>
 				</div>
 			</div>
 
+			<div id="firefoxPermissionsNeededDiv" class="overlayDiv hidden">
+				<div>
+					<h3>Permissions needed!</h3>
+					<br />
+					<p>To function, the extension requires your permission to access YouTube.com pages:</p>
+					<br />
+					<button id="firefoxPermissionsNeededButton" class="randomYoutubeVideoButton" type="button">Grant permissions now!</button>
+				</div>
+			</div>
+
 			<!-- OPTIONS START -->
 			<!-- <h2>Extension Settings</h2> -->
 			<p class="grey-text">Hover over an option to view a more detailed explanation.</p>
@@ -87,9 +79,7 @@ <h3>General Video Settings</h3>
 			<div class="optionsRow">
 				<!-- Shuffling: Open in new tab option toggle -->
 				<div class="toggle optionsRow-item">
-					<label
-						id="shuffleOpenInNewTabOption"
-						title="If this is enabled, shuffled videos will open in a new tab instead of the current one. This setting is ignored when using the shuffle button displayed in the popup, which will always open a new tab.">
+					<label id="shuffleOpenInNewTabOption" title="If this is enabled, shuffled videos will open in a new tab instead of the current one. This setting is ignored when using the shuffle button displayed in the popup, which will always open a new tab.">
 						Open in new tab
 						<input type="checkbox" id="shuffleOpenInNewTabOptionToggle" />
 						<span class="slider"></span>
@@ -110,10 +100,7 @@ <h3>General Video Settings</h3>
 					<div id="shuffleIgnoreShortsOptionDropdownDiv" class="optionTextInput" style="margin-top: -4px">
 						<p class="displayInline" title="Choose if the extension should shuffle from all videos uploaded on the channel, ignore shorts, or shuffle only from shorts.">Shorts handling</p>
 						<!-- Dropdown menu START -->
-						<select
-							id="shuffleIgnoreShortsOptionDropdown"
-							class="displayInline"
-							title="Choose if the extension should shuffle from all videos uploaded on the channel, ignore shorts, or shuffle only from shorts.">
+						<select id="shuffleIgnoreShortsOptionDropdown" class="displayInline" title="Choose if the extension should shuffle from all videos uploaded on the channel, ignore shorts, or shuffle only from shorts.">
 							<option value="1" title="The extension will include both shorts and normal videos in the shuffle.">Include shorts</option>
 							<option value="2" title="Shorts will be ignored when shuffling.">Ignore shorts</option>
 							<option value="0" title="The extension will only shuffle from shorts uploaded on channels (normal videos are ignored).">Only shorts</option>
@@ -128,20 +115,15 @@ <h3>General Video Settings</h3>
 			<div class="optionsRow">
 				<!-- Shuffling: Open as playlist option toggle -->
 				<div class="toggle optionsRow-item">
-					<label
-						id="shuffleOpenAsPlaylistOption"
-						title="If this is enabled, shuffling will choose multiple videos and open a temporary playlist that contains these videos. Use the input field to the right to choose how many videos should be in that playlist.">
+					<label id="shuffleOpenAsPlaylistOption" title="If this is enabled, shuffling will choose multiple videos and open a temporary playlist that contains these videos. Use the input field to the right to choose how many videos should be in that playlist.">
 						Open a playlist
 						<input type="checkbox" id="shuffleOpenAsPlaylistOptionToggle" />
 						<span class="slider"></span>
 					</label>
 				</div>
 
 				<!-- Shuffling: Open as playlist number of videos input -->
-				<div
-					id="shuffleNumVideosInPlaylistDiv"
-					class="optionsRow-item optionTextInput"
-					title="Choose how many videos should be in the playlist when shuffling. YouTube limits the number of videos in this playlist type to 50. With higher values the shuffle may take slightly longer than usual.">
+				<div id="shuffleNumVideosInPlaylistDiv" class="optionsRow-item optionTextInput" title="Choose how many videos should be in the playlist when shuffling. YouTube limits the number of videos in this playlist type to 50. With higher values the shuffle may take slightly longer than usual.">
 					<p>Videos in playlist:</p>
 					<input type="number" inputmode="numeric" class="numberInput" max="50" min="1" id="shuffleNumVideosInPlaylistInput" name="shuffleNumVideosInPlaylistInput" value="5" />
 				</div>
@@ -160,39 +142,14 @@ <h3 id="channelCustomOptionsHeader">Channel settings</h3>
 						<select id="channelCustomOptionsDropdown" class="displayInline" title="Choose from one of the provided options in the dropdown to customize your shuffling experience on this channel.">
 							<option value="allVideosOption" option-width="190px" title="No filters are applied, and a random video from all uploaded videos will be chosen.">all videos on this channel.</option>
 							<option value="dateOption" option-width="205px" title="Only videos uploaded on or after the chosen date will be considered when shuffling.">videos uploaded after date:</option>
-							<option value="videoIdOption" option-width="190px" title="Only videos uploaded on or after the day the video with the given ID was uploaded will be considered when shuffling.">
-								videos after video with ID:
-							</option>
-							<option value="percentageOption" option-width="206px" title="Only the most recent X% of videos uploaded to the channel will be considered when shuffling.">
-								the most recent % of videos:
-							</option>
+							<option value="videoIdOption" option-width="190px" title="Only videos uploaded on or after the day the video with the given ID was uploaded will be considered when shuffling.">videos after video with ID:</option>
+							<option value="percentageOption" option-width="206px" title="Only the most recent X% of videos uploaded to the channel will be considered when shuffling.">the most recent % of videos:</option>
 						</select>
 						<!-- Dropdown menu END -->
 						<!-- Input fields per option START -->
-						<input
-							type="date"
-							class="hidden dateInput"
-							id="channelCustomOptionsDateOptionInput"
-							name="channelCustomOptionsDateOptionInput"
-							title="Only videos uploaded on or after the chosen date will be considered when shuffling." />
-						<input
-							type="text"
-							inputmode="text"
-							class="hidden youtubeIdInput"
-							maxlength="11"
-							id="channelCustomOptionsVideoIdOptionInput"
-							name="channelCustomOptionsVideoIdOptionInput"
-							title="Only videos uploaded on or after the day the video with the given ID was uploaded will be considered when shuffling."
-							placeholder="Enter Video ID" />
-						<input
-							type="number"
-							inputmode="numeric"
-							class="hidden displayInline numberInput noArrows"
-							max="100"
-							min="1"
-							id="channelCustomOptionsPercentageOptionInput"
-							name="channelCustomOptionsPercentageOptionInput"
-							title="Only the most recent X% of videos uploaded to the channel will be considered when shuffling." />
+						<input type="date" class="hidden dateInput" id="channelCustomOptionsDateOptionInput" name="channelCustomOptionsDateOptionInput" title="Only videos uploaded on or after the chosen date will be considered when shuffling." />
+						<input type="text" inputmode="text" class="hidden youtubeIdInput" maxlength="11" id="channelCustomOptionsVideoIdOptionInput" name="channelCustomOptionsVideoIdOptionInput" title="Only videos uploaded on or after the day the video with the given ID was uploaded will be considered when shuffling." placeholder="Enter Video ID" />
+						<input type="number" inputmode="numeric" class="hidden displayInline numberInput noArrows" max="100" min="1" id="channelCustomOptionsPercentageOptionInput" name="channelCustomOptionsPercentageOptionInput" title="Only the most recent X% of videos uploaded to the channel will be considered when shuffling." />
 						<p id="channelCustomOptionsPercentageOptionP" class="hidden displayInline" title="Only the most recent X% of videos uploaded to the channel will be considered when shuffling.">%</p>
 						<!-- Input fields per option END -->
 					</div>
@@ -236,13 +193,7 @@ <h3 title="These settings are for people with some technical knowledge. Don't wo
 				</div>
 
 				<p style="margin-top: 6px">Your custom API key:</p>
-				<input
-					type="text"
-					id="customApiKeyInputField"
-					name="customApiKeyInputField"
-					style="width: 80%"
-					title="Enter your YouTube API key here. It will not be shared with anyone."
-					placeholder="Enter API key here. It won't be shared with anyone." />
+				<input type="text" id="customApiKeyInputField" name="customApiKeyInputField" style="width: 80%" title="Enter your YouTube API key here. It will not be shared with anyone." placeholder="Enter API key here. It won't be shared with anyone." />
 				<br />
 				<div id="customApiKeyInputInfoDiv" class="hidden">
 					<p id="customApiKeyInputInfoText"></p>
@@ -270,23 +221,9 @@ <h3 title="These settings are for people with some technical knowledge. Don't wo
 
 			<footer id="randomYoutubeVideoFooter">
 				Leave a review:
-				<a
-					class="buttonLink"
-					href="https://chromewebstore.google.com/detail/random-youtube-video/kijgnjhogkjodpakfmhgleobifempckf"
-					target="_blank"
-					rel="noopener"
-					title="Leave a review on the Chrome Web Store"
-					>Chrome</a
-				>
+				<a class="buttonLink" href="https://chromewebstore.google.com/detail/random-youtube-video/kijgnjhogkjodpakfmhgleobifempckf" target="_blank" rel="noopener" title="Leave a review on the Chrome Web Store">Chrome</a>
 				<a class="buttonLink" href="https://addons.mozilla.org/en-GB/firefox/addon/random-youtube-video/" target="_blank" rel="noopener" title="Leave a review on the Firefox Add-Ons page">Firefox</a>
-				<a
-					class="buttonLink"
-					href="https://microsoftedge.microsoft.com/addons/detail/random-youtube-video/fccfflipicelkilpmgniblpoflkbhdbe"
-					target="_blank"
-					rel="noopener"
-					title="Leave a review on the Edge Add-Ons page"
-					>Edge</a
-				>
+				<a class="buttonLink" href="https://microsoftedge.microsoft.com/addons/detail/random-youtube-video/fccfflipicelkilpmgniblpoflkbhdbe" target="_blank" rel="noopener" title="Leave a review on the Edge Add-Ons page">Edge</a>
 				<br />
 				<a class="buttonLink" href="https://github.com/NikkelM/Random-YouTube-Video" target="_blank" rel="noopener" title="View the source code or get into contact with the developer">GitHub</a>
 				<button class="randomYoutubeVideoButton" id="viewChangelogButton" type="button" title="View the latest changes to the extension">Changelog</button>

diff --git a/static/manifest.json b/static/manifest.json
@@ -1,8 +1,8 @@
 {
 	"name": "Random YouTube Video",
 	"description": "Customize, shuffle and play random videos from any YouTube channel.",
-	"version": "3.1.1",
-	"version_name": "3.1.2-beta",
+	"version": "3.1.2",
+	"version_name": "3.1.2",
 	"manifest_version": 3,
 	"content_scripts": [
 		{