☰

YouTube iFrame AdBlocker

Bypass YouTube's ad-blocker detection by dynamically replacing the video player with an iframe.

当前为 2023-10-21 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         YouTube iFrame AdBlocker
  3. // @namespace    Booth-Stash
  4. // @license      MIT
  5. // @version      1.0
  6. // @description  Bypass YouTube's ad-blocker detection by dynamically replacing the video player with an iframe.
  7. // @author       ils94
  8. // @match        https://www.youtube.com/*
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     // Utility functions
  16.     function getAutoplayState() {
  17.         return localStorage.getItem('autoplayNext') === 'true';
  18.     }
  19.  
  20.     function setAutoplayState(state) {
  21.         localStorage.setItem('autoplayNext', state.toString());
  22.     }
  23.  
  24.     function toggleAutoplayState(button) {
  25.         const autoplayNext = !getAutoplayState();
  26.         setAutoplayState(autoplayNext);
  27.         button.title = autoplayNext ? 'Autoplay is on' : 'Autoplay is off';
  28.         button.setAttribute('aria-label', autoplayNext ? 'Autoplay is on' : 'Autoplay is off');
  29.         button.querySelector('.ytp-autonav-toggle-button').setAttribute('aria-checked', autoplayNext.toString());
  30.         return autoplayNext;
  31.     }
  32.  
  33.     function isVideoEnded(iframeDoc) {
  34.         return iframeDoc.querySelector('.html5-endscreen.ytp-show-tiles') !== null;
  35.     }
  36.  
  37.     // Main script
  38.     function replaceElement(oldElement) {
  39.         const urlParams = new URLSearchParams(window.location.search);
  40.         const videoId = urlParams.get('v');
  41.  
  42.         if (!videoId) {
  43.             console.error('Video ID not found in URL');
  44.             return;
  45.         }
  46.  
  47.         console.log(`Video ID: ${videoId}`);
  48.         console.log('Old element found');
  49.  
  50.         // Calculate the size based on the current screen size
  51.         const screenWidth = window.innerWidth;
  52.         const screenHeight = window.innerHeight;
  53.  
  54.         // Set the width and height to 75% of the screen size
  55.         const newWidth = screenWidth * 0.75;
  56.         const newHeight = screenHeight * 0.75;
  57.  
  58.         // Create a container element for the iframe
  59.         const container = document.createElement('div');
  60.         container.style.width = newWidth + 'px';
  61.         container.style.height = newHeight + 'px';
  62.         container.style.margin = "0 auto"; // Center the container
  63.         container.style.position = "relative"; // Position the container relative to the page
  64.  
  65.         // Create the close button
  66.         const closeButton = document.createElement('button');
  67.         closeButton.textContent = 'YouTube Home';
  68.         closeButton.style.position = 'absolute';
  69.         closeButton.style.top = '5px';
  70.         closeButton.style.right = '5px';
  71.         closeButton.style.zIndex = '9999';
  72.         closeButton.addEventListener('click', () => {
  73.             window.location.href = 'https://www.youtube.com'; // Redirect to YouTube.com
  74.         });
  75.  
  76.         // Create the iframe element
  77.         const newElement = document.createElement('iframe');
  78.         newElement.width = '100%';
  79.         newElement.height = '100%';
  80.         newElement.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
  81.         newElement.title = 'YouTube video player';
  82.         newElement.frameBorder = '0';
  83.         newElement.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share';
  84.         newElement.allowFullscreen = true;
  85.  
  86.         // Append the iframe and close button to the container
  87.         container.appendChild(closeButton);
  88.         container.appendChild(newElement);
  89.  
  90.         // Replace the old element with the container
  91.         oldElement.parentNode.replaceChild(container, oldElement);
  92.         console.log('Element replaced successfully');
  93.  
  94.         newElement.onload = () => {
  95.             const iframeDoc = newElement.contentDocument;
  96.  
  97.             const refButton = iframeDoc.querySelector('.ytp-subtitles-button');
  98.             const youtubeButton = iframeDoc.querySelector('.ytp-youtube-button');
  99.  
  100.             if (youtubeButton) {
  101.                 youtubeButton.parentNode.removeChild(youtubeButton);
  102.             } else {
  103.                 console.error('YouTube button not found');
  104.             }
  105.  
  106.             if (refButton) {
  107.                 const autoPlayButton = document.createElement('button');
  108.                 autoPlayButton.className = 'ytp-button';
  109.                 autoPlayButton.setAttribute('data-priority', '2');
  110.                 autoPlayButton.setAttribute('data-tooltip-target-id', 'ytp-autonav-toggle-button');
  111.                 autoPlayButton.title = getAutoplayState() ? 'Autoplay is on' : 'Autoplay is off';
  112.                 autoPlayButton.setAttribute('aria-label', getAutoplayState() ? 'Autoplay is on' : 'Autoplay is off');
  113.                 autoPlayButton.innerHTML = `
  114.                     <div class="ytp-autonav-toggle-button-container">
  115.                         <div class="ytp-autonav-toggle-button" aria-checked="${getAutoplayState().toString()}"></div>
  116.                     </div>
  117.                 `;
  118.  
  119.                 refButton.parentNode.insertBefore(autoPlayButton, refButton.nextSibling);
  120.  
  121.                 autoPlayButton.addEventListener('click', () => {
  122.                     const isAutoplayOn = toggleAutoplayState(autoPlayButton);
  123.                     if (isAutoplayOn && isVideoEnded(iframeDoc)) {
  124.                         playNextVideo();
  125.                     }
  126.                 });
  127.             } else {
  128.                 console.error('Reference button not found');
  129.             }
  130.  
  131.             const endScreenObserver = new MutationObserver((mutations) => {
  132.                 for (const mutation of mutations) {
  133.                     if (mutation.target.classList.contains('ytp-show-tiles') && getAutoplayState()) {
  134.                         playNextVideo();
  135.                         break;
  136.                     }
  137.                 }
  138.             });
  139.  
  140.             endScreenObserver.observe(iframeDoc, { attributes: true, subtree: true, attributeFilter: ['class'] });
  141.         };
  142.     }
  143.  
  144.     function playNextVideo() {
  145.         const rendererElements = document.querySelectorAll('ytd-compact-video-renderer');
  146.         for (let rendererElement of rendererElements) {
  147.             if (!rendererElement.querySelector('ytd-compact-radio-renderer')) {
  148.                 const nextVideoLink = rendererElement.querySelector('a#thumbnail');
  149.                 if (nextVideoLink && nextVideoLink.href) {
  150.                     const autoplayURL = new URL(nextVideoLink.href);
  151.                     autoplayURL.searchParams.set('autoplay', '1');
  152.                     console.log(`Found next video link: ${autoplayURL.href}`);
  153.                     window.location.href = autoplayURL.href;
  154.                     return;
  155.                 }
  156.             }
  157.         }
  158.         console.error('Next video link not found');
  159.     }
  160.  
  161.     const observer = new MutationObserver((mutationsList) => {
  162.         for (let mutation of mutationsList) {
  163.             if (mutation.addedNodes.length) {
  164.                 for (let node of mutation.addedNodes) {
  165.                     if (node.nodeName.toLowerCase() === 'ytd-enforcement-message-view-model') {
  166.                         replaceElement(node);
  167.                     }
  168.                 }
  169.             }
  170.         }
  171.     });
  172.  
  173.     observer.observe(document, { childList: true, subtree: true });
  174.  
  175. })();