Add a global on/off button

firefox/css/main.css

@@ -1,18 +1,18 @@
-html[remove_homepage="true"] ytd-browse[page-subtype="home"],
+html[global_enable="true"][remove_homepage="true"] ytd-browse[page-subtype="home"],
-html[remove_sidebar="true"] #secondary > div.circle,
+html[global_enable="true"][remove_sidebar="true"] #secondary > div.circle,
-html[remove_sidebar="true"] #related,
+html[global_enable="true"][remove_sidebar="true"] #related,
-html[remove_end_of_video="true"] .html5-endscreen,
+html[global_enable="true"][remove_end_of_video="true"] .html5-endscreen,
 
-html[remove_info_cards="true"] .ytp-ce-element.ytp-ce-element,
+html[global_enable="true"][remove_info_cards="true"] .ytp-ce-element.ytp-ce-element,
 
-html[remove_trending="true"] a[href="/feed/trending"],
+html[global_enable="true"][remove_trending="true"] a[href="/feed/trending"],
-html[remove_trending="true"] a[href="/feed/explore"],
+html[global_enable="true"][remove_trending="true"] a[href="/feed/explore"],
 
-html[remove_comments="true"] #comments,
+html[global_enable="true"][remove_comments="true"] #comments,
 
-html[remove_chat="true"] #chat,
+html[global_enable="true"][remove_chat="true"] #chat,
 
-html[foo=bar]
+html[global_enable="true"][foo=bar]
 
 {
 

firefox/css/options.css

@@ -1,5 +1,34 @@
+body {
+	border-width: 4.5px;
+	border-style: solid;
+	border-color: black;
+
+	padding: 2px 2px 2px 2px;
+}
+
+html[global_enable="false"] #primary_options
+{
+	background-color: gray;
+	color:  white;
+}
+
+html[global_enable="false"] #primary_options *
+{
+	pointer-events: none;
+}
+
+#header_legend {
+	font-size: larger;
+	text-align: center;
+}
+
+#header_container * {
+	text-align: center;
+}
+
 #reload_header {
 	text-align: center;
+	margin-bottom: 5px;
 }
 
 #reload_container {

firefox/js/main.js

@@ -1,23 +1,27 @@
 const HTML = document.documentElement;
-const DEFAULT_SETTINGS = {
+const SETTINGS_LIST = {
-  "remove_homepage": true,
+  "global_enable":        { default: true,  eventType: 'click'  },
-  "remove_sidebar": true,
+  "remove_homepage":      { default: true,  eventType: 'change' },
-  "remove_end_of_video": true,
+  "remove_sidebar":       { default: true,  eventType: 'change' },
-  "remove_info_cards": false,
+  "remove_end_of_video":  { default: true,  eventType: 'change' },
-  "remove_trending": false,
+  "remove_info_cards":    { default: false, eventType: 'change' },
-  "remove_comments": false,
+  "remove_trending":      { default: false, eventType: 'change' },
-  "remove_chat": false,
+  "remove_comments":      { default: false, eventType: 'change' },
-  "redirect_off": true,
+  "remove_chat":          { default: false, eventType: 'change' },
-  "redirect_to_subs": false,
+  "redirect_off":         { default: true,  eventType: 'change' },
-  "redirect_to_wl": false,
+  "redirect_to_subs":     { default: false, eventType: 'change' },
-}
+  "redirect_to_wl":       { default: false, eventType: 'change' },
+};
 
+// Initialize HTML attributes with local settings, or defaults.
 try {
   browser.storage.local.get(localSettings => {
-    Object.keys(DEFAULT_SETTINGS).forEach(key => {
+    Object.keys(SETTINGS_LIST).forEach(key => {
       const isLocal = localSettings.hasOwnProperty(key);
-      const value = isLocal ? localSettings[key] : DEFAULT_SETTINGS[key];
+      const value = isLocal ? localSettings[key] : SETTINGS_LIST[key].default;
       if (!isLocal) browser.storage.local.set({ [key] : value });
+
+      // Activate removal functionality.
       HTML.setAttribute(key, value);
     });
   });
@@ -25,7 +29,8 @@ try {
   console.log(e);
 }
 
-// Update in real time, by receiving change events from the options menu
+// Update HTML attributes in real time.
+//   receive messages from options.js
 browser.runtime.onMessage.addListener((data, sender) => {
   data.forEach(({ key, value }) => HTML.setAttribute(key, value));
 });

firefox/js/options.js

@@ -1,15 +1,16 @@
 const HTML = document.documentElement;
-const DEFAULT_SETTINGS = {
+const SETTINGS_LIST = {
-  "remove_homepage": true,
+  "global_enable":        { default: true,  eventType: 'click'  },
-  "remove_sidebar": true,
+  "remove_homepage":      { default: true,  eventType: 'change' },
-  "remove_end_of_video": true,
+  "remove_sidebar":       { default: true,  eventType: 'change' },
-  "remove_info_cards": false,
+  "remove_end_of_video":  { default: true,  eventType: 'change' },
-  "remove_trending": false,
+  "remove_info_cards":    { default: false, eventType: 'change' },
-  "remove_comments": false,
+  "remove_trending":      { default: false, eventType: 'change' },
-  "remove_chat": false,
+  "remove_comments":      { default: false, eventType: 'change' },
-  "redirect_off": true,
+  "remove_chat":          { default: false, eventType: 'change' },
-  "redirect_to_subs": false,
+  "redirect_off":         { default: true,  eventType: 'change' },
-  "redirect_to_wl": false,
+  "redirect_to_subs":     { default: false, eventType: 'change' },
+  "redirect_to_wl":       { default: false, eventType: 'change' },
 };
 
 const REDIRECT_URLS = {
@@ -17,49 +18,85 @@ const REDIRECT_URLS = {
   "redirect_to_wl": 'https://www.youtube.com/playlist/?list=WL',
 };
 
-// Make checkboxes reflect local settings
+// Sync options page with local settings.
 document.addEventListener("DOMContentLoaded", () => {
   browser.storage.local.get(localSettings => {
     Object.keys(localSettings).forEach(key => {
-      if (!Object.keys(DEFAULT_SETTINGS).includes(key)) return;
+      const value = localSettings[key];
-      document.getElementById(key).checked = localSettings[key];
+      if (!Object.keys(SETTINGS_LIST).includes(key)) return;
+      const settingButton = document.getElementById(key);
+      settingButton.checked = value;
+
+      if (key === 'global_enable') {
+        settingButton.innerHTML = value ? 'Disable' : 'Enable';
+        HTML.setAttribute(key, value);
+      }
     });
   });
 });
 
-// Handle check/uncheck events
+// Handle click/change events from the options menu.
-//    Save changes to local storage
+//    1. Save changes to local storage.
-Object.keys(DEFAULT_SETTINGS).forEach(key => {
+//    2. Send messages to main.js which updates the HTML attributes.
-  const settingCheckbox = document.getElementById(key);
+//    3. (optional) Dynamically change options.html.
-  settingCheckbox.addEventListener("change", async e => {
+Object.keys(SETTINGS_LIST).forEach(key => {
+  const settingButton = document.getElementById(key);
+  const { eventType } = SETTINGS_LIST[key];
+  settingButton.addEventListener(eventType, async e => {
     const key = e.target.id;
     const value = e.target.checked;
 
-    // Handle "redirect" radio buttons
+    // Handle changes to a standard option.
-    //    Only one redirect can be active at a time.
+    if (key.includes('remove')) {
+      const saveObj = { [key]: value };
+      browser.storage.local.set(saveObj);
+
+      // Update running tabs with the changed setting
+      const messageObj = [{ key, value }];
+      const tabs = await browser.tabs.query({});
+      tabs.forEach(tab => {
+        browser.tabs.sendMessage(tab.id, messageObj);
+      });
+      return;
+    }
+
+    // Handle changes to a redirect option.
     if (key.includes('redirect')) {
-      const redirectKeys = Object.keys(DEFAULT_SETTINGS).
+
+      // Deactive the "other" redirect options.
+      const redirectKeys = Object.keys(SETTINGS_LIST).
         filter(key => key.includes('redirect'));
       const saveObj = redirectKeys.reduce((acc, curr) => {
         acc[curr] = false;
         return acc;
       }, { redirect: false });
-      if (REDIRECT_URLS[key]) saveObj['redirect'] = REDIRECT_URLS[key];
       saveObj[key] = true;
+
+      // Set the redirect URL.
+      if (REDIRECT_URLS[key]) saveObj['redirect'] = REDIRECT_URLS[key];
+
       browser.storage.local.set(saveObj);
       return;
     }
 
-    // Handle "remove" checkbox buttons
+    // Handle changes to a global option.
-    const saveObj = { [key]: value };
+    if (key === 'global_enable') {
-    browser.storage.local.set(saveObj);
+      const value = settingButton.innerHTML === "Enable";
 
-    // Update running tabs with the changed setting
+      const saveObj = { [key]: value };
-    const messageObj = [{ key, value }];
+      browser.storage.local.set(saveObj);
-    const tabs = await browser.tabs.query({});
-    tabs.forEach(tab => {
-      browser.tabs.sendMessage(tab.id, messageObj);
-    });
 
+      // Update running tabs with the changed setting
+      const messageObj = [{ key, value }];
+      const tabs = await browser.tabs.query({});
+      tabs.forEach(tab => {
+        browser.tabs.sendMessage(tab.id, messageObj);
+      });
+
+      // Update button text, and change option page's HTML attribute.
+      settingButton.innerHTML = value ? "Disable" : "Enable";
+      HTML.setAttribute(key, value);
+      return;
+    }
   });
 });

firefox/js/redirect.js

@@ -1,7 +1,10 @@
 browser.webRequest.onBeforeRequest.addListener(async details => {
-    const setting = await browser.storage.local.get('redirect');
+
-    const redirectUrl = setting['redirect'];
+    const { global_enable } = await browser.storage.local.get('global_enable');
-    if (redirectUrl) return { redirectUrl };
+    if (global_enable === false) return;
+
+    const { redirect } = await browser.storage.local.get('redirect');
+    if (redirect) return { redirectUrl: redirect };
   },
   { urls: [
       "*://youtube.com/",

firefox/manifest.json

@@ -2,7 +2,7 @@
   "description": "Removes all suggestions from Youtube.",
   "manifest_version": 2,
   "name": "Remove Youtube Suggestions",
-  "version": "3.5.3",
+  "version": "4.0.0",
   "homepage_url": "https://github.com/lawrencehook/remove-youtube-suggestions",
 
   "background": {

firefox/options.html

@@ -8,75 +8,89 @@
 
   <body>
     <fieldset>
-      <legend>Choose suggestions to remove</legend>
+      <legend id="header_legend">Remove Youtube Suggestions</legend>
-
+      <div id="header_container">
-      <div>
+        <div id="brand_image_container">
-          <input type="checkbox" id="remove_homepage" name="feature"
+          <img src="images/64.png"></img>
-                 value="remove_homepage" checked />
+        </div>
-          <label for="remove_homepage">Homepage</label>
+        <div id="enable_container">
-      </div>
+          <button id="global_enable">Disable</button>
-
+        </div>
-      <div>
-          <input type="checkbox" id="remove_sidebar" name="feature"
-                 value="remove_sidebar" checked />
-          <label for="remove_sidebar">Sidebar</label>
-      </div>
-
-      <div>
-          <input type="checkbox" id="remove_end_of_video" name="feature"
-                 value="remove_end_of_video" checked />
-          <label for="remove_end_of_video">End of Video</label>
       </div>
     </fieldset>
 
-    <fieldset>
+    <div id="primary_options">
-      <legend>More removal options</legend>
+      <fieldset>
+        <legend>Choose suggestions to remove</legend>
 
-      <div>
+        <div>
-          <input type="checkbox" id="remove_info_cards" name="feature"
+            <input type="checkbox" id="remove_homepage" name="feature"
-                 value="remove_info_cards" unchecked />
+                   value="remove_homepage" checked />
-          <label for="remove_info_cards">In-Video Info Cards</label>
+            <label for="remove_homepage">Homepage</label>
-      </div>
+        </div>
 
-      <div>
+        <div>
-          <input type="checkbox" id="remove_trending" name="feature"
+            <input type="checkbox" id="remove_sidebar" name="feature"
-                 value="remove_trending" unchecked />
+                   value="remove_sidebar" checked />
-          <label for="remove_trending">Link to Explore Page</label>
+            <label for="remove_sidebar">Sidebar</label>
-      </div>
+        </div>
 
-      <div>
+        <div>
-          <input type="checkbox" id="remove_comments" name="feature"
+            <input type="checkbox" id="remove_end_of_video" name="feature"
-                 value="remove_comments" unchecked />
+                   value="remove_end_of_video" checked />
-          <label for="remove_comments">Video Comments</label>
+            <label for="remove_end_of_video">End of Video</label>
-      </div>
+        </div>
+      </fieldset>
 
-      <div>
+      <fieldset>
-          <input type="checkbox" id="remove_chat" name="feature"
+        <legend>More removal options</legend>
-                 value="remove_chat" unchecked />
-          <label for="remove_chat">Live-Stream Chat</label>
-      </div>
-    </fieldset>
 
-    <fieldset>
+        <div>
-      <legend>Redirect Homepage</legend>
+            <input type="checkbox" id="remove_trending" name="feature"
-      <div>
+                   value="remove_trending" unchecked />
-          <input type="radio" id="redirect_off" name="redirect"
+            <label for="remove_trending">Link to Explore Page</label>
-                 value="redirect_off" checked />
+        </div>
-          <label for="redirect_off">Off</label>
-      </div>
 
-      <div>
+        <div>
-          <input type="radio" id="redirect_to_subs" name="redirect"
+            <input type="checkbox" id="remove_info_cards" name="feature"
-                 value="redirect_to_subs" unchecked />
+                   value="remove_info_cards" unchecked />
-          <label for="redirect_to_subs">to Subscriptions</label>
+            <label for="remove_info_cards">In-Video Info Cards</label>
-      </div>
+        </div>
 
-      <div>
+        <div>
-          <input type="radio" id="redirect_to_wl" name="redirect"
+            <input type="checkbox" id="remove_comments" name="feature"
-                 value="redirect_to_wl" unchecked />
+                   value="remove_comments" unchecked />
-          <label for="redirect_to_wl">to Watch Later</label>
+            <label for="remove_comments">Video Comments</label>
-      </div>
+        </div>
-    </fieldset>
+
+        <div>
+            <input type="checkbox" id="remove_chat" name="feature"
+                   value="remove_chat" unchecked />
+            <label for="remove_chat">Live-Stream Chat</label>
+        </div>
+      </fieldset>
+
+      <fieldset>
+        <legend>Redirect Homepage</legend>
+        <div>
+            <input type="radio" id="redirect_off" name="redirect"
+                   value="redirect_off" checked />
+            <label for="redirect_off">Off</label>
+        </div>
+
+        <div>
+            <input type="radio" id="redirect_to_subs" name="redirect"
+                   value="redirect_to_subs" unchecked />
+            <label for="redirect_to_subs">to Subscriptions</label>
+        </div>
+
+        <div>
+            <input type="radio" id="redirect_to_wl" name="redirect"
+                   value="redirect_to_wl" unchecked />
+            <label for="redirect_to_wl">to Watch Later</label>
+        </div>
+      </fieldset>
+    </div>
 
     <div id="reload_container">
       <div id="reload_header">
@@ -99,4 +113,4 @@
     <script src="js/options.js"></script>
   </body>
 
-</html>
+</html>