YouTube AD Blocker

The script removes all ads, includes all video ads. Simple and efficient YouTube AD Blocker, no bells and whistles. You can try editing the constant cssSeletorArr.

Ajankohdalta 19.2.2023. Katso uusin versio.

// ==UserScript==
// @name         YouTube去广告(YouTube AD Blocker)
// @name:zh-CN   YouTube去广告
// @name:zh-TW   YouTube去廣告
// @name:zh-HK   YouTube去廣告
// @name:zh-MO   YouTube去廣告
// @name:ar      YouTube AD Blocker
// @name:bg      YouTube AD Blocker
// @name:cs      YouTube AD Blocker
// @name:da      YouTube AD Blocker
// @name:de      YouTube AD Blocker
// @name:el      YouTube AD Blocker
// @name:eo      YouTube AD Blocker
// @name:es      YouTube AD Blocker
// @name:fi      YouTube AD Blocker
// @name:fr      YouTube AD Blocker
// @name:fr-CA   YouTube AD Blocker
// @name:he      YouTube AD Blocker
// @name:hu      YouTube AD Blocker
// @name:id      YouTube AD Blocker
// @name:nb      YouTube AD Blocker
// @name:nl      YouTube AD Blocker
// @name:pl      YouTube AD Blocker
// @name:pt-BR   YouTube AD Blocker
// @name:ro      YouTube AD Blocker
// @name:ru      YouTube AD Blocker
// @name:sk      YouTube AD Blocker
// @name:sr      YouTube AD Blocker
// @name:sv      YouTube AD Blocker
// @name:th      YouTube AD Blocker
// @name:tr      YouTube AD Blocker
// @name:uk      YouTube AD Blocker
// @name:ug      YouTube AD Blocker
// @name:vi      YouTube AD Blocker
// @name:it      YouTube AD Blocker
// @name:ja      YouTubeの広告を削除します
// @name:kr      포함한 YouTube 광고 차단
// @name:ko      포함한 YouTube 광고 차단

// @namespace    http://tampermonkey.net/
// @version      1.50

// @description         这个脚本可以移除所有广告,包括所有视频广告.简单高效的YouTube去广告脚本,拒绝花里胡哨.你可以尝试为常量cssSeletorArr定义元素.(The script removes all ads, includes all video ads. Simple and efficient YouTube AD Blocker, no bells and whistles. You can try editing the constant cssSeletorArr. )
// @description:zh-CN   这个脚本可以移除所有广告,包括所有视频广告.简单高效的YouTube去广告脚本,拒绝花里胡哨.你可以尝试为常量cssSeletorArr定义元素.
// @description:zh-TW   這個腳本可以移除所有廣告,包括所有視頻廣告.簡單高效的YouTube去廣告腳本,拒絕花裏胡哨.你可以嘗試為常量cssSeletorArr定義元素.
// @description:zh-HK   這個腳本可以移除所有廣告,包括所有視頻廣告.簡單高效的YouTube去廣告腳本,拒絕花裏胡哨.你可以嘗試為常量cssSeletorArr定義元素.
// @description:zh-MO   這個腳本可以移除所有廣告,包括所有視頻廣告.簡單高效的YouTube去廣告腳本,拒絕花裏胡哨.你可以嘗試為常量cssSeletorArr定義元素.
// @description:ar      The script removes all ads, includes all video ads. Simple and efficient YouTube AD Blocker, no bells and whistles. You can try editing the constant cssSeletorArr.
// @description:bg      The script removes all ads, includes all video ads. Simple and efficient YouTube AD Blocker, no bells and whistles. You can try editing the constant cssSeletorArr.
// @description:cs      The script removes all ads, includes all video ads. Simple and efficient YouTube AD Blocker, no bells and whistles. You can try editing the constant cssSeletorArr.
// @description:da      The script removes all ads, includes all video ads. Simple and efficient YouTube AD Blocker, no bells and whistles. You can try editing the constant cssSeletorArr.
// @description:de      The script removes all ads, includes all video ads. Simple and efficient YouTube AD Blocker, no bells and whistles. You can try editing the constant cssSeletorArr.
// @description:el      The script removes all ads, includes all video ads. Simple and efficient YouTube AD Blocker, no bells and whistles. You can try editing the constant cssSeletorArr.
// @description:eo      The script removes all ads, includes all video ads. Simple and efficient YouTube AD Blocker, no bells and whistles. You can try editing the constant cssSeletorArr.
// @description:es      The script removes all ads, includes all video ads. Simple and efficient YouTube AD Blocker, no bells and whistles. You can try editing the constant cssSeletorArr.
// @description:fi      The script removes all ads, includes all video ads. Simple and efficient YouTube AD Blocker, no bells and whistles. You can try editing the constant cssSeletorArr.
// @description:fr      The script removes all ads, includes all video ads. Simple and efficient YouTube AD Blocker, no bells and whistles. You can try editing the constant cssSeletorArr.
// @description:fr-CA   The script removes all ads, includes all video ads. Simple and efficient YouTube AD Blocker, no bells and whistles. You can try editing the constant cssSeletorArr.
// @description:he      The script removes all ads, includes all video ads. Simple and efficient YouTube AD Blocker, no bells and whistles. You can try editing the constant cssSeletorArr.
// @description:hu      The script removes all ads, includes all video ads. Simple and efficient YouTube AD Blocker, no bells and whistles. You can try editing the constant cssSeletorArr.
// @description:id      The script removes all ads, includes all video ads. Simple and efficient YouTube AD Blocker, no bells and whistles. You can try editing the constant cssSeletorArr.
// @description:nb      The script removes all ads, includes all video ads. Simple and efficient YouTube AD Blocker, no bells and whistles. You can try editing the constant cssSeletorArr.
// @description:nl      The script removes all ads, includes all video ads. Simple and efficient YouTube AD Blocker, no bells and whistles. You can try editing the constant cssSeletorArr.
// @description:pl      The script removes all ads, includes all video ads. Simple and efficient YouTube AD Blocker, no bells and whistles. You can try editing the constant cssSeletorArr.
// @description:pt-BR   The script removes all ads, includes all video ads. Simple and efficient YouTube AD Blocker, no bells and whistles. You can try editing the constant cssSeletorArr.
// @description:ro      The script removes all ads, includes all video ads. Simple and efficient YouTube AD Blocker, no bells and whistles. You can try editing the constant cssSeletorArr.
// @description:ru      The script removes all ads, includes all video ads. Simple and efficient YouTube AD Blocker, no bells and whistles. You can try editing the constant cssSeletorArr.
// @description:sk      The script removes all ads, includes all video ads. Simple and efficient YouTube AD Blocker, no bells and whistles. You can try editing the constant cssSeletorArr.
// @description:sr      The script removes all ads, includes all video ads. Simple and efficient YouTube AD Blocker, no bells and whistles. You can try editing the constant cssSeletorArr.
// @description:sv      The script removes all ads, includes all video ads. Simple and efficient YouTube AD Blocker, no bells and whistles. You can try editing the constant cssSeletorArr.
// @description:th      The script removes all ads, includes all video ads. Simple and efficient YouTube AD Blocker, no bells and whistles. You can try editing the constant cssSeletorArr.
// @description:tr      The script removes all ads, includes all video ads. Simple and efficient YouTube AD Blocker, no bells and whistles. You can try editing the constant cssSeletorArr.
// @description:uk      The script removes all ads, includes all video ads. Simple and efficient YouTube AD Blocker, no bells and whistles. You can try editing the constant cssSeletorArr.
// @description:ug      The script removes all ads, includes all video ads. Simple and efficient YouTube AD Blocker, no bells and whistles. You can try editing the constant cssSeletorArr.
// @description:vi      The script removes all ads, includes all video ads. Simple and efficient YouTube AD Blocker, no bells and whistles. You can try editing the constant cssSeletorArr.
// @description:it      The script removes all ads, includes all video ads. Simple and efficient YouTube AD Blocker, no bells and whistles. You can try editing the constant cssSeletorArr.
// @description:ja      The script removes all ads, includes all video ads. Simple and efficient YouTube AD Blocker, no bells and whistles. You can try editing the constant cssSeletorArr.
// @description:kr      The script removes all ads, includes all video ads. Simple and efficient YouTube AD Blocker, no bells and whistles. You can try editing the constant cssSeletorArr.
// @description:ko      The script removes all ads, includes all video ads. Simple and efficient YouTube AD Blocker, no bells and whistles. You can try editing the constant cssSeletorArr.


// @author       iamfugui
// @match        *://*.youtube.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=YouTube.com
// @grant        none
// @license MIT
// ==/UserScript==
(function() {
    `use strict`;

    //界面广告选择器
    const cssSeletorArr = [
        `#masthead-ad`,//首页顶部横幅广告. Banner AD at the top of the homepage.
        `ytd-rich-item-renderer.style-scope.ytd-rich-grid-row #content:has(.ytd-display-ad-renderer)`,//首页视频排版广告. Video layout AD in the homepage.
        `ytd-rich-section-renderer #dismissible`,//首页中部横幅广告. Banner AD in the middle of the homepage.
        `.video-ads.ytp-ad-module`,//播放器底部广告. AD at the bottom of the player.
        `tp-yt-paper-dialog:has(yt-mealbar-promo-renderer)`,//播放页会员促销广告. Member promotion AD on the play page.
        `#related #player-ads`,//播放页评论区右侧推广广告. Promotion AD on the right side of the play page.
        `#related ytd-ad-slot-renderer`,//播放页评论区右侧视频排版广告. Video layout AD on the right side of the play page.
        `ytd-ad-slot-renderer`,//搜索页广告.  Search AD.
    ];

    const dev = false;//开发用

    let lastTime = parseInt(getUrlParams(`t`))||0;//由于youtube出现广告前是先将进度条归零再进行广告node的更新,故此将上一次进度记录
    let currentTime = parseInt(getUrlParams(`t`))||0;//根据url初始化当前播放时间s
    let videoLink = `${location.href.split(`&`)[0]}`;//当前视频链接
    let video;


    /**
    * 将标准时间格式化
    * @param {Date} time 标准时间
    * @param {String} format 格式
    * @return {String}
    */
    function moment(time, format = `YYYY-MM-DD HH:mm:ss`) {
        // 获取年⽉⽇时分秒
        let y = time.getFullYear()
        let m = (time.getMonth() + 1).toString().padStart(2, `0`)
        let d = time.getDate().toString().padStart(2, `0`)
        let h = time.getHours().toString().padStart(2, `0`)
        let min = time.getMinutes().toString().padStart(2, `0`)
        let s = time.getSeconds().toString().padStart(2, `0`)
        if (format === `YYYY-MM-DD`) {
            return `${y}-${m}-${d}`
        } else {
            return `${y}-${m}-${d} ${h}:${min}:${s}`
        }
    }


    /**
    * 输出信息
    * @param {String} msg 信息
    * @return {undefined}
    */
    function log(msg) {
        if(!dev){
            return false;
        }
        console.log(`${moment(new Date())}  ${msg}`)
    }

    /**
    * 获取当前url的参数,如果要查询特定参数请传参
    * @param {String} 要查询的参数
    * @return {String || Object}
    */
    function getUrlParams(param) {
        // 通过 ? 分割获取后面的参数字符串
        let urlStr = location.href.split(`?`)[1]
        if(!urlStr){
            return ``;
        }
        // 创建空对象存储参数
        let obj = {};
        // 再通过 & 将每一个参数单独分割出来
        let paramsArr = urlStr.split(`&`)
        for(let i = 0,len = paramsArr.length;i < len;i++){
            // 再通过 = 将每一个参数分割为 key:value 的形式
            let arr = paramsArr[i].split(`=`)
            obj[arr[0]] = arr[1];
        }

        if(!param){
            return obj;
        }

        return obj[param]||``;
    }

    /**
    * 得到跳过链接
    * @return {String}
    */
    function getSkipAdUrl(){
        let urlParams = getUrlParams();
        let url = `${videoLink}`;
        for(let key in urlParams){
            if(key !== `v` && key !== `t`){
                url = `${url}&${key}=${urlParams[key]}`
            }
        }
        return `${url}&t=${parseInt(lastTime)}s`;
    }

    /**
    * 生成去除广告的css元素style并附加到HTML节点上
    * @param {String} styles 样式文本
    * @param {String} styleId 元素id
    * @return {undefined}
    */
    function generateRemoveADHTMLElement(styles,styleId) {
        //如果已经设置过,退出.
        if (document.getElementById(styleId)) {
            return false
        }

        //设置移除广告样式.
        let style = document.createElement(`style`);//创建style元素.
        style.id = styleId;
        (document.querySelector(`head`) || document.querySelector(`body`)).appendChild(style);//将节点附加到HTML.
        style.appendChild(document.createTextNode(styles));//附加样式节点到元素节点.
        log(`屏蔽页面广告节点已生成`)
    }

    /**
    * 生成去除广告的css文本
    * @param {Array} cssSeletorArr 待设置css选择器数组
    * @return {String}
    */
    function generateRemoveADCssText(cssSeletorArr){
        cssSeletorArr.forEach((seletor,index)=>{
            cssSeletorArr[index]=`${seletor}{display:none!important}`;//遍历并设置样式.
        });
        return cssSeletorArr.join(` `);//拼接成字符串.
    }


    /**
    * 检测用户切换了视频
    * @return {undefined}
    */
    function switchVideoHook(){
        if(videoLink !== `${location.href.split(`&`)[0]}`){
            videoLink = location.href.split(`&`)[0];//更新链接
            lastTime = parseInt(getUrlParams(`t`))||0;//根据url初始化当前播放时间s
            currentTime = parseInt(getUrlParams(`t`))||0;//根据url初始化当前播放时间s
            log(`检测到用户切换了视频,已更新播放进度`)
        }
    }

    /**
    * 去除播放中的广告
    * @return {undefined}
    */
    function removePlayerAD(){
        let observer;//监听器
        let progress;//进度条node
        let updateTimerId;//信息更新定时器

        //点击进度条监听
        let clickProgressHandler = function(){
            video = document.querySelector(`video`);
            lastTime = video.currentTime;//记录播放进度
            currentTime = video.currentTime;//记录播放进度

            log(`进度条监听`);
            log(lastTime);
        }

        //开始监听
        function startObserve(){
            //广告节点监听
            const targetNode = document.querySelector(`.video-ads.ytp-ad-module`);

            //这个视频未存在广告
            if(!targetNode){
                return false;
            }

            const config = {childList: true, subtree: true };// 监听目标节点本身与子树下节点的变动
            // 当观察到变动时执行的回调函数
            const callback = function (mutationsList, observer) {
                switchVideoHook();//检测用户是否切换了视频

                //拥有跳过按钮的广告.
                let skipButton = document.querySelector(`.ytp-ad-skip-button`);
                if(skipButton)
                {
                    skipButton.click();// 跳过广告.
                    log(`使用按钮跳过了一条广告`);
                    return false;//终止
                }

                //没有跳过按钮的短广告.
                let shortAdMsg = document.querySelector(`.video-ads.ytp-ad-module .ytp-ad-player-overlay`);
                if(shortAdMsg){
                    log(`查看上一次进度${lastTime}`);
                    log(`查看当前进度${currentTime}`);
                    location.href = getSkipAdUrl();//得到跳转的url,重新加载.
                    clearInterval(timerId);//跳转界面,清理计时器
                    observer.disconnect();//跳转界面,停止观察
                    return false;//终止
                }

                log(`刚刚监听到了节点变化但都没有处理:`);
                log(skipButton);
                log(shortAdMsg);

            }
            // 创建一个观察器实例并传入回调函数
            observer = new MutationObserver(callback);
            // 以上述配置开始观察广告节点
            observer.observe(targetNode, config);

            //定时更新信息
            updateTimerId =setInterval(function(){
                switchVideoHook();//检测用户是否切换了视频

                //如果不是播放页就退出,因为youtube跳转页面时并不会reload页面,所以继续执行定时器,
                video = document.querySelector(`video`);
                if(!video){
                    return false;
                }
                videoLink = location.href.split(`&`)[0];//更新链接
                lastTime = currentTime;
                currentTime = video.currentTime;//未检测到广告,记录播放进度

                log(`记录当前进度:`)
                log(currentTime)
            },2000);//太快,进度条归零但广告节点却没有出来会判断错误

            //监听点击进度条,主要是避免定时器对视频进度监听太慢导致进度条在跳转广告后出现偏移的情况
            progress = document.querySelector(`.ytp-progress-bar-container`);
            progress.addEventListener(`click`,clickProgressHandler);

        }

        //结束监听
        function closeObserve(){
            observer.disconnect();
            clearInterval(updateTimerId);
            progress.removeEventListener(`click`,clickProgressHandler);
            observer = null;
            updateTimerId = null;
            progress = null;
        }


        setInterval(function(){
            //视频播放页
            if(getUrlParams(`v`)){
                if(observer && updateTimerId && progress){
                    return false;
                }
                startObserve();
            }else{
                //其它界面
                if(!observer && !updateTimerId && !progress){
                    return false;
                }
                closeObserve();
            }
        },16);

        log(`去除视频广告脚本持续运行中`)
    }


    /**
    * main函数
    */
    function main(){
        generateRemoveADHTMLElement(generateRemoveADCssText(cssSeletorArr),`removeAD`);//移除界面中的广告.
        removePlayerAD();//移除播放中的广告.
    }

    if (document.readyState === 'loading') {
        log(`YouTube去广告脚本即将调用:`);
        document.addEventListener('DOMContentLoaded', main);// 此时加载尚未完成
    } else {
        log(`YouTube去广告脚本快速调用:`);
        main();// 此时`DOMContentLoaded` 已经被触发
    }

})();