How to block the annoying "Sign in to YouTube" popup? [closed]

Question

Add the following JavaScript to your browser through an extension (like "User JavaScript and CSS" for Chrome and "Greasemonkey" for Firefox):

// SentinelJS is a JavaScript library that lets you detect new DOM nodes
const sentinel = function(){var e,n,t,i=Array.isArray,r={},o={};return{on:function(a,s){if(s){if(!e){var f=document,l=f.head;f.addEventListener("animationstart",function(e,n,t,i){if(n=o[e.animationName])for(e.stopImmediatePropagation(),t=n.length,i=0;i<t;i++)n[i](e.target)},!0),e=f.createElement("style"),l.insertBefore(e,l.firstChild),n=e.sheet,t=n.cssRules}(i(a)?a:[a]).map(function(e,i,a){(i=r[e])||(a="!"==e[0],r[e]=i=a?e.slice(1):"sentinel-"+Math.random().toString(16).slice(2),t[n.insertRule("@keyframes "+i+"{from{transform:none;}to{transform:none;}}",t.length)]._id=e,a||(t[n.insertRule(e+"{animation-duration:0.0001s;animation-name:"+i+";}",t.length)]._id=e),r[e]=i),(o[i]=o[i]||[]).push(s)})}},off:function(e,a){(i(e)?e:[e]).map(function(e,i,s,f){if(i=r[e]){if(s=o[i],a)for(f=s.length;f--;)s[f]===a&&s.splice(f,1);else s=[];if(!s.length){for(f=t.length;f--;)t[f]._id==e&&n.deleteRule(f);delete r[e],delete o[i]}}})},reset:function(){r={},o={},e&&e.parentNode.removeChild(e),e=0}}}(document);

(() => {
  const isSignedIn = document.cookie.includes('APISID=');

  if (isSignedIn) return;

  addStyles();
  addScript();

  const observer = new MutationObserver(() => {
    const dismissButton = document.querySelector(
      'yt-upsell-dialog-renderer #dismiss-button'
    );

    dismissButton && dismissButton.click();

    const consentBump = document.querySelector('#consent-bump');

    if (consentBump) {
      consentBump.remove();
      
      const video = document.querySelector('video');

      if (!video) return;

      const onVideoPauseAfterConsentBump = () => {
        video.play();
        video.removeEventListener('pause', onVideoPauseAfterConsentBump);
        setPopupContainerDisplay();
      };

      video.addEventListener('pause', onVideoPauseAfterConsentBump);
    }
  });

  observer.observe(document.querySelector('ytd-app'), { childList: true });

  sentinel.on('.ytp-large-play-button', (button) => {
    let searchTime;
    try {
      searchTime = parseInt(location.search.match(/&t=(\d+)/)[1]);
    } catch {}

    button.click();
    searchTime && (document.querySelector('video').currentTime = searchTime);

    setPopupContainerDisplay();
  });

  function setPopupContainerDisplay() {
    const popupContainer = document.querySelector('.ytd-popup-container');
    popupContainer && (popupContainer.style.display = 'none');
  }

  function addStyles() {
    const style = document.createElement('style');

    style.innerHTML = /* css */ `
      #consent-bump,
      iron-overlay-backdrop,
      yt-upsell-dialog-renderer {
        display: none !important;
      }
    `;

    document.head.append(style);
  }

  function addScript() {
    const script = document.createElement('script');

    script.innerHTML = /* javascript */ `
      const player = document.querySelector('#movie_player');
      player && (player.stopVideo = function() { console.log("Don't stop!"); });
    `;

    document.body.append(script);
  }
})();

First find a way to run user CSS/JS on the page, if using Chrome I prefer: https://chrome.google.com/webstore/detail/nbhcbdghjpllgmfilhnhkllmkecfmpld

We will need to add CSS and JS, the CSS takes care of blocking the popups and the JavaScript blocks them from pausing the video when they appear.

Add the following CSS:

#consent-bump,
iron-overlay-backdrop,
yt-upsell-dialog-renderer {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

Add the following JavaScript:

try{
    //Get every video element on the page and loop through them
    const videos = document.querySelectorAll("video");
    for(let i = 0; i < videos.length; i++){
        let video = videos[i];
        
        //Store the old pause function (this should be a native function to the <video> element)
        const   old_fn  =   video.pause;
        
        //Override the pause function with a custom one
        video.pause = function(){
            //Gather the JS execution stack
            const err = new Error();
            console.log(err.stack)
            //If the stack contains traces of not being user activated, block the pause request
            if(err.stack.toString().indexOf('$fa') >= 0){
                const is_paused =   video.paused;
                console.log("[Pause] Request blocked")
                //We still pause the video then play to keep the controls correct
                old_fn.call(this, ...arguments)
                if(is_paused == false){
                    video.play();
                }
            } else{
                console.log("[Pause] Request allowed")
                old_fn.call(this, ...arguments)
            }
        }
        
        //If it's already paused the video
        video.play();
    }
} catch(error){
    console.error(error)
}