another small browser extension to tailor youtube more to my liking

YouTube Player Button Hider

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

contentScript.js

"use strict";

const buttonsToHideByClass = [
  "prev"
//  ,"play"
  ,"next"
  ,"fullerscreen-edu"
//  ,"subtitles"
//  ,"settings"
//  ,"multicam"
//  ,"miniplayer"
//  ,"pip"
  ,"size"
  ,"remote"
//  ,"fullscreen"
];

const hideRules = [
  (elem) => buttonsToHideByClass.map(c=>`ytp-${c}-button`).some(c=>elem.classList.contains(c))
//  ,(elem) => ("tooltipTargetId" in elem.dataset && elem.dataset["tooltipTargetId"] == "ytp-autonav-toggle-button")
];

function getButtons() {
  // leaving out the '> div >' grabs a couple extras we don't care about
  return document.querySelectorAll(".ytp-chrome-controls > div > .ytp-button");
}

function isHidden(element) { return element.style.display === "none"; }
function hide(element) { element.style.display = "none"; }

function applyRules(buttons) {
  for(const button of buttons) {
    const doHide = (hideRules.some(rule => rule(button)));
    if(hideRules.some(rule => rule(button)))
      hide(button);
  }
}

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

  if(buttons.length === 0) { // probably not on a video page
    // tactic found here: https://stackoverflow.com/a/34100952
    document.addEventListener("yt-navigate-finish",tryFindAndHideButtons, {once: true, passive: true});
    // above not working, hack time
    setTimeout(tryFindAndHideButtons, 100);
    return;
  }

  applyRules(buttons);

  // 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 Player Button Hider",
	"version": "0.1",
	"description": "Hides unwanted buttons at the bottom of YT's video player (i.e., stuff you never use, or only ever use via keyboard shortcut)",
	"permissions": ["*://*.youtube.com/*"],
	"content_scripts": [{
		"matches": ["*://*.youtube.com/*"],
		"js": ["contentScript.js"]
	}],
	"manifest_version": 2
}