Update chrome version to use pure css method

chrome/css/main.css

@@ -0,0 +1,15 @@
+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[remove_trending="true"] a[href="/feed/trending"],
+html[remove_comments="true"] #comments,
+
+html[foo=bar]
+
+{
+
+	display: none !important;
+
+}

chrome/css/options.css

@@ -0,0 +1,32 @@
+body {
+	width: 300px;
+}
+
+#reload_header {
+	text-align: center;
+}
+
+#reload_container {
+	text-align: center;
+
+	padding: 4px;
+	border-width: 2px;
+	border-style: groove;
+	border-color: gray;
+
+	margin: 4px 2px 1px 2px;
+}
+
+#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;
+}

chrome/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 {
+  chrome.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) chrome.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
+chrome.runtime.onMessage.addListener((data, sender) => {
+  const settingKey = data.key;
+  const settingValue = data.value;
+  HTML.setAttribute(settingKey, settingValue);
+});

chrome/js/options.js

@@ -0,0 +1,40 @@
+const HTML = document.documentElement;
+const DEFAULT_SETTINGS = {
+  "remove_homepage": true,
+  "remove_sidebar": true,
+  "remove_end_of_video": true,
+  "remove_trending": false,
+  "remove_comments": false
+}
+
+// Make checkboxes reflect local settings
+document.addEventListener("DOMContentLoaded", () => {
+  chrome.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 };
+    chrome.storage.local.set(saveObj);
+
+    // 2. Update running tabs with the changed setting
+    const messageObj = { key: settingKey, value: settingValue };
+    chrome.tabs.query({}, tabs => {
+      tabs.forEach(tab => {
+        chrome.tabs.sendMessage(tab.id, messageObj);
+      });
+    });
+  });
+});

chrome/manifest.json

@@ -1,42 +1,43 @@
 {
   "name": "Remove Youtube Suggestions",
-  "description": "Removes all suggestions from Youtube.",
+  "description": "Stop the \"YouTube rabbit hole\", customize YouTube's UI for fewer distractions. This add-on gives you the option to remove YouTube video recommendations that appear on the homepage, sidebar, and display that appears at the end of videos.",
   "homepage_url": "https://github.com/lawrencehook/remove-youtube-suggestions",
   "manifest_version": 2,
-  "version": "1.0.0",
+  "version": "1.1.0",
 
   "content_scripts": [
     {
+      "css": ["css/main.css"],
+      "all_frames": true,
       "matches": ["*://*.youtube.com/*"],
-      "js": ["activate-page-action.js"],
       "run_at": "document_start"
     },
     {
       "matches": ["*://*.youtube.com/*"],
-      "js": ["remove-homepage-suggestions.js"],
+      "js": ["js/activate-page-action.js"],
       "run_at": "document_start"
     },
     {
       "matches": ["*://*.youtube.com/*"],
-      "js": ["remove-other-suggestions.js"],
-      "run_at": "document_end"
+      "js": ["js/main.js"],
+      "run_at": "document_start"
     }
   ],
 
   "background": {
-    "scripts": ["background.js"],
+    "scripts": ["js/background.js"],
     "persistent": false
   },
 
   "page_action": {
     "browser_style": true,
-    "show_matches": ["*youtube*"],
+    "show_matches": ["*://*.youtube.com/*"],
     "default_popup": "options.html",
     "default_title": "Options",
     "default_icon": {
-      "16": "icons/no-16.png",
-      "32": "icons/no-32.png",
-      "64": "icons/no-64.png"
+      "16": "images/16.png",
+      "32": "images/32.png",
+      "64": "images/64.png"
     }
   },
 

chrome/options.css

@@ -1,20 +0,0 @@
-body {
-	width: 300px;
-}
-
-#button_container {
-	text-align: center;
-}
-
-#help-box {
-	text-align: left;
-	padding: 8px;
-	border-style: ridge;
-	border-color: gray;
-
-	margin: 4px 2px 1px 2px;
-}
-
-#help-header {
-	text-align: center;
-}

chrome/options.html

@@ -3,7 +3,7 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <link rel="stylesheet" type="text/css" href="options.css">
+    <link rel="stylesheet" type="text/css" href="css/options.css">
   </head>
 
   <body>
@@ -11,50 +11,59 @@
       <legend>Choose which suggestions to remove</legend>
 
       <div>
-          <input type="checkbox" id="homepage" class="RYS_setting_checkbox" name="feature"
-                 value="homepage" checked />
-          <label for="homepage">Homepage</label>
+          <input type="checkbox" id="remove_homepage" name="feature"
+                 value="remove_homepage" checked />
+          <label for="remove_homepage">Homepage</label>
       </div>
 
       <div>
-          <input type="checkbox" id="sidebar" class="RYS_setting_checkbox" name="feature"
-                 value="sidebar" checked />
-          <label for="sidebar">Sidebar</label>
+          <input type="checkbox" id="remove_sidebar" name="feature"
+                 value="remove_sidebar" checked />
+          <label for="remove_sidebar">Sidebar</label>
       </div>
 
       <div>
-          <input type="checkbox" id="videoEnd" class="RYS_setting_checkbox" name="feature"
-                 value="videoEnd" checked />
-          <label for="videoEnd">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>
+          <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>
 
-    <div id="help-box">
-      <div id="help-header">
+    <fieldset>
+      <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>
       Submit feedback <a href="https://docs.google.com/forms/d/e/1FAIpQLScdrPlVKpJTGeDhD85HdYD2opsedlPqaMdN3ZW-ZSRwhqBZpw/viewform">here</a>.
       <br>
-      Donate <a href="https://www.paypal.com/donate/?cmd=_donations&business=FF9K9YD6K6SWG&currency_code=USD&amount=5">here</a>.
+      Donate <a href="https://www.paypal.com/donate/?cmd=_donations&business=FF9K9YD6K6SWG&currency_code=USD">here</a>.
     </div>
 
-    <script src="reload.js"></script>
-    <script src="options.js"></script>
+    <script src="js/reload.js"></script>
+    <script src="js/options.js"></script>
   </body>
 
 </html>

chrome/options.js

@@ -1,48 +0,0 @@
-// Chrome
-if (typeof(chrome) !== 'undefined') {
-  browser = chrome;
-}
-
-// 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 });
-}
-
-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, setCurrentChoice));
-}

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

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