Skip to content

Commit c97f609

Browse files
NikkelMNikkelM
authored
Added permissions required overlay to popup for Firefox (#283)
1 parent 2ebf7d5 commit c97f609

File tree

5 files changed

+72
-118
lines changed

5 files changed

+72
-118
lines changed

‎CHANGELOG.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
# Changelog
22

3-
## v3.1.2-beta
3+
## v3.1.2
44

55
<!--Releasenotes start-->
66
- Fixed the shuffle button not showing up if the user is on a different version of the YouTube UI.
7+
- Firefox: If not already granted, the extension will now ask for permissions whenever the popup is opened.
78
- Fixed a bug that would cause the changelog page to show changes from an incorrect version in some cases.
89
- Updated versioning scheme for a better distinction between stable and beta versions.
910
<!--Releasenotes end-->

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "random-youtube-video",
3-
"version": "3.1.1",
3+
"version": "3.1.2",
44
"description": "Customize, shuffle and play random videos from any YouTube channel.",
55
"scripts": {
66
"dev": "concurrently \"npm run dev:chromium\" \"npm run dev:firefox\"",

‎src/html/popup/popup.js‎

Lines changed: 41 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ if (isPopup) {
2525
}
2626
}
2727

28+
const isFirefox = typeof browser !== "undefined";
2829
const domElements = getPopupDomElements();
2930
await setPopupDomElementValuesFromConfig(domElements);
3031
await setPopupDomElemenEventListeners(domElements);
@@ -41,7 +42,7 @@ try {
4142
// --- Private ---
4243
// Get relevant DOM elements
4344
function getPopupDomElements() {
44-
/* global reviewDonationDiv, reviewDiv, donationDiv, customApiKeyInputDiv, customApiKeyInputInfoDiv, shuffleNumVideosInPlaylistDiv, channelCustomOptionsDiv, channelCustomOptionsDropdownDiv, forYourInformationDiv, dailyQuotaNoticeDiv */
45+
/* global reviewDonationDiv, reviewDiv, donationDiv, firefoxPermissionsNeededDiv, customApiKeyInputDiv, customApiKeyInputInfoDiv, shuffleNumVideosInPlaylistDiv, channelCustomOptionsDiv, channelCustomOptionsDropdownDiv, forYourInformationDiv, dailyQuotaNoticeDiv */
4546
/* eslint no-undef: "error" */
4647
return {
4748
body: document.body,
@@ -57,6 +58,10 @@ function getPopupDomElements() {
5758
donationDiv: reviewDonationDiv.children.namedItem("donationDiv"),
5859
// Donation close button
5960
donationOverlayCloseButton: donationDiv.children.namedItem("donationOverlayCloseButton"),
61+
// Firefox permissions needed div
62+
firefoxPermissionsNeededDiv: document.getElementById("firefoxPermissionsNeededDiv"),
63+
// Firefox permissions needed button
64+
firefoxPermissionsNeededButton: document.getElementById("firefoxPermissionsNeededButton"),
6065

6166
// GLOBAL SETTINGS
6267
// Custom API key: Option toggle
@@ -429,34 +434,45 @@ async function setPopupDomElemenEventListeners(domElements) {
429434
});
430435
}
431436

437+
// When the popup is opened, checks if an overlay should be shown
432438
async function determineOverlayVisibility(domElements) {
433-
if (!configSync.reviewMessageShown && configSync.numShuffledVideosTotal < 150 && configSync.numShuffledVideosTotal >= 20) {
434-
domElements.reviewDiv.classList.remove("hidden");
435-
domElements.reviewDonationDiv.classList.remove("hidden");
436-
await setSyncStorageValue("reviewMessageShown", true);
437-
438-
domElements.reviewOverlayCloseButton.addEventListener("click", function () {
439-
domElements.reviewDonationDiv.classList.add("hidden");
440-
domElements.reviewDiv.classList.add("hidden");
439+
// If we are on Firefox and have not been granted permissions, show the overlay and then ask for permissions
440+
if (isFirefox && !await browser.permissions.contains({ permissions: ["tabs"], origins: ["*://*.youtube.com/*"] })) {
441+
domElements.firefoxPermissionsNeededDiv.classList.remove("hidden");
442+
443+
domElements.firefoxPermissionsNeededButton.addEventListener("click", async function () {
444+
browser.permissions.request({ permissions: ["tabs"], origins: ["*://*.youtube.com/*"] });
445+
window.close();
441446
});
442-
} else if (!configSync.donationMessageShown && configSync.numShuffledVideosTotal >= 150) {
443-
domElements.donationDiv.classList.remove("hidden");
444-
domElements.reviewDonationDiv.classList.remove("hidden");
445-
await setSyncStorageValue("donationMessageShown", true);
446-
447-
domElements.donationOverlayCloseButton.addEventListener("click", function () {
448-
domElements.reviewDonationDiv.classList.add("hidden");
449-
domElements.donationDiv.classList.add("hidden");
447+
} else {
448+
if (!configSync.reviewMessageShown && configSync.numShuffledVideosTotal < 150 && configSync.numShuffledVideosTotal >= 20) {
449+
domElements.reviewDiv.classList.remove("hidden");
450+
domElements.reviewDonationDiv.classList.remove("hidden");
451+
await setSyncStorageValue("reviewMessageShown", true);
452+
453+
domElements.reviewOverlayCloseButton.addEventListener("click", function () {
454+
domElements.reviewDonationDiv.classList.add("hidden");
455+
domElements.reviewDiv.classList.add("hidden");
456+
});
457+
} else if (!configSync.donationMessageShown && configSync.numShuffledVideosTotal >= 150) {
458+
domElements.donationDiv.classList.remove("hidden");
459+
domElements.reviewDonationDiv.classList.remove("hidden");
460+
await setSyncStorageValue("donationMessageShown", true);
461+
462+
domElements.donationOverlayCloseButton.addEventListener("click", function () {
463+
domElements.reviewDonationDiv.classList.add("hidden");
464+
domElements.donationDiv.classList.add("hidden");
465+
});
466+
}
467+
468+
domElements.reviewDonationDiv.addEventListener("click", function (event) {
469+
if (event.target === this) {
470+
reviewDonationDiv.classList.add("hidden");
471+
domElements.reviewDiv.classList.add("hidden");
472+
domElements.donationDiv.classList.add("hidden");
473+
}
450474
});
451475
}
452-
453-
domElements.reviewDonationDiv.addEventListener("click", function (event) {
454-
if (event.target === this) {
455-
reviewDonationDiv.classList.add("hidden");
456-
domElements.reviewDiv.classList.add("hidden");
457-
domElements.donationDiv.classList.add("hidden");
458-
}
459-
});
460476
}
461477

462478
// Responsible for all DOM elements that need a reference to the current channel

‎static/html/popup.html‎

Lines changed: 26 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -28,25 +28,9 @@ <h1>Random YouTube Video</h1>
2828
<br />
2929
<p>
3030
Review on:
31-
<a
32-
class="buttonLink"
33-
href="https://chromewebstore.google.com/detail/random-youtube-video/kijgnjhogkjodpakfmhgleobifempckf"
34-
target="_blank"
35-
rel="noopener"
36-
title="Leave a review on the Chrome Web Store"
37-
>Chrome</a
38-
>
39-
<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"
40-
>Firefox</a
41-
>
42-
<a
43-
class="buttonLink"
44-
href="https://microsoftedge.microsoft.com/addons/detail/random-youtube-video/fccfflipicelkilpmgniblpoflkbhdbe"
45-
target="_blank"
46-
rel="noopener"
47-
title="Leave a review on the Edge Add-Ons page"
48-
>Edge</a
49-
>
31+
<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>
32+
<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>
33+
<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>
5034
<br />
5135
<br />
5236
</p>
@@ -69,15 +53,23 @@ <h1>Random YouTube Video</h1>
6953
<br />
7054
<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>
7155
<p style="display: inline">or</p>
72-
<a class="buttonLink" href="https://github.com/sponsors/NikkelM" target="_blank" rel="noopener" title="Show your appreciation and support the development of the extension"
73-
>Sponsor on GitHub</a
74-
>
56+
<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>
7557
<br />
7658
<br />
7759
<button id="donationOverlayCloseButton" class="randomYoutubeVideoButton" type="button">Maybe later</button>
7860
</div>
7961
</div>
8062

63+
<div id="firefoxPermissionsNeededDiv" class="overlayDiv hidden">
64+
<div>
65+
<h3>Permissions needed!</h3>
66+
<br />
67+
<p>To function, the extension requires your permission to access YouTube.com pages:</p>
68+
<br />
69+
<button id="firefoxPermissionsNeededButton" class="randomYoutubeVideoButton" type="button">Grant permissions now!</button>
70+
</div>
71+
</div>
72+
8173
<!-- OPTIONS START -->
8274
<!-- <h2>Extension Settings</h2> -->
8375
<p class="grey-text">Hover over an option to view a more detailed explanation.</p>
@@ -87,9 +79,7 @@ <h3>General Video Settings</h3>
8779
<div class="optionsRow">
8880
<!-- Shuffling: Open in new tab option toggle -->
8981
<div class="toggle optionsRow-item">
90-
<label
91-
id="shuffleOpenInNewTabOption"
92-
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.">
82+
<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.">
9383
Open in new tab
9484
<input type="checkbox" id="shuffleOpenInNewTabOptionToggle" />
9585
<span class="slider"></span>
@@ -110,10 +100,7 @@ <h3>General Video Settings</h3>
110100
<div id="shuffleIgnoreShortsOptionDropdownDiv" class="optionTextInput" style="margin-top: -4px">
111101
<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>
112102
<!-- Dropdown menu START -->
113-
<select
114-
id="shuffleIgnoreShortsOptionDropdown"
115-
class="displayInline"
116-
title="Choose if the extension should shuffle from all videos uploaded on the channel, ignore shorts, or shuffle only from shorts.">
103+
<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.">
117104
<option value="1" title="The extension will include both shorts and normal videos in the shuffle.">Include shorts</option>
118105
<option value="2" title="Shorts will be ignored when shuffling.">Ignore shorts</option>
119106
<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>
128115
<div class="optionsRow">
129116
<!-- Shuffling: Open as playlist option toggle -->
130117
<div class="toggle optionsRow-item">
131-
<label
132-
id="shuffleOpenAsPlaylistOption"
133-
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.">
118+
<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.">
134119
Open a playlist
135120
<input type="checkbox" id="shuffleOpenAsPlaylistOptionToggle" />
136121
<span class="slider"></span>
137122
</label>
138123
</div>
139124

140125
<!-- Shuffling: Open as playlist number of videos input -->
141-
<div
142-
id="shuffleNumVideosInPlaylistDiv"
143-
class="optionsRow-item optionTextInput"
144-
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.">
126+
<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.">
145127
<p>Videos in playlist:</p>
146128
<input type="number" inputmode="numeric" class="numberInput" max="50" min="1" id="shuffleNumVideosInPlaylistInput" name="shuffleNumVideosInPlaylistInput" value="5" />
147129
</div>
@@ -160,39 +142,14 @@ <h3 id="channelCustomOptionsHeader">Channel settings</h3>
160142
<select id="channelCustomOptionsDropdown" class="displayInline" title="Choose from one of the provided options in the dropdown to customize your shuffling experience on this channel.">
161143
<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>
162144
<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>
163-
<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.">
164-
videos after video with ID:
165-
</option>
166-
<option value="percentageOption" option-width="206px" title="Only the most recent X% of videos uploaded to the channel will be considered when shuffling.">
167-
the most recent % of videos:
168-
</option>
145+
<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>
146+
<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>
169147
</select>
170148
<!-- Dropdown menu END -->
171149
<!-- Input fields per option START -->
172-
<input
173-
type="date"
174-
class="hidden dateInput"
175-
id="channelCustomOptionsDateOptionInput"
176-
name="channelCustomOptionsDateOptionInput"
177-
title="Only videos uploaded on or after the chosen date will be considered when shuffling." />
178-
<input
179-
type="text"
180-
inputmode="text"
181-
class="hidden youtubeIdInput"
182-
maxlength="11"
183-
id="channelCustomOptionsVideoIdOptionInput"
184-
name="channelCustomOptionsVideoIdOptionInput"
185-
title="Only videos uploaded on or after the day the video with the given ID was uploaded will be considered when shuffling."
186-
placeholder="Enter Video ID" />
187-
<input
188-
type="number"
189-
inputmode="numeric"
190-
class="hidden displayInline numberInput noArrows"
191-
max="100"
192-
min="1"
193-
id="channelCustomOptionsPercentageOptionInput"
194-
name="channelCustomOptionsPercentageOptionInput"
195-
title="Only the most recent X% of videos uploaded to the channel will be considered when shuffling." />
150+
<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." />
151+
<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" />
152+
<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." />
196153
<p id="channelCustomOptionsPercentageOptionP" class="hidden displayInline" title="Only the most recent X% of videos uploaded to the channel will be considered when shuffling.">%</p>
197154
<!-- Input fields per option END -->
198155
</div>
@@ -236,13 +193,7 @@ <h3 title="These settings are for people with some technical knowledge. Don't wo
236193
</div>
237194

238195
<p style="margin-top: 6px">Your custom API key:</p>
239-
<input
240-
type="text"
241-
id="customApiKeyInputField"
242-
name="customApiKeyInputField"
243-
style="width: 80%"
244-
title="Enter your YouTube API key here. It will not be shared with anyone."
245-
placeholder="Enter API key here. It won't be shared with anyone." />
196+
<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." />
246197
<br />
247198
<div id="customApiKeyInputInfoDiv" class="hidden">
248199
<p id="customApiKeyInputInfoText"></p>
@@ -270,23 +221,9 @@ <h3 title="These settings are for people with some technical knowledge. Don't wo
270221

271222
<footer id="randomYoutubeVideoFooter">
272223
Leave a review:
273-
<a
274-
class="buttonLink"
275-
href="https://chromewebstore.google.com/detail/random-youtube-video/kijgnjhogkjodpakfmhgleobifempckf"
276-
target="_blank"
277-
rel="noopener"
278-
title="Leave a review on the Chrome Web Store"
279-
>Chrome</a
280-
>
224+
<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>
281225
<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>
282-
<a
283-
class="buttonLink"
284-
href="https://microsoftedge.microsoft.com/addons/detail/random-youtube-video/fccfflipicelkilpmgniblpoflkbhdbe"
285-
target="_blank"
286-
rel="noopener"
287-
title="Leave a review on the Edge Add-Ons page"
288-
>Edge</a
289-
>
226+
<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>
290227
<br />
291228
<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>
292229
<button class="randomYoutubeVideoButton" id="viewChangelogButton" type="button" title="View the latest changes to the extension">Changelog</button>

‎static/manifest.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{
22
"name": "Random YouTube Video",
33
"description": "Customize, shuffle and play random videos from any YouTube channel.",
4-
"version": "3.1.1",
5-
"version_name": "3.1.2-beta",
4+
"version": "3.1.2",
5+
"version_name": "3.1.2",
66
"manifest_version": 3,
77
"content_scripts": [
88
{

0 commit comments

Comments
 (0)