Fix chrome popup pageAction

Split files into firefox and chrome specific directories

chrome/activate-page-action.js

@@ -0,0 +1,2 @@
+// https://stackoverflow.com/questions/35882089/popup-is-not-appearing-when-used-page-action
+chrome.runtime.sendMessage({"message": "activate_icon"});

chrome/background.js

@@ -0,0 +1,8 @@
+// https://stackoverflow.com/questions/35882089/popup-is-not-appearing-when-used-page-action
+const activatePageAction = (request, sender, sendResponse) => {
+  if (request.message === "activate_icon") {
+  	chrome.pageAction.show(sender.tab.id);
+  }
+}
+
+chrome.extension.onMessage.addListener(activatePageAction);

chrome/manifest.json

@@ -0,0 +1,44 @@
+{
+  "name": "Remove Youtube Suggestions",
+  "description": "Removes all suggestions from Youtube.",
+  "homepage_url": "https://github.com/emumoo/remove-youtube-suggestions",
+  "manifest_version": 2,
+  "version": "1.0.0",
+
+  "content_scripts": [
+    {
+      "matches": ["*://*.youtube.com/*"],
+      "js": ["activate-page-action.js"],
+      "run_at": "document_start"
+    },
+    {
+      "matches": ["*://*.youtube.com/*"],
+      "js": ["remove-homepage-suggestions.js"],
+      "run_at": "document_start"
+    },
+    {
+      "matches": ["*://*.youtube.com/*"],
+      "js": ["remove-other-suggestions.js"],
+      "run_at": "document_end"
+    }
+  ],
+
+  "background": {
+    "scripts": ["background.js"],
+    "persistent": false
+  },
+
+  "page_action": {
+    "browser_style": true,
+    "show_matches": ["*youtube*"],
+    "default_popup": "options.html",
+    "default_title": "Options",
+    "default_icon": {
+      "16": "icons/no-16.png",
+      "32": "icons/no-32.png",
+      "64": "icons/no-64.png"
+    }
+  },
+
+  "permissions": ["storage"]
+}

chrome/options.css

@@ -0,0 +1,20 @@
+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.js

@@ -0,0 +1,48 @@
+// 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/reload.js

@@ -0,0 +1,10 @@
+const reloadButton = document.getElementById("reload_button");
+reloadButton.addEventListener("click", reload);
+
+console.log("hi");
+
+async function reload() {
+	chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
+		console.log(tabs);
+	});
+}

firefox/manifest.json

@@ -19,13 +19,15 @@
   ],
 
   "options_ui": {
-    "page": "options.html"
+    "page": "options.html",
+    "open_in_tab": false
   },
 
   "page_action": {
     "browser_style": true,
     "show_matches": ["*://*.youtube.com/*"],
     "default_popup": "options.html",
+    "default_title": "Options",
     "default_icon": {
       "16": "icons/no-16.png",
       "32": "icons/no-32.png",

firefox/options.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" type="text/css" href="options.css">
+  </head>
+
+  <body>
+    <fieldset>
+      <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>
+      </div>
+
+      <div>
+          <input type="checkbox" id="sidebar" class="RYS_setting_checkbox" name="feature"
+                 value="sidebar" checked />
+          <label for="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>
+      </div>
+    </fieldset>
+
+    <div id="help-box">
+      <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>.
+    </div>
+
+    <script src="reload.js"></script>
+    <script src="options.js"></script>
+  </body>
+
+</html>

firefox/remove-homepage-suggestions.js

@@ -0,0 +1,108 @@
+// 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/remove-other-suggestions.js

@@ -0,0 +1,109 @@
+// 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}`);
+}