Dedupe & clean up popup -> content script communication code

src/messageTypes.ts

@@ -83,15 +83,15 @@ interface GetVideoIdResponse {
     videoID: string;
 }
 
-interface GetChannelIDResponse {
+export interface GetChannelIDResponse {
     channelID: string;
 }
 
-interface SponsorStartResponse {
+export interface SponsorStartResponse {
     creatingSegment: boolean;
 }
 
-interface IsChannelWhitelistedResponse {
+export interface IsChannelWhitelistedResponse {
     value: boolean;
 }
 
@@ -111,7 +111,7 @@ export interface VoteResponse {
     responseText: string;
 }
 
-export interface ImportSegmentsResponse {
+interface ImportSegmentsResponse {
     importedSegments: SponsorTime[];
 }
 

src/popup.ts

@@ -10,11 +10,14 @@ import {
     StorageChangesObject,
 } from "./types";
 import {
-    ImportSegmentsResponse,
+    GetChannelIDResponse,
+    IsChannelWhitelistedResponse,
     IsInfoFoundMessageResponse,
     Message,
     MessageResponse,
     PopupMessage,
+    SponsorStartResponse,
+    VoteResponse,
 } from "./messageTypes";
 import { showDonationLink } from "./utils/configUtils";
 import { AnimationUtils } from "./utils/animationUtils";
@@ -425,7 +428,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
         }, (tabs) => onTabs(tabs, updating));
     }
 
-    function infoFound(request: IsInfoFoundMessageResponse) {
+    async function infoFound(request: IsInfoFoundMessageResponse) {
         if (chrome.runtime.lastError) {
             //This page doesn't have the injected content script, or at least not yet
             displayNoVideo();
@@ -455,35 +458,18 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
         }
 
         //see if whitelist button should be swapped
-        messageHandler.query({
-            active: true,
-            currentWindow: true
-        }, tabs => {
-            messageHandler.sendMessage(
-                tabs[0].id,
-                { message: 'isChannelWhitelisted' },
-                function (response) {
+        const response = await sendTabMessageAsync({ message: 'isChannelWhitelisted' }) as IsChannelWhitelistedResponse;
         if (response.value) {
             PageElements.whitelistChannel.style.display = "none";
             PageElements.unwhitelistChannel.style.display = "unset";
             PageElements.whitelistToggle.checked = true;
             document.querySelectorAll('.SBWhitelistIcon')[0].classList.add("rotated");
         }
-                });
-        }
-        );
     }
 
-    function sendSponsorStartMessage() {
+    async function sendSponsorStartMessage() {
         //the content script will get the message if a YouTube page is open
-        messageHandler.query({
-            active: true,
-            currentWindow: true,
-        }, (tabs) => {
-            messageHandler.sendMessage(
-                tabs[0].id,
-                { from: 'popup', message: 'sponsorStart' },
-                async (response) => {
+        const response = await sendTabMessageAsync({ from: 'popup', message: 'sponsorStart' }) as SponsorStartResponse;
         startSponsorCallback(response);
 
         // Perform a second update after the config changes take effect as a workaround for a race condition
@@ -501,12 +487,9 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
 
         // Remove the listener after 200ms in case the changes were propagated by the time we got the response
         setTimeout(() => removeListener(lateUpdate), 200);
-                },
-            );
-        });
     }
 
-    function startSponsorCallback(response: { creatingSegment: boolean }) {
+    function startSponsorCallback(response: SponsorStartResponse) {
         creatingSegment = response.creatingSegment;
 
         // Only update the segments after a segment was created
@@ -687,19 +670,11 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
                     downloadedTimes[i].hidden = SponsorHideType.Hidden;
                 }
 
-                messageHandler.query({
-                    active: true,
-                    currentWindow: true
-                }, tabs => {
-                    messageHandler.sendMessage(
-                        tabs[0].id,
-                        {
+                sendTabMessage({
                     message: "hideSegment",
                     type: downloadedTimes[i].hidden,
                     UUID: UUID
-                        }
-                    );
-                });
+                })
             });
 
             const skipButton = document.createElement("img");
@@ -743,15 +718,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
 
     function submitTimes() {
         if (sponsorTimes.length > 0) {
-            messageHandler.query({
-                active: true,
-                currentWindow: true
-            }, tabs => {
-                messageHandler.sendMessage(
-                    tabs[0].id,
-                    { message: 'submitTimes' },
-                );
-            });
+            sendTabMessage({ message: 'submitTimes' })
         }
     }
 
@@ -782,8 +749,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
         chrome.runtime.sendMessage({ "message": "openHelp" });
     }
 
-    function sendTabMessage(data: Message): Promise<unknown> {
-        return new Promise((resolve) => {
+    function sendTabMessage(data: Message, callback?) {
         messageHandler.query({
             active: true,
             currentWindow: true
@@ -791,11 +757,14 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
             messageHandler.sendMessage(
                 tabs[0].id,
                 data,
-                    (response) => resolve(response)
+                callback
             );
         }
         );
-        });
+    }
+
+    function sendTabMessageAsync(data: Message): Promise<unknown> {
+        return new Promise((resolve) => sendTabMessage(data, (response) => resolve(response)))
     }
 
     //make the options username setting option visible
@@ -872,21 +841,15 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
         thanksForVotingText.removeAttribute("innerText");
     }
 
-    function vote(type, UUID) {
+    async function vote(type, UUID) {
         //add loading info
         addVoteMessage(chrome.i18n.getMessage("Loading"), UUID);
-
-        messageHandler.query({
-            active: true,
-            currentWindow: true
-        }, tabs => {
-            messageHandler.sendMessage(
-                tabs[0].id,
-                {
+        const response = await sendTabMessageAsync({
             message: "submitVote",
             type: type,
             UUID: UUID
-                }, function (response) {
+        }) as VoteResponse;
+
         if (response != undefined) {
             //see if it was a success or failure
             if (response.successType == 1 || (response.successType == -1 && response.statusCode == 429)) {
@@ -898,20 +861,10 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
             setTimeout(() => removeVoteMessage(UUID), 1500);
         }
     }
-            );
-        });
-    }
 
-    function whitelistChannel() {
+    async function whitelistChannel() {
         //get the channel url
-        messageHandler.query({
-            active: true,
-            currentWindow: true
-        }, tabs => {
-            messageHandler.sendMessage(
-                tabs[0].id,
-                { message: 'getChannelID' },
-                function (response) {
+        const response = await sendTabMessageAsync({ message: 'getChannelID' }) as GetChannelIDResponse;
         if (!response.channelID) {
             alert(chrome.i18n.getMessage("channelDataNotFound") + " https://github.com/ajayyy/SponsorBlock/issues/753");
             return;
@@ -938,32 +891,16 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
         Config.config.whitelistedChannels = whitelistedChannels;
 
         //send a message to the client
-                    messageHandler.query({
-                        active: true,
-                        currentWindow: true
-                    }, tabs => {
-                        messageHandler.sendMessage(
-                            tabs[0].id, {
+        sendTabMessage({
             message: 'whitelistChange',
             value: true
         });
     }
-                    );
-                }
-            );
-        });
-    }
 
-    function unwhitelistChannel() {
+    async function unwhitelistChannel() {
         //get the channel url
-        messageHandler.query({
-            active: true,
-            currentWindow: true
-        }, tabs => {
-            messageHandler.sendMessage(
-                tabs[0].id,
-                { message: 'getChannelID' },
-                function (response) {
+        const response = await sendTabMessageAsync({ message: 'getChannelID' }) as GetChannelIDResponse;
+
         //get whitelisted channels
         let whitelistedChannels = Config.config.whitelistedChannels;
         if (whitelistedChannels == undefined) {
@@ -986,49 +923,27 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
         Config.config.whitelistedChannels = whitelistedChannels;
 
         //send a message to the client
-                    messageHandler.query({
-                        active: true,
-                        currentWindow: true
-                    }, tabs => {
-                        messageHandler.sendMessage(
-                            tabs[0].id, {
+        sendTabMessage({
             message: 'whitelistChange',
             value: false
         });
     }
-                    );
-                }
-            );
-        });
-    }
 
-    function refreshSegments() {
+    async function refreshSegments() {
         const stopAnimation = AnimationUtils.applyLoadingAnimation(PageElements.refreshSegmentsButton, 0.3);
 
-        messageHandler.query({
-            active: true,
-            currentWindow: true
-        }, tabs => {
-            messageHandler.sendMessage(
-                tabs[0].id,
-                { message: 'refreshSegments' },
-                (response) => {
-                    infoFound(response);
+        infoFound(await sendTabMessageAsync({ message: 'refreshSegments' }) as IsInfoFoundMessageResponse)
         stopAnimation();
     }
-            )
-        }
-        );
-    }
 
     function skipSegment(actionType: ActionType, UUID: SegmentUUID, element?: HTMLElement): void {
         if (actionType === ActionType.Chapter) {
-            sendMessage({
+            sendTabMessage({
                 message: "unskip",
                 UUID: UUID
             });
         } else {
-            sendMessage({
+            sendTabMessage({
                 message: "reskip",
                 UUID: UUID
             });
@@ -1040,18 +955,6 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
         }
     }
 
-    function sendMessage(request: Message): void {
-        messageHandler.query({
-            active: true,
-            currentWindow: true
-        }, tabs => {
-            messageHandler.sendMessage(
-                tabs[0].id,
-                request
-            );
-        });
-    }
-
     /**
      * Should skipping be disabled (visuals stay)
      */
@@ -1084,10 +987,10 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
     async function importSegments() {
         const text = (PageElements.importSegmentsText as HTMLInputElement).value;
 
-        await sendTabMessage({
+        sendTabMessage({
             message: "importSegments",
             data: text
-        }) as ImportSegmentsResponse;
+        });
 
         PageElements.importSegmentsMenu.classList.add("hidden");
     }