[extension] add on/off switch

zerodytrash · Jun 22, 2022 · 1a01a45 · 1a01a45
1 parent 6b5057e
commit 1a01a45
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 19 deletions.
diff --git a/src/extension/main.js b/src/extension/main.js
@@ -24,29 +24,52 @@ function injectScript() {
 
     // Retrieve the extension settings
     chrome.storage.sync.get('options', ({ options }) => {
-        const nInjector = document.createElement('injector');
-        document.documentElement.append(nInjector);
+        // Extension disabled?
+        if (options && options.extensionEnabled === false) {
+            return;
+        }
 
-        nInjector.setAttribute('onclick', `window.SYARB_CONFIG = ${JSON.stringify(options || {})}; ${scriptContents}`);
+        try {
+            const nInjector = document.createElement('injector');
+            document.documentElement.append(nInjector);
 
-        // Fire event to execute the script
-        nInjector.click();
-        nInjector.remove();
+            nInjector.setAttribute('onclick', `window.SYARB_CONFIG = ${JSON.stringify(options || {})}; ${scriptContents}`);
 
-        logInfo(`Script injected (${location.href})`);
+            // Fire event to execute the script
+            nInjector.click();
+            nInjector.remove();
+
+            logInfo(`Script injected (${location.href})`);
+
+            // Notify background.js
+            chrome.runtime.sendMessage({ event: 'INIT' });
+        } catch (err) {
+            logError(err.message, err.stack);
+        }
     });
 }
 
 function updateConfig(changes) {
+    // Extension switched on/off? => Reload website
+    let { newValue, oldValue } = changes.options;
+
+    let extensionEnabledOld = oldValue ? oldValue.extensionEnabled : true;
+    let extensionEnabledNew = newValue ? newValue.extensionEnabled : true;
+
+    if (extensionEnabledOld !== extensionEnabledNew && !document.hidden) {
+        window.location.reload();
+        return;
+    }
+
     // Firefox specific
     if (typeof cloneInto === 'function') {
-        changes = cloneInto(changes, document.defaultView);
+        newValue = cloneInto(newValue, document.defaultView);
     }
 
     // Tell the script the new configuration
     window.dispatchEvent(
         new CustomEvent('SYARB_CONFIG_CHANGE', {
-            detail: changes.options.newValue,
+            detail: newValue,
         })
     );
 }
@@ -61,9 +84,6 @@ function init() {
 
         // Listen to config changes
         chrome.storage.onChanged.addListener(updateConfig);
-
-        // Notify background.js
-        chrome.runtime.sendMessage({ event: 'INIT' });
     } catch (err) {
         logError(err.message, err.stack);
     }

diff --git a/src/extension/popup.html b/src/extension/popup.html
@@ -117,7 +117,7 @@
 
         #logArea {
             width: 100%;
-            height: 150px;
+            height: 200px;
             resize: none;
             background: #2f2f33;
             color: #b8b8c7;
@@ -150,6 +150,16 @@
                 <h1 id="title">Age Restriction Bypass for YouTube™</h1>
                 <div id="meta">Version %version%</div>
             </div>
+            <label class="menu-item button">
+                <div class="icon">
+                    <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 512 512" width="24px" fill="#000000"><path d="M288 256C288 273.7 273.7 288 256 288C238.3 288 224 273.7 224 256V32C224 14.33 238.3 0 256 0C273.7 0 288 14.33 288 32V256zM80 256C80 353.2 158.8 432 256 432C353.2 432 432 353.2 432 256C432 201.6 407.3 152.9 368.5 120.6C354.9 109.3 353 89.13 364.3 75.54C375.6 61.95 395.8 60.1 409.4 71.4C462.2 115.4 496 181.8 496 255.1C496 388.5 388.5 496 256 496C123.5 496 16 388.5 16 255.1C16 181.8 49.75 115.4 102.6 71.4C116.2 60.1 136.4 61.95 147.7 75.54C158.1 89.13 157.1 109.3 143.5 120.6C104.7 152.9 80 201.6 80 256z"/></svg>
+                </div>
+                <span>Enabled</span>
+                <label class="switch">
+                    <input type="checkbox" name="extensionEnabled">
+                    <span class="slider"></span>
+                </label>
+            </label>            
             <button class="menu-item button" data-link="settings">
                 <div class="icon">
                     <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><rect fill="none" height="24" width="24"/><path d="M19.5,12c0-0.23-0.01-0.45-0.03-0.68l1.86-1.41c0.4-0.3,0.51-0.86,0.26-1.3l-1.87-3.23c-0.25-0.44-0.79-0.62-1.25-0.42 l-2.15,0.91c-0.37-0.26-0.76-0.49-1.17-0.68l-0.29-2.31C14.8,2.38,14.37,2,13.87,2h-3.73C9.63,2,9.2,2.38,9.14,2.88L8.85,5.19 c-0.41,0.19-0.8,0.42-1.17,0.68L5.53,4.96c-0.46-0.2-1-0.02-1.25,0.42L2.41,8.62c-0.25,0.44-0.14,0.99,0.26,1.3l1.86,1.41 C4.51,11.55,4.5,11.77,4.5,12s0.01,0.45,0.03,0.68l-1.86,1.41c-0.4,0.3-0.51,0.86-0.26,1.3l1.87,3.23c0.25,0.44,0.79,0.62,1.25,0.42 l2.15-0.91c0.37,0.26,0.76,0.49,1.17,0.68l0.29,2.31C9.2,21.62,9.63,22,10.13,22h3.73c0.5,0,0.93-0.38,0.99-0.88l0.29-2.31 c0.41-0.19,0.8-0.42,1.17-0.68l2.15,0.91c0.46,0.2,1,0.02,1.25-0.42l1.87-3.23c0.25-0.44,0.14-0.99-0.26-1.3l-1.86-1.41 C19.49,12.45,19.5,12.23,19.5,12z M12.04,15.5c-1.93,0-3.5-1.57-3.5-3.5s1.57-3.5,3.5-3.5s3.5,1.57,3.5,3.5S13.97,15.5,12.04,15.5z"/></svg>

diff --git a/src/extension/popup.js b/src/extension/popup.js
@@ -28,20 +28,23 @@ initSettings();
 initErrorCount();
 
 function initSettings() {
-    const nSettings = document.querySelector('[data-id="settings"]');
-    const nReset = nSettings.querySelector('#reset');
+    const nSettingsContainer = document.querySelector('#multi-page-menu');
+    const nReset = nSettingsContainer.querySelector('#reset');
 
     const defaultOptions = {
+        extensionEnabled: true,
         skipContentWarnings: true,
         unlockNotification: true,
         unlockConfirmation: true,
     };
 
     const options = { ...defaultOptions };
 
-    nSettings.addEventListener('change', ({ target }) => {
-        options[target.name] = target.checked;
-        chrome.storage.sync.set({ options });
+    nSettingsContainer.addEventListener('change', ({ target }) => {
+        if (typeof options[target.name] !== 'undefined') {
+            options[target.name] = target.checked;
+            chrome.storage.sync.set({ options });
+        }
     });
 
     nReset.addEventListener('click', () => {
@@ -57,7 +60,7 @@ function initSettings() {
 
     function resetSettings() {
         for (const option in options) {
-            const nSetting = nSettings.querySelector(`[name=${option}]`);
+            const nSetting = nSettingsContainer.querySelector(`[name=${option}]`);
             if (nSetting) {
                 nSetting.checked = options[option];
             }