企业官网建设流程全解析

• 浏览器控制

导读

本文围绕开源项目 RemoveAdblockThing 的官方文档 README.md 展开，系统讲解其核心交付物——用户脚本 Youtube-Ad-blocker-Reminder-Remover.user.js——的安装步骤、配置项含义与源码级实现原理。读完本文，你将掌握如何在 Tampermonkey 中部署该脚本、通过adblocker/removePopup等开关按需启用两种去广告策略，并能对照源码理解"iframe 播放器替换"与"CSS 页面广告屏蔽"的底层工作机制，同时具备独立排查"黑屏/违规弹窗"类常见问题的能力。

一、项目定位：这个用户脚本解决什么问题

YouTube 自 2023 年起加强了对广告拦截器的检测，在检测到拦截行为时，会弹出 "Ad blocker is not allowed on Youtube"（广告拦截器在 YouTube 上不受允许）的强制提示弹窗，甚至直接限制视频播放。RemoveAdblockThing 正是针对这一痛点诞生的开源用户脚本项目，其 README 明确给出了两条技术路线：

1. 移除拦截提示弹窗：脚本主动识别并清理 YouTube 页面上的拦截警告弹窗；
2. 无痕去广告方案（undetected adblocker）：当你的视频播放器因广告拦截被禁用时，脚本会用一种"不易被检测"的方式继续观看视频——这一点在 README.md 的 Introduction 中被明确描述为"We also have an undetected way of skipping ads if you get blocked from the video player"，其实现细节见下文源码拆解。

脚本通过 UserScript 元数据中的@match https://www.youtube.com/*（脚本第 7 行）限定运行范围，仅在 YouTube 域名下生效，当前仓库版本为5.5（第 4 行）。

二、快速安装：从浏览器到脚本的完整流程

README 将安装过程归纳为 4 个步骤，前两步解决"运行载体"与"脚本来源"，后两步解决"启用与冲突规避"。

第 1 步：安装 Tampermonkey 浏览器扩展

Tampermonkey（油猴）是承载用户脚本的浏览器扩展，README 列出了主流浏览器对应的官方分发渠道，按浏览器选择安装即可：

说明：本文按规范不展开输出外部商店链接，具体地址可在 README 的 Installation 一节中直接查看。

第 2 步：安装脚本本体

脚本文件为仓库根目录下的 Youtube-Ad-blocker-Reminder-Remover.user.js。打开该文件的raw（原始文本）版本后，Tampermonkey 会自动识别文件头部的// ==UserScript==元数据块，并弹出脚本安装确认页，点击Install即可完成安装。

脚本头部的元数据声明（第 1-12 行）定义了脚本的身份与行为边界：

// ==UserScript== // @name Remove Adblock Thing // @namespace http://tampermonkey.net/ // @version 5.5 // @description Removes Adblock Thing // @author JoelMatic // @match https://www.youtube.com/* // @icon https://www.google.com/s2/favicons?sz=64&domain=youtube.com // @updateURL https://github.com/TheRealJoelmatic/RemoveAdblockThing/raw/main/Youtube-Ad-blocker-Reminder-Remover.user.js // @downloadURL https://github.com/TheRealJoelmatic/RemoveAdblockThing/raw/main/Youtube-Ad-blocker-Reminder-Remover.user.js // @grant none // ==/UserScript==

其中几个关键字段值得留意：

• @match https://www.youtube.com/*：限定仅在 YouTube 域名及其子路径下运行；
• @updateURL/@downloadURL：指向上游仓库的 raw 发布地址，供 Tampermonkey 周期性自动检测并拉取新版本；
• @grant none：声明脚本无需额外的 GM_* 高级权限即可运行，主要依赖标准 DOM API。

第 3 步：在 Tampermonkey 控制面板启用脚本

打开 Tampermonkey 面板（Dashboard），在脚本列表中找到Remove Adblock Thing，点击其右侧的开关使其处于开启状态。若脚本未显示在列表中，说明第 2 步的安装未成功，可回到 raw 页面重新安装。

第 4 步：关闭或放行其他广告拦截器（关键）

README 特别强调：安装脚本后，需要在你使用的其他广告拦截软件中把 YouTube 加入白名单或直接关闭。原因在于脚本自身已经承担了去广告职责，如果浏览器里同时存在其他广告拦截器（扩展、内置拦截、DNS 过滤等），YouTube 的拦截检测依然会被触发，导致弹窗或黑屏。README 原话为："Don't worry; our script removes ads on YouTube"。

附加收益：README 在安装章节末尾补充说明，该脚本还能在"你的视频播放器因使用广告拦截而被禁用"时，让你继续正常观看视频——这正是第一节提到的"无痕去广告方案"的实战场景。

三、脚本配置详解：读懂 config 区的 5 组开关

脚本的 config 配置区 位于 IIFE 顶部，以常量形式暴露全部可调参数。修改方式为直接编辑脚本源码中的对应行并保存，Tampermonkey 会自动应用新版本。

// Enable The Undetected Adblocker const adblocker = true; // Enable The Popup remover (pointless if you have the Undetected Adblocker) const removePopup = false; // Checks for updates (Removes the popup) const updateCheck = true; // Enable debug messages into the console const debugMessages = true; // Enable custom modal // Uses SweetAlert2 library (https://cdn.jsdelivr.net/npm/sweetalert2@11) for the update version modal. // When set to false, the default window popup will be used. And the library will not be loaded. const updateModal = { enable: true, // if true, replaces default window popup with a custom modal timer: 5000, // timer: number | false };

各配置项的完整含义与默认值汇总如下：

配置区的生效逻辑在 Setup 段 中体现得十分直白：

log("Script started"); if (adblocker) removeAds(); if (removePopup) popupRemover(); if (updateCheck) checkForUpdate();

也就是说，三个功能开关各自对应一个独立函数，互不依赖；日常使用建议保持默认值（adblocker=true、removePopup=false），仅在需要排查问题或切换更新提示样式时才调整debugMessages与updateModal。

四、核心实现原理：从源码拆解三条技术路径

这一节结合脚本完整源码（411 行）逐条剖析其工作机制，方便你理解脚本"为什么这样配置"以及"如何被检测/如何生效"。

4.1removeAds()：无痕广告拦截的 iframe 替换流程

removeAds()（第 117-213 行）是默认开启的主路径，核心思路是：用 YouTube 官方提供的无痕域名嵌入播放器，替换掉会触发广告拦截检测的原生播放器。其完整执行流程如下：

1. 每 500ms 轮询一次，检查window.location.href是否变化（第 121-128 行）。YouTube 是单页应用，切换视频不会刷新页面，因此脚本在检测到 URL 变化时会将isVideoPlayerModified复位，并重新执行clearAllPlayers()与removePageAds()，保证新视频同样被处理；
2. 处理原生 video 元素（第 140-143 行）：将页面上的<video>静音、暂停并移除，避免原生播放器继续加载广告流；
3. 清空现有播放器：调用clearAllPlayers()（见 4.2）；
4. 从 URL 提取 videoID（第 157-175 行）：以https://www.youtube.com/watch?v=为基准截取其后缀，并截断&之后的所有查询参数，得到纯视频 ID；
5. 构造无痕嵌入地址并注入 iframe（第 183-207 行）：

const startOfUrl = "https://www.youtube-nocookie.com/embed/"; const endOfUrl = "?autoplay=1&modestbranding=1"; const finalUrl = startOfUrl + videoID + endOfUrl; const iframe = document.createElement('iframe'); iframe.setAttribute('src', finalUrl); iframe.setAttribute('frameborder', '0'); iframe.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'); iframe.setAttribute('allowfullscreen', true); iframe.setAttribute('mozallowfullscreen', "mozallowfullscreen"); iframe.setAttribute('msallowfullscreen', "msallowfullscreen"); iframe.setAttribute('oallowfullscreen', "oallowfullscreen"); iframe.setAttribute('webkitallowfullscreen', "webkitallowfullscreen"); iframe.style.width = '100%'; iframe.style.height = '100%'; iframe.style.position = 'absolute'; iframe.style.top = '0'; iframe.style.left = '0'; iframe.style.zIndex = '9999'; iframe.style.pointerEvents = 'all'; const videoPlayerElement = document.querySelector('.html5-video-player'); videoPlayerElement.appendChild(iframe);

要点解读：

• youtube-nocookie.com是 YouTube 官方的"无 Cookie"嵌入域名，embed播放器走的是独立于网页主体的 iframe 环境，与主页面上的广告拦截检测逻辑相互隔离——这正是该项目将其命名为"undetected adblocker method"（第 116 行注释）的原因；
• 查询参数：autoplay=1让嵌入播放器自动播放，modestbranding=1隐藏 YouTube 水印品牌标识；
• 全屏兼容：allowfullscreen搭配mozallowfullscreen/msallowfullscreen/webkitallowfullscreen等历史属性，兼容 Firefox、IE、Opera、WebKit 内核；
• 样式覆盖：iframe 绝对定位铺满父容器并置于zIndex: 9999，视觉上与原生播放器无差别；
• 挂载点：iframe 被追加到.html5-video-player（YouTube 的 HTML5 播放器容器）内部，因此页面布局、倍速控制等外部 UI 不受影响。

4.2clearAllPlayers()与removePageAds()：清理与页面广告屏蔽

clearAllPlayers()（第 218-236 行）负责移除所有.html5-video-player容器内已存在的 iframe。若页面中根本找不到该容器，函数返回false，此时removeAds()会提前 return（第 149-151 行），避免在空容器上盲目操作。

removePageAds()（第 239-287 行）处理的是视频播放器之外的页面级广告（推荐流广告、横幅、赞助位等），手段是向<head>注入一段隐藏这些广告节点的全局 CSS：

const style = document.createElement('style'); style.textContent = ` ytd-action-companion-ad-renderer, ytd-display-ad-renderer, ytd-video-masthead-ad-advertiser-info-renderer, ytd-video-masthead-ad-primary-video-renderer, ytd-in-feed-ad-layout-renderer, ytd-ad-slot-renderer, yt-about-this-ad-renderer, yt-mealbar-promo-renderer, ytd-statement-banner-renderer, ytd-ad-slot-renderer, ytd-in-feed-ad-layout-renderer, ytd-banner-promo-renderer-background statement-banner-style-type-compact, .ytd-video-masthead-ad-v3-renderer, div#root.style-scope.ytd-display-ad-renderer.yt-simple-endpoint, div#sparkles-container.style-scope.ytd-promoted-sparkles-web-renderer, div#main-container.style-scope.ytd-promoted-video-renderer, div#player-ads.style-scope.ytd-watch-flexy, ad-slot-renderer, ytm-promoted-sparkles-web-renderer, masthead-ad, tp-yt-iron-overlay-backdrop, #masthead-ad { display: none !important; } `; document.head.appendChild(style);

该选择器清单几乎覆盖了 YouTube 现行的全部广告渲染器（ytd-*/ytm-*系列 Web Components 标签），并以display: none !important强制隐藏。此外，函数还会对div#player-ads与div#panels中 id 为rendering-content的赞助内容逐个子节点做二次清理，同时跳过章节（Chapters）面板（第 278-282 行），避免误删正常的章节功能。

4.3popupRemover()：传统弹窗移除路径

当removePopup被改为true时启用（第 78-115 行），实现方式是对抗式 DOM 清理：

• 每 1000ms 轮询一次页面；
• 移除tp-yt-iron-overlay-backdrop（Material 弹窗遮罩层）的opened属性并整体删除节点；
• 定位ytd-enforcement-message-view-model（拦截警告弹窗主体），先点击#dismiss-button关闭按钮，再删除弹窗节点；
• 强制恢复body的overflow-y: auto，解锁被弹窗锁定的页面滚动；
• 删除弹窗后主动调用video.play()恢复播放，并在 500ms 后再次补一次play()（第 103-105 行）兜底；若轮询发现视频仍处于暂停态，也会再次触发播放（第 110-112 行）。

由于该方案本质是"先被检测、再被动清理"，README 与源码注释均提示：在默认开启无痕方案（adblocker=true）的情况下，removePopup属于冗余路径。

4.4checkForUpdate()与updateModal：自更新机制

脚本默认开启updateCheck，其逻辑位于 第 293-386 行：

1. 防重入保护：若页面处于 iframe 内且非 YouTube 域名，或本次会话已忽略过更新（hasIgnoredUpdate），直接返回；
2. 拉取上游脚本：通过fetch获取项目仓库 raw 地址上的最新脚本文本；
3. 版本比对：用正则/@version\s+(\d+\.\d+)/解析出上游版本号，与本地GM_info.script.version（即当前安装的 5.5）做数值比较；上游不大于本地时仅记录日志；
4. 弹窗提醒：发现新版本后，若updateModal.enable为true，动态加载 jsDelivr CDN 上的 SweetAlert2 v11 库并弹出三按钮弹窗（Update / Skip / Close），timer: 5000提供 5 秒自动倒计时，鼠标悬停可暂停计时（didOpen回调中绑定mouseenter/mouseleave）：
   • 点击Update：window.location.replace(scriptUrl)跳转到上游脚本地址触发 Tampermonkey 安装；
   • 点击Skip：将本次版本号写入localStorage的skipRemoveAdblockThingVersion键，同一版本不再重复打扰；
   • SweetAlert2 加载失败时，自动降级为原生window.confirm；
5. 降级路径：若updateModal.enable为false，直接使用原生window.confirm，同时不再加载 SweetAlert2 库，避免多余网络请求。

4.5log()：可关闭的调试输出

log 函数 统一了全部调试输出：日志统一加前缀🔧 Remove Adblock Thing:，并根据第二个参数映射到console.error/console.log/console.warn/console.info；当debugMessages为false时所有输出被整体禁用。排障时可临时开启该开关，观察控制台中Video replacement started!、Video ID:、Finished、Removed page ads (✔️)等标记，即可判断脚本各阶段是否按预期执行。

五、常见问题排查：弹窗残留与黑屏的 5 大根源

README 的 Common Issues 章节指出，若仍出现"Ad Blockers violate Youtube Terms Of Service"（广告拦截器违反 YouTube 服务条款）提示或纯黑屏，通常意味着页面上还存在脚本之外的其他广告拦截因素。按 README 列出的清单逐项排查：

排查原则是"从浏览器内到浏览器外、从软件到系统"逐层收窄：先停用全部扩展与脚本，若恢复正常，再逐个启用；若仍未恢复，再转向 DNS 与 hosts 等系统层。

六、参与贡献与许可

报告问题

仓库提供了规范的 Bug 报告模板，提交 issue 时需包含：脚本版本号（如 2.9、3.1、5.5）、Bug 描述、预期行为、截图/录屏、桌面环境信息（操作系统、浏览器、浏览器版本）以及附加上下文。按模板填写可显著提高问题定位效率；功能建议则直接通过 issue 或 Pull Request 提交。

开源许可

项目采用 MIT License 授权（Copyright (c) 2023 Joelmatic），允许自由使用、修改、分发，需保留版权与许可声明，且作者不对软件提供任何明示或默示的担保。

七、小结

RemoveAdblockThing 通过一个结构清晰的用户脚本，为 YouTube 广告拦截检测提供了"弹窗清理"与"播放器替换"双保险方案。理解其 config 配置区 的 6 个开关，即可按需组合出最适合自己的运行形态；掌握removeAds()的 iframe 替换流程、removePageAds()的 CSS 屏蔽清单与popupRemover()的 DOM 清理逻辑，则能在 YouTube 前端迭代导致脚本失效时快速定位问题并按上述排查表处理。需要提醒的是，YouTube 的检测机制与页面结构会持续变化，脚本的有效性取决于前端实现的当前形态，使用时应关注上游仓库的版本更新（@updateURL机制会自动提示），并及时同步新版本。

• 浏览器控制