diff options
| -rw-r--r-- | src/assets/javascripts/helpers/exceptions.js | 1 | ||||
| -rw-r--r-- | src/assets/javascripts/helpers/youtube/youtube.js | 36 | ||||
| -rw-r--r-- | src/pages/background/background.js | 3 | ||||
| -rw-r--r-- | src/pages/options/youtube/embed-exceptions.js | 80 | ||||
| -rw-r--r-- | src/pages/options/youtube/youtube.html | 29 |
5 files changed, 145 insertions, 4 deletions
diff --git a/src/assets/javascripts/helpers/exceptions.js b/src/assets/javascripts/helpers/exceptions.js index 5969cc4c..7c6e4798 100644 --- a/src/assets/javascripts/helpers/exceptions.js +++ b/src/assets/javascripts/helpers/exceptions.js @@ -1,7 +1,6 @@ "use strict"; window.browser = window.browser || window.chrome; - let exceptions = { "url": [], "regex": [], diff --git a/src/assets/javascripts/helpers/youtube/youtube.js b/src/assets/javascripts/helpers/youtube/youtube.js index b10ceb76..55f18555 100644 --- a/src/assets/javascripts/helpers/youtube/youtube.js +++ b/src/assets/javascripts/helpers/youtube/youtube.js @@ -238,6 +238,28 @@ function setAlwaysusePreferred(val) { console.log("alwaysusePreferred: ", alwaysusePreferred) } +let exceptions = { + "url": [], + "regex": [], +}; +const getExceptions = () => exceptions; +function setExceptions(val) { + exceptions = val; + browser.storage.local.set({ youtubeEmbedExceptions: val }) + console.log("youtubeEmbedExceptions: ", val) +} + +function isException(url) { + for (const item of exceptions.url) { + let protocolHost = `${url.protocol}//${url.host}` + console.log(item, protocolHost) + if (item == protocolHost) return true; + } + for (const item of exceptions.regex) + if (new RegExp(item).test(url.href)) return true; + return false; +} + function isYoutube(url, initiator) { if (disable) return false; if ( @@ -300,7 +322,11 @@ function isYoutube(url, initiator) { return isTargets } -function redirect(url, type) { +function redirect(url, type, details) { + if (type != "main_frame" && details.frameAncestors.length > 0 && isException(new URL(details.frameAncestors[0].url))) { + console.log(`Canceled ${url.href}`, details.frameAncestors[0].url) + return null; + } if (url.pathname.match(/iframe_api/) || url.pathname.match(/www-widgetapi/)) return null; // Don't redirect YouTube Player API. if (frontend == 'yatte' && type === "main_frame") @@ -536,6 +562,8 @@ async function init() { "youtubeEmbedFrontend", "youtubeProtocol", + + "youtubeEmbedExceptions" ], (result) => { redirects.invidious = dataJson.invidious; @@ -572,6 +600,8 @@ async function init() { alwaysusePreferred = result.alwaysusePreferred ?? true; + if (result.youtubeEmbedExceptions) exceptions = result.youtubeEmbedExceptions; + resolve(); }); }); @@ -660,5 +690,9 @@ export default { getAlwaysusePreferred, setAlwaysusePreferred, + getExceptions, + setExceptions, + isException, + init, }; diff --git a/src/pages/background/background.js b/src/pages/background/background.js index 71ae568a..1f91ad4d 100644 --- a/src/pages/background/background.js +++ b/src/pages/background/background.js @@ -50,8 +50,7 @@ browser.webRequest.onBeforeRequest.addListener( if (exceptionsHelper.isException(url, initiator)) newUrl = null; else if (youtubeMusicHelper.isYoutubeMusic(url, initiator)) newUrl = youtubeMusicHelper.redirect(url, details.type) - - else if (youtubeHelper.isYoutube(url, initiator)) newUrl = youtubeHelper.redirect(url, details.type) + else if (youtubeHelper.isYoutube(url, initiator)) newUrl = youtubeHelper.redirect(url, details.type, details) else if (twitterHelper.isTwitter(url, initiator)) newUrl = twitterHelper.redirect(url); diff --git a/src/pages/options/youtube/embed-exceptions.js b/src/pages/options/youtube/embed-exceptions.js new file mode 100644 index 00000000..ca2900d4 --- /dev/null +++ b/src/pages/options/youtube/embed-exceptions.js @@ -0,0 +1,80 @@ +"use strict"; +window.browser = window.browser || window.chrome; + +import youtubeHelper from "../../../assets/javascripts/helpers/youtube/youtube.js"; + +let nameCustomInstanceInput = document.getElementById("exceptions-custom-instance"); +let instanceTypeElement = document.getElementById("exceptions-custom-instance-type"); +let instanceType = "url" + +youtubeHelper.init().then(() => { + instanceTypeElement.addEventListener("change", + (event) => { + instanceType = event.target.options[instanceTypeElement.selectedIndex].value + if (instanceType == 'url') { + nameCustomInstanceInput.setAttribute("type", "url"); + nameCustomInstanceInput.setAttribute("placeholder", "https://www.google.com"); + } + else if (instanceType == 'regex') { + nameCustomInstanceInput.setAttribute("type", "text"); + nameCustomInstanceInput.setAttribute("placeholder", "https?:\/\/(www\.|music|)youtube\.com\/watch\?v\=..*"); + } + } + ) + let exceptionsCustomInstances = youtubeHelper.getExceptions(); + function calcExceptionsCustomInstances() { + console.log("exceptionsCustomInstances", exceptionsCustomInstances) + document.getElementById("exceptions-custom-checklist").innerHTML = + [...exceptionsCustomInstances.url, ...exceptionsCustomInstances.regex].map( + (x) => `<div>${x}<button class="add" id="clear-${x}"> + <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" + fill="currentColor"> + <path d="M0 0h24v24H0V0z" fill="none" /> + <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" /> + </svg> + </button> + </div> + <hr>` + ).join('\n'); + + for (const x of [...exceptionsCustomInstances.url, ...exceptionsCustomInstances.regex]) { + document.getElementById(`clear-${x}`).addEventListener("click", + () => { + console.log(x); + let index; + index = exceptionsCustomInstances.url.indexOf(x); + if (index > -1) + exceptionsCustomInstances.url.splice(index, 1); + else { + index = exceptionsCustomInstances.regex.indexOf(x); + if (index > -1) + exceptionsCustomInstances.regex.splice(index, 1); + } + youtubeHelper.setExceptions(exceptionsCustomInstances); + calcExceptionsCustomInstances(); + }); + } + } + calcExceptionsCustomInstances(); + document.getElementById("custom-exceptions-instance-form").addEventListener("submit", (event) => { + event.preventDefault(); + + let val + if (instanceType == 'url') { + if (nameCustomInstanceInput.validity.valid) { + let url = new URL(nameCustomInstanceInput.value); + val = `${url.protocol}//${url.host}` + if (!exceptionsCustomInstances.url.includes(val)) exceptionsCustomInstances.url.push(val) + } + } else if (instanceType == 'regex') { + val = nameCustomInstanceInput.value + if (val.trim() != '' && !exceptionsCustomInstances.regex.includes(val)) exceptionsCustomInstances.regex.push(val) + } + if (val) { + youtubeHelper.setExceptions(exceptionsCustomInstances); + console.log("exceptionsCustomInstances", exceptionsCustomInstances) + nameCustomInstanceInput.value = ''; + } + calcExceptionsCustomInstances(); + }) +}) \ No newline at end of file diff --git a/src/pages/options/youtube/youtube.html b/src/pages/options/youtube/youtube.html index d35c5c91..0fb4f195 100644 --- a/src/pages/options/youtube/youtube.html +++ b/src/pages/options/youtube/youtube.html @@ -346,12 +346,41 @@ </div> </div> + <hr> + + <div class="some-block option-block"> + <h4>Embed Exceptions</h4> + </div> + <form id="custom-exceptions-instance-form"> + <div class="some-block option-block"> + <div class="some-block" style="padding:0;"> + <input id="exceptions-custom-instance" placeholder="https://www.google.com" type="url" /> + + <select id="exceptions-custom-instance-type"> + <option value="url">URL</option> + <option value="regex">Regex</option> + </select> + + </div> + <button type="submit" class="add" id="exceptions-add-instance"> + <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor"> + <path d="M0 0h24v24H0V0z" fill="none" /> + <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" /> + </svg> + </button> + </div> + </form> + <div class="checklist" id="exceptions-custom-checklist"></div> + </a> + </section> + </section> <script type="module" src="../init.js"></script> <script type="module" src="./youtube.js"></script> <script type="module" src="./invidious.js"></script> <script type="module" src="./piped.js"></script> + <script type="module" src="./embed-exceptions.js"></script> <!-- <script src="../../assets/javascripts/localise.js"></script> --> </body> |