Use sender args for background listener

This commit removes the need to use tabs.query() which greatly improves UX as a user can open a tab in the background while having the extension still work. This also reduces an asynchronous API call.
rquitales · Mar 4, 2021 · cc39b65 · cc39b65
1 parent 898cbef
commit cc39b65
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 42 deletions.
diff --git a/manifest.json b/manifest.json
@@ -25,10 +25,7 @@
   "name": "Crunchyroll Intro Skipper",
   "author": "Ramon Quitales",
   "permissions": [
-    "https://www.crunchyroll.com/*",
-    "tabs"
+    "https://www.crunchyroll.com/*"
   ],
   "version": "0.1.0"
-}
-
-
+}
diff --git a/src/background_script.ts b/src/background_script.ts
@@ -2,32 +2,31 @@ const TimeStampRegex = /^[0-9]+\:[0-9]{1,2}$/;
 const CommentKeywordRegex = /time|title|tc|card|intro|recap|end/i;
 
 chrome.runtime.onMessage.addListener(function (
-  {},
-  {},
+  _,
+  sender,
   sendResponse: (response: any) => void
 ): boolean {
-  chrome.tabs.query({ currentWindow: true, active: true }, function (tabs) {
-    let sourceURL = tabs[0].url;
-    if (!sourceURL) {
-      return;
-    }
+  if (!sender || !sender.tab || !sender.tab.url) {
+    return false;
+  }
 
-    fetch(sourceURL)
-      .then((response) => response.text())
-      .then((data) => {
-        return data.substr(data.search('talkboxid') + 13, 30);
-      })
-      .then((talkboxID) => {
-        return checkComments(talkboxID, sourceURL!, sendResponse);
-      })
-      .then((prev) => {
-        if (prev) {
-          return;
-        }
-        useAdBreaks(sourceURL!, sendResponse);
-      })
-      .catch((error) => alert({ error: error }));
-  });
+  let sourceURL = sender.tab.url;
+
+  fetch(sourceURL)
+    .then((response) => response.text())
+    .then((data) => {
+      return data.substr(data.search('talkboxid') + 13, 30);
+    })
+    .then((talkboxID) => {
+      return checkComments(talkboxID, sourceURL!, sendResponse);
+    })
+    .then((prev) => {
+      if (prev) {
+        return;
+      }
+      useAdBreaks(sourceURL!, sendResponse);
+    })
+    .catch((error) => alert({ error: error }));
 
   return true;
 });
@@ -41,7 +40,11 @@ function useAdBreaks(
     .then((data) => {
       let resp =
         parseInt(data.substr(data.search('ad_breaks') + 69, 10)) / 1000;
-      sendResponse({ interval: resp, source: 'ad_breaks', text: `Ad-break: ${Math.floor(resp/60)}:${Math.floor(resp%60)}` });
+      sendResponse({
+        interval: resp,
+        source: 'ad_breaks',
+        text: `Ad-break: ${Math.floor(resp / 60)}:${Math.floor(resp % 60)}`,
+      });
     });
 }
 
@@ -106,7 +109,11 @@ function parseComments(
     if (words.length === 1) {
       let ts = checkWordForTS(words[0]);
       if (ts) {
-        sendResponse({ interval: ts, source: 'comments', text: curr.comment.body });
+        sendResponse({
+          interval: ts,
+          source: 'comments',
+          text: curr.comment.body,
+        });
         return true;
       }
     }
@@ -125,7 +132,11 @@ function parseComments(
       for (const word of words) {
         let ts = checkWordForTS(word);
         if (ts) {
-          sendResponse({ interval: ts, source: 'comments', text: curr.comment.body });
+          sendResponse({
+            interval: ts,
+            source: 'comments',
+            text: curr.comment.body,
+          });
           return true;
         }
       }

diff --git a/src/content_script.ts b/src/content_script.ts
@@ -5,15 +5,7 @@ function init() {
   });
 }
 
-function addSkipButton(resp: any) {
-  let root = document.getElementById('vilosRoot');
-  if (!root) {
-    return;
-  }
-
-  let button = document.createElement('div');
-  let player = document.getElementById('player0');
-
+function styleButton(button: HTMLDivElement) {
   button.style.zIndex = '999';
   button.style.color = 'white';
   button.style.position = 'fixed';
@@ -28,11 +20,24 @@ function addSkipButton(resp: any) {
   button.style.cursor = 'pointer';
   button.style.display = 'none';
   button.id = 'skipButton';
+}
+
+function addSkipButton(resp: any) {
+  let root = document.getElementById('vilosRoot');
+  if (!root) {
+    return;
+  }
+
+  let player: any = document.getElementById('player0');
+
+  let button = document.createElement('div');
+  styleButton(button);
   button.innerHTML = `SKIP INTRO<br/>${resp.text}`;
 
   button.onclick = () => {
-    (<any>player).currentTime = resp.interval;
+    player.currentTime = resp.interval;
   };
+
   root.append(button);
   window.setInterval(showHideSkipButton(resp.interval), 1000);
 }
@@ -48,7 +53,7 @@ function showHideSkipButton(ts: number) {
     }
 
     let time = parseInt((<any>player).currentTime);
-    if (time < intro ) {
+    if (time < intro) {
       skipButton.style.display = 'block';
     } else {
       skipButton.style.display = 'none';