yet another small browser extension to tailor youtube more to my liking

YouTube Video Page Button Hider

YouTube Video Page Button Hider
(this is a dummy file to set this gist's name)

contentScript.js

"use strict";

/** @type {{predecate: (elem:HTMLElement)=> boolean, action: (elem:HTMLElement)=> void}[]} */
const buttonActions = (function() {
  /** @param {string} text */
  function textIs(text) {
    /** @param {HTMLElement} element */
    return (element) => element.innerText == text;
  }

  /** @param {HTMLElement} element */
  function hide(element) { element.style.display = "none"; }
  /** @param {HTMLElement} element */
  function removeText(element) {
    const textContainer = /** @type HTMLElement */ (element.querySelector("a #text"));
    hide(textContainer);
  }

  return [
    { predecate: textIs("DISLIKE"), action: removeText },
    { predecate: textIs("SHARE"), action: removeText },
    { predecate: textIs("DOWNLOAD"), action: hide },
    { predecate: textIs("THANKS"), action: removeText },
    { predecate: textIs("CLIP"), action: removeText },
    { predecate: textIs("SAVE"), action: removeText },
  ];
})();

function getButtons() {
  return document.querySelector(".ytd-video-primary-info-renderer div.top-level-buttons")?.children;
}

/** @param {Iterable<HTMLElement>} buttons */
function applyRules(buttons) {
  for(const button of buttons) {
    for(const rule of buttonActions) {
      const applies = rule.predecate(button);
      if(applies)
        rule.action(button);
    }
  }
}

function tryFindAndHideButtons() {
  const buttons = getButtons();

  if(!buttons || buttons.length === 0) {
    if(document.location.pathname.includes("watch")) {
      // stuff's not fully loaded yet, and the below tactic doesn't seem to work for these buttons
      // so... this is pretty gross, but it works
      setTimeout(tryFindAndHideButtons,50);
    }
    else { // not on a video page
      // tactic found here: https://stackoverflow.com/a/34100952
      document.addEventListener("yt-navigate-finish",tryFindAndHideButtons, {once: true, passive: true});
    }
    return;
  }

  applyRules(buttons);

/* this seems to not be needed, cool
  // some additional hoops to make sure they stay hidden ("remote" is notably tenacious)
  const observer = new MutationObserver(function(mutationList) {
    const modifiedVisibleButtons =
      mutationList.
      filter(mutation => 
        mutation.type === "attributes" &&
        mutation.attributeName === "style" &&
        !isHidden(mutation.target)
      ).map(mutation => mutation.target);

    applyRules(modifiedVisibleButtons);
  });
  const observerOptions = { attributeFilter : ['style'] };

  for(const button of buttons)
    observer.observe(button, observerOptions);
*/
}

tryFindAndHideButtons();

/* vim: set et sw=0 tabstop=2: */

manifest.json

{
	"name": "YouTube Video Page Button Hider",
	"version": "0.1",
	"description": "Hides unwanted buttons youtube's video page that appear under the video, in line with the like/dislike buttons",
	"permissions": ["*://*.youtube.com/*"],
	"content_scripts": [{
		"matches": ["*://*.youtube.com/*"],
		"js": ["contentScript.js"]
	}],
	"manifest_version": 2
}