From b33e16d86857d5817ca90eb3b1716cae0d68a18a Mon Sep 17 00:00:00 2001 From: Lawrence Hook Date: Fri, 30 Jul 2021 21:31:21 -0400 Subject: [PATCH] Add a global on/off button --- firefox/css/main.css | 20 +++--- firefox/css/options.css | 29 +++++++++ firefox/js/main.js | 35 ++++++----- firefox/js/options.js | 101 ++++++++++++++++++++---------- firefox/js/redirect.js | 9 ++- firefox/manifest.json | 2 +- firefox/options.html | 134 ++++++++++++++++++++++------------------ 7 files changed, 209 insertions(+), 121 deletions(-) diff --git a/firefox/css/main.css b/firefox/css/main.css index 8b51179..29d2798 100644 --- a/firefox/css/main.css +++ b/firefox/css/main.css @@ -1,18 +1,18 @@ -html[remove_homepage="true"] ytd-browse[page-subtype="home"], -html[remove_sidebar="true"] #secondary > div.circle, -html[remove_sidebar="true"] #related, -html[remove_end_of_video="true"] .html5-endscreen, +html[global_enable="true"][remove_homepage="true"] ytd-browse[page-subtype="home"], +html[global_enable="true"][remove_sidebar="true"] #secondary > div.circle, +html[global_enable="true"][remove_sidebar="true"] #related, +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[remove_trending="true"] a[href="/feed/explore"], +html[global_enable="true"][remove_trending="true"] a[href="/feed/trending"], +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] { diff --git a/firefox/css/options.css b/firefox/css/options.css index 5f8fea9..b23d7a8 100644 --- a/firefox/css/options.css +++ b/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 { diff --git a/firefox/js/main.js b/firefox/js/main.js index 5df37bd..7da86ef 100644 --- a/firefox/js/main.js +++ b/firefox/js/main.js @@ -1,23 +1,27 @@ const HTML = document.documentElement; -const DEFAULT_SETTINGS = { - "remove_homepage": true, - "remove_sidebar": true, - "remove_end_of_video": true, - "remove_info_cards": false, - "remove_trending": false, - "remove_comments": false, - "remove_chat": false, - "redirect_off": true, - "redirect_to_subs": false, - "redirect_to_wl": false, -} +const SETTINGS_LIST = { + "global_enable": { default: true, eventType: 'click' }, + "remove_homepage": { default: true, eventType: 'change' }, + "remove_sidebar": { default: true, eventType: 'change' }, + "remove_end_of_video": { default: true, eventType: 'change' }, + "remove_info_cards": { default: false, eventType: 'change' }, + "remove_trending": { default: false, eventType: 'change' }, + "remove_comments": { default: false, eventType: 'change' }, + "remove_chat": { default: false, eventType: 'change' }, + "redirect_off": { default: true, eventType: 'change' }, + "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)); }); diff --git a/firefox/js/options.js b/firefox/js/options.js index c4113a1..ef51d36 100644 --- a/firefox/js/options.js +++ b/firefox/js/options.js @@ -1,15 +1,16 @@ const HTML = document.documentElement; -const DEFAULT_SETTINGS = { - "remove_homepage": true, - "remove_sidebar": true, - "remove_end_of_video": true, - "remove_info_cards": false, - "remove_trending": false, - "remove_comments": false, - "remove_chat": false, - "redirect_off": true, - "redirect_to_subs": false, - "redirect_to_wl": false, +const SETTINGS_LIST = { + "global_enable": { default: true, eventType: 'click' }, + "remove_homepage": { default: true, eventType: 'change' }, + "remove_sidebar": { default: true, eventType: 'change' }, + "remove_end_of_video": { default: true, eventType: 'change' }, + "remove_info_cards": { default: false, eventType: 'change' }, + "remove_trending": { default: false, eventType: 'change' }, + "remove_comments": { default: false, eventType: 'change' }, + "remove_chat": { default: false, eventType: 'change' }, + "redirect_off": { default: true, eventType: 'change' }, + "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; - document.getElementById(key).checked = localSettings[key]; + const value = 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 -// Save changes to local storage -Object.keys(DEFAULT_SETTINGS).forEach(key => { - const settingCheckbox = document.getElementById(key); - settingCheckbox.addEventListener("change", async e => { +// Handle click/change events from the options menu. +// 1. Save changes to local storage. +// 2. Send messages to main.js which updates the HTML attributes. +// 3. (optional) Dynamically change options.html. +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 - // Only one redirect can be active at a time. + // Handle changes to a standard option. + 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 - const saveObj = { [key]: value }; - browser.storage.local.set(saveObj); + // Handle changes to a global option. + if (key === 'global_enable') { + const value = settingButton.innerHTML === "Enable"; - // 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); - }); + 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); + }); + + // Update button text, and change option page's HTML attribute. + settingButton.innerHTML = value ? "Disable" : "Enable"; + HTML.setAttribute(key, value); + return; + } }); }); diff --git a/firefox/js/redirect.js b/firefox/js/redirect.js index f701f41..0557bda 100644 --- a/firefox/js/redirect.js +++ b/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']; - if (redirectUrl) return { redirectUrl }; + + const { global_enable } = await browser.storage.local.get('global_enable'); + if (global_enable === false) return; + + const { redirect } = await browser.storage.local.get('redirect'); + if (redirect) return { redirectUrl: redirect }; }, { urls: [ "*://youtube.com/", diff --git a/firefox/manifest.json b/firefox/manifest.json index ec52fc1..ccb7b97 100644 --- a/firefox/manifest.json +++ b/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": { diff --git a/firefox/options.html b/firefox/options.html index 7a8bad0..c0f1eac 100644 --- a/firefox/options.html +++ b/firefox/options.html @@ -8,75 +8,89 @@
- Choose suggestions to remove - -
- - -
- -
- - -
- -
- - + Remove Youtube Suggestions +
+
+ +
+
+ +
-
- More removal options +
+
+ Choose suggestions to remove -
- - -
+
+ + +
-
- - -
+
+ + +
-
- - -
+
+ + +
+
-
- - -
-
+
+ More removal options -
- Redirect Homepage -
- - -
+
+ + +
-
- - -
+
+ + +
-
- - -
-
+
+ + +
+ +
+ + +
+
+ +
+ Redirect Homepage +
+ + +
+ +
+ + +
+ +
+ + +
+
+
@@ -99,4 +113,4 @@ - \ No newline at end of file +