refactor message passing between popup/background

extension/background.js

@@ -172,33 +172,45 @@ async function sendCookies() {
   return response;
 }
 
-// process and return message if needed
+/*
+process and return message if needed
+the following messages are supported:
+type Message =
+  | { type: 'verify' }
+  | { type: 'cookieState' }
+  | { type: 'sendCookie' }
+  | { type: 'youtube', action: 'download' | 'subscribe', url: string }
+*/
 function handleMessage(request, sender, sendResponse) {
-  console.log('message background.js listener: ' + JSON.stringify(request));
+  console.log('message background.js listener got message', request);
-
-  if (request.verify === true) {
-    let response = verifyConnection();
-    response.then(message => {
-      sendResponse(message);
-    });
-  } else if (request.youtube) {
-    let response = youtubeLink(request.youtube);
-    response.then(message => {
-      sendResponse(message);
-    });
-  } else if (request.cookieState) {
-    let response = getCookieState();
-    response.then(message => {
-      sendResponse(message);
-    });
-  } else if (request.sendCookie) {
-    console.log('backgound: ' + JSON.stringify(request));
-    let response = sendCookies();
-    response.then(message => {
-      sendResponse(message);
-    });
-  }
 
+  // this function must return the value `true` in chrome to signal the response will be async;
+  // it cannot return a promise
+  // so in order to use async/await, we need a wrapper
+  (async () => {
+    switch (request.type) {
+      case 'verify': {
+        return await verifyConnection();
+      }
+      case 'cookieState': {
+        return await getCookieState();
+      }
+      case 'sendCookie': {
+        return await sendCookies();
+      }
+      case 'youtube': {
+        // TODO split this up
+        return await youtubeLink(request.youtube);
+      }
+      default: {
+        let err = new Error(`unknown message type ${JSON.stringify(request.type)}`);
+        console.log(err);
+        throw err;
+      }
+    }
+  })()
+    .then(value => sendResponse({ success: true, value }))
+    .catch(e => sendResponse({ success: false, value: e.message }));
   return true;
 }
 

extension/popup.js

@@ -15,11 +15,19 @@ function getBrowser() {
       return chrome;
     }
   } else {
-    console.log('failed to dedect browser');
+    console.log('failed to detect browser');
     throw 'browser detection error';
   }
 }
 
+async function sendMessage(message) {
+  let { success, value } = await browserType.runtime.sendMessage(message);
+  if (!success) {
+    throw value;
+  }
+  return value;
+}
+
 // store access details
 document.getElementById('save-login').addEventListener('click', function () {
   let url = document.getElementById('full-url').value;
@@ -75,7 +83,7 @@ function sendCookie() {
   if (checked === false) {
     return;
   }
-  let sending = browserType.runtime.sendMessage({ sendCookie: true });
+  let sending = sendMessage({ type: 'sendCookie' });
   sending.then(handleResponse, handleError);
 }
 
@@ -89,12 +97,12 @@ function pingBackend() {
   }
 
   function handleError(error) {
-    console.log(`Error: ${error}`);
+    console.log(`Verify got error: ${error}`);
     setStatusIcon(false);
   }
 
   console.log('ping TA server');
-  let sending = browserType.runtime.sendMessage({ verify: true });
+  let sending = sendMessage({ type: 'verify' });
   sending.then(handleResponse, handleError);
 }
 
@@ -118,7 +126,7 @@ function setCookieState() {
   }
 
   console.log('set cookie state');
-  let sending = browserType.runtime.sendMessage({ cookieState: true });
+  let sending = sendMessage({ type: 'cookieState' });
   sending.then(handleResponse, handleError);
   document.getElementById('sendCookies').checked = true;
 }

extension/script.js

@@ -22,6 +22,14 @@ function getBrowser() {
   }
 }
 
+async function sendMessage(message) {
+  let { success, value } = await browserType.runtime.sendMessage(message);
+  if (!success) {
+    throw value;
+  }
+  return value;
+}
+
 const downloadIcon = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
 <style type="text/css">
@@ -362,18 +370,14 @@ function sendUrl(url, action, button) {
   function handleError(error) {
     console.log('error');
     console.log(JSON.stringify(error));
+    buttonError(button);
   }
 
-  let payload = {
+  let message = { type: 'youtube', action, url };
-    youtube: {
-      url: url,
-      action: action,
-    },
-  };
 
-  console.log('youtube link: ' + JSON.stringify(payload));
+  console.log('youtube link: ' + JSON.stringify(message));
 
-  let sending = browserType.runtime.sendMessage(payload);
+  let sending = sendMessage(message);
   sending.then(handleResponse, handleError);
 }