From b5482b652787a7a39e72f4c7c499e33a9b3eabce Mon Sep 17 00:00:00 2001 From: NDevTK <31563761+NDevTK@users.noreply.github.com> Date: Thu, 19 May 2022 13:33:33 +0100 Subject: [PATCH] Move popup to iframe --- src/content.ts | 101 +++++++++++++++++++------------------------------ src/popup.ts | 9 +++++ 2 files changed, 47 insertions(+), 63 deletions(-) diff --git a/src/content.ts b/src/content.ts index e89bbb2a..32be9609 100644 --- a/src/content.ts +++ b/src/content.ts @@ -1686,73 +1686,48 @@ function openInfoMenu() { //hide info button if (playerButtons.info) playerButtons.info.button.style.display = "none"; - sendRequestToCustomServer('GET', chrome.extension.getURL("popup.html"), function(xmlhttp) { - if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { - const popup = document.createElement("div"); - popup.id = "sponsorBlockPopupContainer"; + + const popup = document.createElement("div"); + popup.id = "sponsorBlockPopupContainer"; + + const frame = document.createElement("iframe"); + frame.width = "410"; + frame.height = "400"; + frame.onload = () => frame.contentWindow.postMessage("", "*"); + frame.src = chrome.extension.getURL("popup.html"); + popup.appendChild(frame); + - let htmlData = xmlhttp.responseText; - // Hack to replace head data (title, favicon) - htmlData = htmlData.replace(/[\S\s]*<\/head>/gi, ""); - // Hack to replace body and html tag with div - htmlData = htmlData.replace(/ popup.querySelector("#sponsorBlockPopupLogo"); - const settings = popup.querySelector("#sbPopupIconSettings"); - const edit = popup.querySelector("#sbPopupIconEdit"); - const copy = popup.querySelector("#sbPopupIconCopyUserID"); - const check = popup.querySelector("#sbPopupIconCheck"); - const refreshSegments = popup.querySelector("#refreshSegments"); - const heart = popup.querySelector(".sbHeart"); - const close = popup.querySelector("#sbCloseDonate"); - logo.src = chrome.extension.getURL("icons/IconSponsorBlocker256px.png"); - settings.src = chrome.extension.getURL("icons/settings.svg"); - edit.src = chrome.extension.getURL("icons/pencil.svg"); - copy.src = chrome.extension.getURL("icons/clipboard.svg"); - check.src = chrome.extension.getURL("icons/check.svg"); - heart.src = chrome.extension.getURL("icons/heart.svg"); - close.src = chrome.extension.getURL("icons/close.png"); - refreshSegments.src = chrome.extension.getURL("icons/refresh.svg"); - - parentNode.insertBefore(popup, parentNode.firstChild); - - //run the popup init script - runThePopup(messageListener); + const parentNodes = document.querySelectorAll("#secondary"); + let parentNode = null; + for (let i = 0; i < parentNodes.length; i++) { + if (parentNodes[i].firstElementChild !== null) { + parentNode = parentNodes[i]; } - }); + } + if (parentNode == null) { + //old youtube theme + parentNode = document.getElementById("watch7-sidebar-contents"); + } + + parentNode.insertBefore(popup, parentNode.firstChild); + + //run the popup init script + runThePopup(messageListener); } function closeInfoMenu() { diff --git a/src/popup.ts b/src/popup.ts index 504229fc..ae4a40c8 100644 --- a/src/popup.ts +++ b/src/popup.ts @@ -41,10 +41,19 @@ class MessageHandler { } } +let allowPopup = (window === window.top); +window.onmessage = async e => { + if (e.source !== window.parent) return + if (e.origin.endsWith('.youtube.com')) return allowPopup = true; + await utils.wait(() => Config.config !== null); + if (Config.config.supportInvidious && e.origin.includes(Config.config.invidiousInstances)) return allowPopup = true; +} //make this a function to allow this to run on the content page async function runThePopup(messageListener?: MessageListener): Promise { + if (window !== window.top) await utils.wait(() => allowPopup === true); + const messageHandler = new MessageHandler(messageListener); utils.localizeHtmlPage();