From a91e9bd6396d264ee80f6c43d58054202f762208 Mon Sep 17 00:00:00 2001 From: Lawrence Hook Date: Sun, 10 Jan 2021 15:31:35 -0500 Subject: [PATCH] Release 3.3.0 Refactor to use pure css paradigm Add another 'bonus' option to remove link to the trending page --- firefox/css/main.css | 23 +++++ firefox/css/options.css | 26 ++++-- firefox/js/main.js | 28 ++++++ firefox/js/options.js | 80 +++++++--------- firefox/js/remove-homepage-suggestions.js | 108 --------------------- firefox/js/remove-other-suggestions.js | 109 ---------------------- firefox/manifest.json | 9 +- firefox/options.html | 59 +++++++----- 8 files changed, 142 insertions(+), 300 deletions(-) create mode 100644 firefox/js/main.js delete mode 100644 firefox/js/remove-homepage-suggestions.js delete mode 100644 firefox/js/remove-other-suggestions.js diff --git a/firefox/css/main.css b/firefox/css/main.css index e69de29..5cea596 100644 --- a/firefox/css/main.css +++ b/firefox/css/main.css @@ -0,0 +1,23 @@ +html[remove_homepage="true"] ytd-browse[page-subtype="home"], +html[remove_sidebar="true"] #related, +html[remove_end_of_video="true"] .html5-endscreen, + +html[remove_trending="true"] a[href="/feed/trending"], +html[remove_comments="true"] #comments, +html[remove_comments="true"] #comment-secyoutubetion-renderer-items + +{ + + display: none !important; + +} + + +/* Using display: none on the sidebar messes with the video player's dimensions */ +html[remove_sidebar="true"] #secondary + +{ + + visibility: hidden; + +} diff --git a/firefox/css/options.css b/firefox/css/options.css index dd1be1b..7044041 100644 --- a/firefox/css/options.css +++ b/firefox/css/options.css @@ -1,16 +1,28 @@ -#button_container { +#reload_header { text-align: center; } -#help-box { - text-align: left; - padding: 8px; - border-style: ridge; +#reload_container { + text-align: center; + + padding: 4px; + border-width: 2px; + border-style: groove; border-color: gray; margin: 4px 2px 1px 2px; } -#help-header { +#help_container { + text-align: left; + padding: 8px; + border-width: 2px; + border-style: groove; + border-color: gray; + + margin: 4px 2px 1px 2px; +} + +#help_header { text-align: center; -} \ No newline at end of file +} diff --git a/firefox/js/main.js b/firefox/js/main.js new file mode 100644 index 0000000..a76d4e7 --- /dev/null +++ b/firefox/js/main.js @@ -0,0 +1,28 @@ +const HTML = document.documentElement; +const DEFAULT_SETTINGS = { + "remove_homepage": true, + "remove_sidebar": true, + "remove_end_of_video": true, + "remove_trending": false, + "remove_comments": false +} + +try { + browser.storage.local.get(localSettings => { + Object.keys(DEFAULT_SETTINGS).forEach(settingKey => { + const isLocal = localSettings.hasOwnProperty(settingKey); + const settingValue = isLocal ? localSettings[settingKey] : DEFAULT_SETTINGS[settingKey]; + if (!isLocal) browser.storage.local.set({ [settingKey] : settingValue }); + HTML.setAttribute(settingKey, settingValue); + }); + }); +} catch (e) { + console.log(e); +} + +// Update in real time, by receiving change events from the options menu +browser.runtime.onMessage.addListener((data, sender) => { + const settingKey = data.key; + const settingValue = data.value; + HTML.setAttribute(settingKey, settingValue); +}); diff --git a/firefox/js/options.js b/firefox/js/options.js index 5b77eaa..f950d6e 100644 --- a/firefox/js/options.js +++ b/firefox/js/options.js @@ -1,47 +1,39 @@ -// document.querySelectorAll("RYS_setting_checkbox"); -const homepageCheckbox = document.getElementById('homepage'); -const sidebarCheckbox = document.getElementById('sidebar'); -const videoEndCheckbox = document.getElementById('videoEnd'); -const commentsCheckbox = document.getElementById('comments'); -homepageCheckbox.addEventListener("change", saveHomepageSetting); -sidebarCheckbox.addEventListener("change", saveSidebarSetting); -videoEndCheckbox.addEventListener("change", saveVideoEndSetting); -commentsCheckbox.addEventListener("change", saveCommentsSetting); - -document.addEventListener("DOMContentLoaded", restoreOptions); - -function saveHomepageSetting(e) { - browser.storage.local.set({ homepage: e.target.checked }); +const HTML = document.documentElement; +const DEFAULT_SETTINGS = { + "remove_homepage": true, + "remove_sidebar": true, + "remove_end_of_video": true, + "remove_trending": false, + "remove_comments": false } -function saveSidebarSetting(e) { - browser.storage.local.set({ sidebar: e.target.checked }); -} - -function saveVideoEndSetting(e) { - browser.storage.local.set({ videoEnd: e.target.checked }); -} - -function saveCommentsSetting(e) { - browser.storage.local.set({ comments: e.target.checked }); -} - -function restoreOptions() { - - function setCurrentChoice(result) { - for (let key in result) { - document.getElementById(key).checked = result[key]; - } - } - - function onError(error) { - console.log(`Error: ${error}`); - } - - const settings = ["homepage", "sidebar", "videoEnd", "comments"]; - settings.forEach(setting => { - browser.storage.local. - get(setting). - then(setCurrentChoice, onError); +// Make checkboxes reflect local settings +document.addEventListener("DOMContentLoaded", () => { + browser.storage.local.get(localSettings => { + console.log(localSettings); + Object.keys(localSettings).forEach(settingKey => { + if (!Object.keys(DEFAULT_SETTINGS).includes(settingKey)) return; + document.getElementById(settingKey).checked = localSettings[settingKey]; + }); }); -} +}); + +// Handle check/uncheck events +Object.keys(DEFAULT_SETTINGS).forEach(settingKey => { + const settingCheckbox = document.getElementById(settingKey); + settingCheckbox.addEventListener("change", async e => { + const settingKey = e.target.id; + const settingValue = e.target.checked; + + // 1. Save changes to local storage + const saveObj = { [settingKey]: settingValue }; + browser.storage.local.set(saveObj); + + // 2. Update running tabs with the changed setting + const messageObj = { key: settingKey, value: settingValue }; + const tabs = await browser.tabs.query({}); + tabs.forEach(tab => { + browser.tabs.sendMessage(tab.id, messageObj); + }); + }); +}); diff --git a/firefox/js/remove-homepage-suggestions.js b/firefox/js/remove-homepage-suggestions.js deleted file mode 100644 index 5b0da9b..0000000 --- a/firefox/js/remove-homepage-suggestions.js +++ /dev/null @@ -1,108 +0,0 @@ -// Chrome -if (typeof(chrome) !== 'undefined') { - browser = chrome; - - browser.storage.local.get("homepage", onGotHomepageSetting); - -// Firefox -} else { - - const gettingHomepage = browser.storage.local.get("homepage"); - gettingHomepage.then(onGotHomepageSetting, onError); - -} - - -/*********** - * Homepage - ***********/ -const homepageSelectors = [ - "ytd-page-manager", - "ytd-browse", - "#feed", - "ytd-rich-grid-renderer.style-scope", - "#masthead-ad", - "#spinner-container", - "#home-container-skeleton", - "#rich-shelves", - ".shelf-skeleton", - ".rich-shelf-videos" -]; -const hompageSuggestionsSelector = homepageSelectors.join(', '); -const hideHomepageNodes = node => { - if (node.matches(hompageSuggestionsSelector)) { - node.style.setProperty("display", "none"); - } -}; -const removeHomepageObserver = new MutationObserver(mutations => { - mutations.forEach(mutation => { - hideHomepageNodes(mutation.target); - }); -}); -removeHomepageObserver.observe(document, { - childList: true, - subtree: true, -}); -function onGotHomepageSetting(result) { - const homepage = result.homepage === undefined ? true : result.homepage; - browser.storage.local.set({ homepage }); - updateHomepageStyle(homepage); - - // watch for url changes - const updateHomepageObserver = new MutationObserver(mutations => updateHomepageStyle(homepage)); - updateHomepageObserver.observe(document, { - childList: true, - subtree: true, - }); - - removeHomepageObserver.disconnect(); -} - -function updateHomepageStyle(homepage) { - updateHomepage(homepage && onHomepage() ? "none" : "flex"); -} - -function onHomepage() { - try { - // Test using path - const pathIsHomepage = window.location.pathname.length <= 1; - - // Test using right-sidebar icons - const iconSelector = "span.title.style-scope.ytd-mini-guide-entry-renderer"; - const icons = document.querySelectorAll(iconSelector); - const iconColors = Array.from(icons).map(icon => window.getComputedStyle(icon, null).getPropertyValue("color")); - const iconColorCounts = getCounts(iconColors); - const homeIcon = icons.length > 0 && icons[0]; - const homeIconColor = homeIcon && window.getComputedStyle(homeIcon, null).getPropertyValue("color"); - const iconColorIsHomepage = homeIconColor && iconColorCounts[homeIconColor] === 1; - - return pathIsHomepage || iconColorIsHomepage; - } catch (e) { - console.log(e); - } -} - -function updateHomepage(property) { - const updateDisplay = elt => elt.style.setProperty("display", property); - const suggestions = document.querySelectorAll(hompageSuggestionsSelector) || []; - suggestions.forEach(updateDisplay); -} - - -function removeSelectors(selectors) { - const cssSheet = document.styleSheets.length > 0 && document.styleSheets[0]; - const displayNoneRule = " { display: none !important; }"; - const compoundSelector = selectors.join(", "); - cssSheet && cssSheet.insertRule(compoundSelector + displayNoneRule); -} - -function onError(error) { - console.log(`Error: ${error}`); -} - -function getCounts(arr) { - return arr.reduce((acc, curr) => { - acc[curr] = curr in acc ? acc[curr] + 1 : 1; - return acc; - }, {}); -} \ No newline at end of file diff --git a/firefox/js/remove-other-suggestions.js b/firefox/js/remove-other-suggestions.js deleted file mode 100644 index 9c7fbc8..0000000 --- a/firefox/js/remove-other-suggestions.js +++ /dev/null @@ -1,109 +0,0 @@ -// Chrome -if (typeof(chrome) !== 'undefined') { - browser = chrome; - - try { - browser.storage.local.get("sidebar", onGotSidebarSetting); - browser.storage.local.get("videoEnd", onGotVideoEndSetting); - browser.storage.local.get("comments", onGotCommentsSetting); - } catch (e) { - console.log(e); - } - -// Firefox -} else { - - try { - const gettingSidebar = browser.storage.local.get("sidebar"); - gettingSidebar.then(onGotSidebarSetting, onError); - - const gettingVideoEnd = browser.storage.local.get("videoEnd"); - gettingVideoEnd.then(onGotVideoEndSetting, onError); - - const gettingComments = browser.storage.local.get("comments"); - gettingComments.then(onGotCommentsSetting, onError); - } catch (e) { - console.log(e); - } - -} - - -/********** - * Sidebar - **********/ -function onGotSidebarSetting(result) { - const sidebar = result.sidebar === undefined ? true : result.sidebar; - browser.storage.local.set({ sidebar }); - - if (sidebar) { - removeSelectors([ - // video recommendations - "#upnext", - "ytd-compact-video-renderer.style-scope", - "ytd-compact-radio-renderer.style-scope", - - // ads - "#companion", - "ytd-compact-promoted-video-renderer", - "#container.ytd-iframe-companion-renderer", - "#dismissable.ytd-compact-movie-renderer", // movie recommendations - "ytd-movie-offer-module-renderer", // movie recommendations - "ytd-image-companion-renderer.style-scope", - "ytd-compact-playlist-renderer.style-scope", - "a.ytd-action-companion-renderer", - "#google_companion_ad_div", - "ytd-promoted-sparkles-web-renderer", - "ytd-player-legacy-desktop-watch-ads-renderer", - - "paper-button.yt-next-continuation", // show more button - - // disable_polymer=true - "li.video-list-item.related-list-item", - "h4.watch-sidebar-head", - "hr.watch-sidebar-separation-line", - "button#watch-more-related-button", - ]); - } -} - -/*************** - * End of Video - ***************/ -function onGotVideoEndSetting(result) { - const videoEnd = result.videoEnd === undefined ? true : result.videoEnd; - browser.storage.local.set({ videoEnd }); - if (videoEnd) { - removeSelectors([ - ".html5-endscreen" - ]); - } -} - -/*********** - * Comments - ***********/ -function onGotCommentsSetting(result) { - const comments = result.comments === undefined ? false : result.comments; - browser.storage.local.set({ comments }); - if (comments) { - removeSelectors([ - // standard - "ytd-comment-thread-renderer", - - // for disable_polymer=true - "#comment-secyoutubetion-renderer-items" - ]); - } -} - -function removeSelectors(selectors) { - const cssSheet = document.styleSheets.length > 0 && document.styleSheets[0]; - const displayNoneRule = " { display: none !important; }"; - const compoundSelector = selectors.join(", "); - cssSheet && cssSheet.insertRule(compoundSelector + displayNoneRule); -} - -function onError(error) { - console.log(`Error: ${error}`); -} diff --git a/firefox/manifest.json b/firefox/manifest.json index 9ea6246..1a1eebe 100644 --- a/firefox/manifest.json +++ b/firefox/manifest.json @@ -2,20 +2,15 @@ "description": "Removes all suggestions from Youtube.", "manifest_version": 2, "name": "Remove Youtube Suggestions", - "version": "3.2.2", + "version": "3.3.0", "homepage_url": "https://github.com/lawrencehook/remove-youtube-suggestions", "content_scripts": [ { - "js": ["js/remove-homepage-suggestions.js"], + "js": ["js/main.js"], "matches": ["*://*.youtube.com/*"], "run_at": "document_start" }, - { - "js": ["js/remove-other-suggestions.js"], - "matches": ["*://*.youtube.com/*"], - "run_at": "document_end" - }, { "css": ["css/main.css"], "all_frames": true, diff --git a/firefox/options.html b/firefox/options.html index ed42eac..df30371 100644 --- a/firefox/options.html +++ b/firefox/options.html @@ -11,40 +11,49 @@ Choose which suggestions to remove
- - + +
- - + +
- - -
- -
- -
- - -
- -
- -
- + +
-
-
+
+ Bonus options + +
+ + +
+ +
+ + +
+
+ +
+
+ Not loading correctly? +
+ +
+ +
+
Help us make this addon better!