feat: save opacity value on change

tri613 · Dec 31, 2020 · 96d433e · 96d433e
1 parent 73f5898
commit 96d433e
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 35 deletions.
diff --git a/src/js/content.js b/src/js/content.js
@@ -1,30 +1,25 @@
 (function () {
   const wrap = document.querySelector('.VideoContainer .CommentRenderer');
-  let opacity = 1;
   restoreOptions();
 
-  function setCommentOpacity(opacity) {
-    wrap.style.opacity = opacity;
-  }
-
   function restoreOptions() {
     chrome.storage.sync.get(
       {
         defaultOpacity: 0.5,
       },
       function (items) {
-        opacity = items.defaultOpacity;
-        setCommentOpacity(opacity);
+        setCommentOpacity(items.defaultOpacity);
       }
     );
   }
 
+  function setCommentOpacity(opacity) {
+    wrap.style.opacity = opacity;
+  }
+
   chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
     if (msg.from === 'popup' && msg.action === 'changeOpacity') {
       setCommentOpacity(msg.opacity);
-      opacity = msg.opacity;
-    } else if (msg.from === 'popup' && msg.action === 'getCurrentOpacity') {
-      sendResponse({ opacity: opacity });
     }
   });
 })();
diff --git a/src/js/popup.js b/src/js/popup.js
@@ -3,21 +3,33 @@
     const input = document.querySelector('[name="opacity"]');
     const currentOpacity = document.querySelector('#current-opacity');
 
-    function askCurrentOpacity() {
-      const callback = function (tabs) {
-        chrome.tabs.sendMessage(
-          tabs[0].id,
-          {
-            from: 'popup',
-            action: 'getCurrentOpacity',
-          },
-          (response) => {
-            setInputValue(response.opacity);
-            showCurrentOpacity(response.opacity);
-          }
-        );
-      };
-      getActiveTab(callback);
+    input.addEventListener('change', changeOpacity);
+    input.addEventListener('mousemove', changeOpacity);
+    restoreOptions();
+
+    function changeOpacity(e) {
+      const opacity = this.value / 100;
+      showCurrentOpacity(opacity);
+      sendToActiveTab(opacity);
+      saveOptions(opacity);
+    }
+
+    function restoreOptions() {
+      chrome.storage.sync.get(
+        {
+          defaultOpacity: 0.5,
+        },
+        function ({ defaultOpacity }) {
+          setInputValue(defaultOpacity);
+          showCurrentOpacity(defaultOpacity);
+        }
+      );
+    }
+
+    function saveOptions(opacity) {
+      chrome.storage.sync.set({
+        defaultOpacity: opacity,
+      });
     }
 
     function setInputValue(opacity) {
@@ -28,12 +40,6 @@
       currentOpacity.innerText = opacity;
     }
 
-    function changeOpacity(e) {
-      const opacity = this.value / 100;
-      showCurrentOpacity(opacity);
-      sendToActiveTab(opacity);
-    }
-
     function sendToActiveTab(opacity) {
       const callback = function (tabs) {
         chrome.tabs.sendMessage(tabs[0].id, {
@@ -50,9 +56,5 @@
         callback(tabs)
       );
     }
-
-    input.addEventListener('change', changeOpacity);
-    input.addEventListener('mousemove', changeOpacity);
-    askCurrentOpacity();
   });
 })();