Merge branch 'master' of https://github.com/ajayyy/SponsorBlock into pr/PickleNik/1300

src/popup.ts

@@ -6,6 +6,7 @@ import { Message, MessageResponse, IsInfoFoundMessageResponse } from "./messageT
 import { showDonationLink } from "./utils/configUtils";
 import { AnimationUtils } from "./utils/animationUtils";
 import { GenericUtils } from "./utils/genericUtils";
+import { localizeHtmlPage } from "./utils/pageUtils";
 const utils = new Utils();
 
 interface MessageListener {
@@ -22,13 +23,15 @@ class MessageHandler {
     sendMessage(id: number, request: Message, callback?) {
         if (this.messageListener) {
             this.messageListener(request, null, callback);
-        } else {
+        } else if (chrome.tabs) {
             chrome.tabs.sendMessage(id, request, callback);
+        } else {
+            chrome.runtime.sendMessage({ message: "tabs", data: request }, callback);
         }
     }
 
     query(config, callback) {
-        if (this.messageListener) {
+        if (this.messageListener || !chrome.tabs) {
             // Send back dummy info
             callback([{
                 url: document.URL,
@@ -41,15 +44,17 @@ class MessageHandler {
     }
 }
 
-
+// To prevent clickjacking
+let allowPopup = window === window.top;
+window.addEventListener("message", async (e) => {
+    if (e.source !== window.parent) return;
+    if (e.origin.endsWith('.youtube.com')) return allowPopup = true;
+});
 
 //make this a function to allow this to run on the content page
 async function runThePopup(messageListener?: MessageListener): Promise<void> {
     const messageHandler = new MessageHandler(messageListener);
-
-    utils.localizeHtmlPage();
-
-    await utils.wait(() => Config.config !== null);
+    localizeHtmlPage();
 
     type InputPageElements = {
         whitelistToggle?: HTMLInputElement,
@@ -58,6 +63,15 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
     };
     type PageElements = { [key: string]: HTMLElement } & InputPageElements
 
+    /** If true, the content script is in the process of creating a new segment. */
+    let creatingSegment = false;
+
+    //the start and end time pairs (2d)
+    let sponsorTimes: SponsorTime[] = [];
+
+    //current video ID of this tab
+    let currentVideoID = null;
+
     const PageElements: PageElements = {};
 
     [
@@ -112,9 +126,24 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
         "sponsorTimesDonateContainer",
         "sbConsiderDonateLink",
         "sbCloseDonate",
-        "sbBetaServerWarning"
+        "sbBetaServerWarning",
+        "sbCloseButton"
     ].forEach(id => PageElements[id] = document.getElementById(id));
 
+    getSegmentsFromContentScript(false);
+    await utils.wait(() => Config.config !== null && allowPopup, 5000, 5);
+    document.querySelector("body").style.removeProperty("visibility");
+
+    PageElements.sbCloseButton.addEventListener("click", () => {
+        sendTabMessage({
+            message: "closePopup"
+        });
+    });
+
+    if (window !== window.top) {
+        PageElements.sbCloseButton.classList.remove("hidden");
+    }
+
     // Hide donate button if wanted (Safari, or user choice)
     if (!showDonationLink()) {
         PageElements.sbDonate.style.display = "none";
@@ -151,15 +180,6 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
     PageElements.refreshSegmentsButton.addEventListener("click", refreshSegments);
     PageElements.sbPopupIconCopyUserID.addEventListener("click", async () => navigator.clipboard.writeText(await utils.getHash(Config.config.userID)));
 
-    /** If true, the content script is in the process of creating a new segment. */
-    let creatingSegment = false;
-
-    //the start and end time pairs (2d)
-    let sponsorTimes: SponsorTime[] = [];
-
-    //current video ID of this tab
-    let currentVideoID = null;
-
     //show proper disable skipping button
     const disableSkipping = Config.config.disableSkipping;
     if (disableSkipping != undefined && disableSkipping) {
@@ -239,8 +259,6 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
     // Must be delayed so it only happens once loaded
     setTimeout(() => PageElements.sponsorblockPopup.classList.remove("preload"), 250);
 
-    getSegmentsFromContentScript(false);
-
     function showDonateWidget(viewCount: number) {
         if (Config.config.showDonationLink && Config.config.donateClicked <= 0 && Config.config.showPopupDonationCount < 5
                 && viewCount < 50000 && !Config.config.isVip && Config.config.skipCount > 10) {
@@ -272,13 +290,14 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
         });
     }
 
-    function loadTabData(tabs, updating: boolean): void {
+    async function loadTabData(tabs, updating: boolean): Promise<void> {
         if (!currentVideoID) {
             //this isn't a YouTube video then
             displayNoVideo();
             return;
         }
 
+        await utils.wait(() => Config.config !== null, 5000, 10);
         sponsorTimes = Config.config.unsubmittedSegments[currentVideoID] ?? [];
         updateSegmentEditingUI();
 
@@ -588,6 +607,22 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
         chrome.runtime.sendMessage({ "message": "openHelp" });
     }
 
+    function sendTabMessage(data: Message): Promise<unknown> {
+        return new Promise((resolve) => {
+            messageHandler.query({
+                active: true,
+                currentWindow: true
+            }, tabs => {
+                messageHandler.sendMessage(
+                    tabs[0].id,
+                    data,
+                    (response) => resolve(response)
+                );
+            }
+            );
+        });
+    }
+
     //make the options username setting option visible
     function setUsernameButton() {
         PageElements.usernameInput.value = PageElements.usernameValue.innerText;
@@ -832,9 +867,4 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
     //end of function
 }
 
-if (chrome.tabs != undefined) {
-    //this means it is actually opened in the popup
-    runThePopup();
-}
-
-export default runThePopup;
+runThePopup();