YouTube去广告

这是一个去除YouTube广告的脚本,轻量且高效,它能丝滑的去除界面广告和视频广告。

当前为 2023-04-30 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name YouTube去广告 YouTube AD Blocker
  3. // @name:zh-CN YouTube去广告
  4. // @name:zh-TW YouTube去廣告
  5. // @name:zh-HK YouTube去廣告
  6. // @name:zh-MO YouTube去廣告
  7.  
  8. // @namespace http://tampermonkey.net/
  9. // @version 3.6
  10.  
  11. // @description 这是一个去除YouTube广告的脚本,轻量且高效,它能丝滑的去除界面广告和视频广告。This is a script that removes ads on YouTube, it's lightweight and efficient, capable of smoothly removing interface and video ads.
  12. // @description:zh-CN 这是一个去除YouTube广告的脚本,轻量且高效,它能丝滑的去除界面广告和视频广告。
  13. // @description:zh-TW 這是一個去除YouTube廣告的腳本,輕量且高效,它能絲滑地去除界面廣告和視頻廣告。
  14. // @description:zh-HK 這是一個去除YouTube廣告的腳本,輕量且高效,它能絲滑地去除界面廣告和視頻廣告。
  15. // @description:zh-MO 這是一個去除YouTube廣告的腳本,輕量且高效,它能絲滑地去除界面廣告和視頻廣告。
  16.  
  17. // @author iamfugui
  18. // @match *://*.youtube.com/*
  19. // @icon https://www.google.com/s2/favicons?sz=64&domain=YouTube.com
  20. // @grant none
  21. // @license MIT
  22. // ==/UserScript==
  23. (function() {
  24. `use strict`;
  25.  
  26. const dev = false;//开发使用
  27.  
  28. //界面广告选择器
  29. const cssSeletorArr = [
  30. `#masthead-ad`,//首页顶部横幅广告.
  31. `ytd-rich-item-renderer.style-scope.ytd-rich-grid-row #content:has(.ytd-display-ad-renderer)`,//首页视频排版广告.
  32. `ytd-rich-section-renderer #dismissible`,//首页中部横幅广告.
  33. `.video-ads.ytp-ad-module`,//播放器底部广告.
  34. `tp-yt-paper-dialog:has(yt-mealbar-promo-renderer)`,//播放页会员促销广告.
  35. `#related #player-ads`,//播放页评论区右侧推广广告.
  36. `#related ytd-ad-slot-renderer`,//播放页评论区右侧视频排版广告.
  37. `ytd-ad-slot-renderer`,//搜索页广告.
  38. `yt-mealbar-promo-renderer`,//播放页会员推荐广告.
  39. ];
  40.  
  41. let lastTime = parseInt(getUrlParams(`t`))||0;//由于youtube出现广告前是先将进度条归零再进行广告node的更新,故此将上一次进度记录
  42. let currentTime = parseInt(getUrlParams(`t`))||0;//根据url初始化当前播放时间s
  43. let videoLink = `${location.href.split(`&`)[0]}`;//当前视频链接
  44. let video;
  45.  
  46. /**
  47. * 将标准时间格式化
  48. * @param {Date} time 标准时间
  49. * @param {String} format 格式
  50. * @return {String}
  51. */
  52. function moment(time, format = `YYYY-MM-DD HH:mm:ss`) {
  53. // 获取年⽉⽇时分秒
  54. let y = time.getFullYear()
  55. let m = (time.getMonth() + 1).toString().padStart(2, `0`)
  56. let d = time.getDate().toString().padStart(2, `0`)
  57. let h = time.getHours().toString().padStart(2, `0`)
  58. let min = time.getMinutes().toString().padStart(2, `0`)
  59. let s = time.getSeconds().toString().padStart(2, `0`)
  60. if (format === `YYYY-MM-DD`) {
  61. return `${y}-${m}-${d}`
  62. } else {
  63. return `${y}-${m}-${d} ${h}:${min}:${s}`
  64. }
  65. }
  66.  
  67.  
  68. /**
  69. * 输出信息
  70. * @param {String} msg 信息
  71. * @return {undefined}
  72. */
  73. function log(msg) {
  74. if(!dev){
  75. return false;
  76. }
  77. console.log(`${moment(new Date())} ${msg}`)
  78. }
  79.  
  80. /**
  81. * 获取当前url的参数,如果要查询特定参数请传参
  82. * @param {String} 要查询的参数
  83. * @return {String || Object}
  84. */
  85. function getUrlParams(param) {
  86. // 通过 ? 分割获取后面的参数字符串
  87. let urlStr = location.href.split(`?`)[1]
  88. if(!urlStr){
  89. return ``;
  90. }
  91. // 创建空对象存储参数
  92. let obj = {};
  93. // 再通过 & 将每一个参数单独分割出来
  94. let paramsArr = urlStr.split(`&`)
  95. for(let i = 0,len = paramsArr.length;i < len;i++){
  96. // 再通过 = 将每一个参数分割为 key:value 的形式
  97. let arr = paramsArr[i].split(`=`)
  98. obj[arr[0]] = arr[1];
  99. }
  100.  
  101. if(!param){
  102. return obj;
  103. }
  104.  
  105. return obj[param]||``;
  106. }
  107.  
  108. /**
  109. * 得到跳过链接
  110. * @return {String}
  111. */
  112. function getSkipAdUrl(){
  113. let urlParams = getUrlParams();
  114. let url = `${videoLink}`;
  115. for(let key in urlParams){
  116. if(key !== `v` && key !== `t`){
  117. url = `${url}&${key}=${urlParams[key]}`
  118. }
  119. }
  120. return `${url}&t=${parseInt(lastTime)}s`;
  121. }
  122.  
  123. /**
  124. * 生成去除广告的css元素style并附加到HTML节点上
  125. * @param {String} styles 样式文本
  126. * @param {String} styleId 元素id
  127. * @return {undefined}
  128. */
  129. function generateRemoveADHTMLElement(styles,styleId) {
  130. //如果已经设置过,退出.
  131. if (document.getElementById(styleId)) {
  132. return false
  133. }
  134.  
  135. //设置移除广告样式.
  136. let style = document.createElement(`style`);//创建style元素.
  137. style.id = styleId;
  138. (document.querySelector(`head`) || document.querySelector(`body`)).appendChild(style);//将节点附加到HTML.
  139. style.appendChild(document.createTextNode(styles));//附加样式节点到元素节点.
  140. log(`屏蔽页面广告节点已生成`)
  141.  
  142. }
  143.  
  144. /**
  145. * 生成去除广告的css文本
  146. * @param {Array} cssSeletorArr 待设置css选择器数组
  147. * @return {String}
  148. */
  149. function generateRemoveADCssText(cssSeletorArr){
  150. cssSeletorArr.forEach((seletor,index)=>{
  151. cssSeletorArr[index]=`${seletor}{display:none!important}`;//遍历并设置样式.
  152. });
  153. return cssSeletorArr.join(` `);//拼接成字符串.
  154. }
  155.  
  156.  
  157. /**
  158. * 检测用户切换了视频
  159. * @return {undefined}
  160. */
  161. function switchVideoHook(){
  162. if(videoLink !== `${location.href.split(`&`)[0]}`){
  163. videoLink = location.href.split(`&`)[0];//更新链接
  164. lastTime = parseInt(getUrlParams(`t`))||0;//根据url初始化当前播放时间s
  165. currentTime = parseInt(getUrlParams(`t`))||0;//根据url初始化当前播放时间s
  166. log(`检测到用户切换了视频,已更新播放进度`)
  167. }
  168. }
  169.  
  170. /**
  171. * 去除播放中的广告
  172. * @return {undefined}
  173. */
  174. function removePlayerAD(){
  175. let observer;//监听器
  176. let progress;//进度条node
  177. let updateTimerId;//信息更新定时器
  178.  
  179. //该函数主要是避免定时器对视频进度监听太慢导致进度条在跳转广告后出现偏移的情况
  180. let clickProgressHandler = function(){
  181. lastTime = video.currentTime;//记录播放进度
  182. currentTime = video.currentTime;//记录播放进度
  183. log(`监听到点击了进度条`);
  184. log(lastTime);
  185. }
  186.  
  187. //开始监听
  188. function startObserve(){
  189. video = document.querySelector(`video`);//获取视频节点
  190.  
  191. //广告节点监听
  192. const targetNode = document.querySelector(`.video-ads.ytp-ad-module`);
  193. //这个视频不存在广告
  194. if(!targetNode){
  195. return false;
  196. }
  197.  
  198. //定时更新视频信息
  199. function updateCall(){
  200. switchVideoHook();//检测用户是否切换了视频
  201.  
  202. if(!video){
  203. return false;
  204. }
  205.  
  206. videoLink = location.href.split(`&`)[0];//更新链接
  207.  
  208. lastTime = currentTime>2?currentTime:lastTime;//广告标签节点出现时间会与广告出现时间存在偏差 当进度条时间小于2时,判定为广告记录条,不记录
  209. currentTime = video.currentTime;//未检测到广告,记录播放进度
  210. log(`查看上一次进度${lastTime}`);
  211. log(`查看当前进度${currentTime}`);
  212. }
  213. updateTimerId =setInterval(updateCall,1000);
  214.  
  215. // 监听视频中的广告并处理
  216. const config = {childList: true, subtree: true };// 监听目标节点本身与子树下节点的变动
  217. // 当观察到变动时执行的回调函数
  218. const callback = function (mutationsList, observer) {
  219. switchVideoHook();//检测用户是否切换了视频
  220.  
  221. //拥有跳过按钮的广告.
  222. let skipButton = document.querySelector(`.ytp-ad-skip-button`);
  223. if(skipButton)
  224. {
  225. skipButton.click();// 跳过广告.
  226. log(`刚刚监听到了广告节点变化并使用按钮跳过了一条广告`);
  227. return false;//终止
  228. }
  229.  
  230. //没有跳过按钮的短广告.
  231. let shortAdMsg = document.querySelector(`.video-ads.ytp-ad-module .ytp-ad-player-overlay`);
  232. if(shortAdMsg){
  233. log(`查看上一次进度${lastTime}`);
  234. log(`查看当前进度${currentTime}`);
  235. video.pause();//暂停播放避免继续请求资源
  236. log(`刚刚监听到了广告节点变化并即将跳过了一条广告`);
  237. location.replace(getSkipAdUrl());//得到跳转的url,重新加载.
  238. closeObserve();
  239. return false;//终止
  240. }
  241.  
  242. log(`刚刚监听到了广告节点变化但都没有处理:`);
  243.  
  244. }
  245. observer = new MutationObserver(callback);// 创建一个观察器实例并传入回调函数
  246. observer.observe(targetNode, config);// 以上述配置开始观察广告节点
  247.  
  248. //监听点击进度条并处理
  249. progress = document.querySelector(`.ytp-progress-bar-container`);
  250. progress.addEventListener(`click`,clickProgressHandler);
  251. }
  252.  
  253. //结束监听
  254. function closeObserve(){
  255. observer.disconnect();
  256. clearInterval(updateTimerId);
  257. progress.removeEventListener(`click`,clickProgressHandler);
  258. updateTimerId = null;
  259. observer = null;
  260. progress = null;
  261. }
  262.  
  263. //轮询任务
  264. setInterval(function(){
  265. //视频播放页
  266. if(getUrlParams(`v`)){
  267. if(observer && updateTimerId && progress){
  268. return false;
  269. }
  270. startObserve();
  271. }else{
  272. //其它界面
  273. if(!observer && !updateTimerId && !progress){
  274. return false;
  275. }
  276. closeObserve();
  277. }
  278. },16.6);
  279.  
  280. log(`去除视频广告脚本持续运行中`)
  281. }
  282.  
  283. /**
  284. * main函数
  285. */
  286. function main(){
  287. generateRemoveADHTMLElement(generateRemoveADCssText(cssSeletorArr),`removeAD`);//移除界面中的广告.
  288. removePlayerAD();//移除播放中的广告.
  289. }
  290.  
  291. if (document.readyState === `loading`) {
  292. log(`YouTube去广告脚本即将调用:`);
  293. document.addEventListener(`DOMContentLoaded`, main);// 此时加载尚未完成
  294. } else {
  295. log(`YouTube去广告脚本快速调用:`);
  296. main();// 此时`DOMContentLoaded` 已经被触发
  297. }
  298.  
  299. })();