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

@@ -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;
+
+}

firefox/css/options.css

@@ -1,16 +1,28 @@
-#button_container {
+#reload_header {
 	text-align: center;
 }
 
-#help-box {
+#reload_container {
-	text-align: left;
+	text-align: center;
-	padding: 8px;
+
-	border-style: ridge;
+	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;
-}
+}

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);
+});

firefox/js/options.js

@@ -1,47 +1,39 @@
-// document.querySelectorAll("RYS_setting_checkbox");
+const HTML = document.documentElement;
-const homepageCheckbox = document.getElementById('homepage');
+const DEFAULT_SETTINGS = {
-const sidebarCheckbox = document.getElementById('sidebar');
+  "remove_homepage": true,
-const videoEndCheckbox = document.getElementById('videoEnd');
+  "remove_sidebar": true,
-const commentsCheckbox = document.getElementById('comments');
+  "remove_end_of_video": true,
-homepageCheckbox.addEventListener("change", saveHomepageSetting);
+  "remove_trending": false,
-sidebarCheckbox.addEventListener("change", saveSidebarSetting);
+  "remove_comments": false
-videoEndCheckbox.addEventListener("change", saveVideoEndSetting);
-commentsCheckbox.addEventListener("change", saveCommentsSetting);
-
-document.addEventListener("DOMContentLoaded", restoreOptions);
-
-function saveHomepageSetting(e) {
-	browser.storage.local.set({ homepage: e.target.checked });
 }
 
-function saveSidebarSetting(e) {
+// Make checkboxes reflect local settings
-	browser.storage.local.set({ sidebar: e.target.checked });
+document.addEventListener("DOMContentLoaded", () => {
-}
+  browser.storage.local.get(localSettings => {
-
+    console.log(localSettings);
-function saveVideoEndSetting(e) {
+    Object.keys(localSettings).forEach(settingKey => {
-  browser.storage.local.set({ videoEnd: e.target.checked });
+      if (!Object.keys(DEFAULT_SETTINGS).includes(settingKey)) return;
-}
+      document.getElementById(settingKey).checked = localSettings[settingKey];
-
+    });
-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);
   });
-}
+});
+
+// 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);
+    });
+  });
+});

firefox/js/remove-homepage-suggestions.js

@@ -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;
-  }, {});
-}

firefox/js/remove-other-suggestions.js

@@ -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}`);
-}

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,

firefox/options.html

@@ -11,40 +11,49 @@
       <legend>Choose which suggestions to remove</legend>
 
       <div>
-          <input type="checkbox" id="homepage" class="RYS_setting_checkbox" name="feature"
+          <input type="checkbox" id="remove_homepage" name="feature"
-                 value="homepage" checked />
+                 value="remove_homepage" checked />
-          <label for="homepage">Homepage</label>
+          <label for="remove_homepage">Homepage</label>
       </div>
 
       <div>
-          <input type="checkbox" id="sidebar" class="RYS_setting_checkbox" name="feature"
+          <input type="checkbox" id="remove_sidebar" name="feature"
-                 value="sidebar" checked />
+                 value="remove_sidebar" checked />
-          <label for="sidebar">Sidebar</label>
+          <label for="remove_sidebar">Sidebar</label>
       </div>
 
       <div>
-          <input type="checkbox" id="videoEnd" class="RYS_setting_checkbox" name="feature"
+          <input type="checkbox" id="remove_end_of_video" name="feature"
-                 value="videoEnd" checked />
+                 value="remove_end_of_video" checked />
-          <label for="videoEnd">End of Video</label>
+          <label for="remove_end_of_video">End of Video</label>
-      </div>
-
-      <hr>
-
-      <div>
-          <input type="checkbox" id="comments" class="RYS_setting_checkbox" name="feature"
-                 value="comments" unchecked />
-          <label for="comments">Comments</label>
-      </div>
-
-      <hr>
-
-      <div id="button_container">
-        <button id="reload_button">Reload</button>
       </div>
     </fieldset>
 
-    <div id="help-box">
+    <fieldset>
-      <div id="help-header">
+      <legend>Bonus options</legend>
+
+      <div>
+          <input type="checkbox" id="remove_trending" name="feature"
+                 value="remove_trending" unchecked />
+          <label for="remove_trending">Link to Trending Page</label>
+      </div>
+
+      <div>
+          <input type="checkbox" id="remove_comments" name="feature"
+                 value="remove_comments" unchecked />
+          <label for="remove_comments">Comments</label>
+      </div>
+    </fieldset>
+
+    <div id="reload_container">
+      <div id="reload_header">
+        Not loading correctly?
+      </div>
+      <button id="reload_button">Refresh</button>
+    </div>
+
+    <div id="help_container">
+      <div id="help_header">
       Help us make this addon better!
       </div>
       <hr>