diff --git a/src/js/content.js b/src/js/content.js index 3547403..b4e0d1f 100644 --- 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 index 7b9f132..b2cc5c5 100644 --- 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(); }); })();