diff options
| -rw-r--r-- | src/content.ts | 33 | ||||
| -rw-r--r-- | src/popup.ts | 6 |
2 files changed, 37 insertions, 2 deletions
diff --git a/src/content.ts b/src/content.ts index 91ca3f71..b353fb85 100644 --- a/src/content.ts +++ b/src/content.ts @@ -2016,7 +2016,6 @@ function openInfoMenu() { //hide info button if (playerButtons.info) playerButtons.info.button.style.display = "none"; - const popup = document.createElement("div"); popup.id = "sponsorBlockPopupContainer"; @@ -2024,7 +2023,37 @@ function openInfoMenu() { frame.width = "374"; frame.height = "500"; frame.style.borderRadius = "12px"; - frame.addEventListener("load", () => frame.contentWindow.postMessage("", "*")); + frame.addEventListener("load", async () => { + frame.contentWindow.postMessage("", "*"); + + // To support userstyles applying to the popup + const stylusStyle = document.querySelector(".stylus"); + if (stylusStyle) { + frame.contentWindow.postMessage({ + type: "style", + css: stylusStyle.textContent + }, "*"); + } + + const enhancerStyle = document.getElementById("efyt-theme"); + if (enhancerStyle) { + const enhancerStyleVariables = document.getElementById("efyt-theme-variables"); + if (enhancerStyleVariables) { + const enhancerCss = await fetch(enhancerStyle.getAttribute("href")).then((response) => response.text()); + const enhancerVariablesCss = await fetch(enhancerStyleVariables.getAttribute("href")).then((response) => response.text()); + + if (enhancerCss && enhancerVariablesCss) { + frame.contentWindow.postMessage({ + type: "style", + // Image needs needs to reference the full url now + css: enhancerCss.replace("./images/youtube-deep-dark/IconSponsorBlocker256px.png", + "https://raw.githubusercontent.com/RaitaroH/YouTube-DeepDark/master/YT_Images/IconSponsorBlocker256px.png") + + enhancerVariablesCss + }, "*"); + } + } + } + }); frame.src = chrome.extension.getURL("popup.html"); popup.appendChild(frame); diff --git a/src/popup.ts b/src/popup.ts index 21267afe..a6157dea 100644 --- a/src/popup.ts +++ b/src/popup.ts @@ -72,6 +72,12 @@ window.addEventListener("message", async (e): Promise<void> => { if (e.source !== window.parent) return; if (e.origin.endsWith('.youtube.com')) { allowPopup = true; + + if (e.data && e.data?.type === "style") { + const style = document.createElement("style"); + style.textContent = e.data.css; + document.head.appendChild(style); + } } }); |