☰

Youtube short remover

Removes Youtube shorts from search results and watch page. Configuration Menu to the Settings at https://www.youtube.com/account_playback

  1. // ==UserScript==
  2. // @name         Youtube short remover
  3. // @namespace    http://tampermonkey.net/
  4. // @version      full.1.1
  5. // @description  Removes Youtube shorts from search results and watch page. Configuration Menu to the Settings at https://www.youtube.com/account_playback
  6. // @author       Mr_Comand
  7. // @license      MIT
  8. // @match        https://www.youtube.com/*
  9. // @icon         https://www.google.com/s2/favicons?sz=64&domain=youtube.com
  10. // @grant        GM_setValue
  11. // @grant        GM_getValue
  12. // ==/UserScript==
  13.  
  14.  
  15. (function() {
  16. 	'use strict';
  17.  
  18. 	function log(...args) {
  19. 		const message = args.map(arg => String(arg)).join(' ');
  20. 		console.log('%c[ShortsRemover] '+message, 'color: ' + config.c_consoleColor);
  21. 	}
  22.  
  23. 	function updateConfig(key, value) {
  24. 		if (config.hasOwnProperty(key)) {
  25. 			config[key] = value;
  26. 			GM_setValue(key, value); // Update the value in GM storage
  27. 		}
  28. 	}
  29.  
  30.  
  31. 	// Configuration variables with default values
  32. 	var config = {
  33. 		c_removeFormStartPage: GM_getValue('c_removeFormStartPage', true),
  34. 		c_removeFormSubscriptionFeed: GM_getValue('c_removeFormSubscriptionFeed', true),
  35. 		c_removeFormAllFeeds: GM_getValue('c_removeFormAllFeeds', true), // except SubscriptionFeed
  36. 		c_removeFormFollowUp: GM_getValue('c_removeFormFollowUp', true),
  37. 		c_removeFormChannel: GM_getValue('c_removeFormChannel', true),
  38. 		c_removeSidebar: GM_getValue('c_removeSidebar', true),
  39. 		c_disableShortPage: GM_getValue('c_disableShortPage', true),
  40. 		c_removeFormSearch : GM_getValue('c_removeFormSearch', true),
  41. 		c_disableShortPageScrolling: GM_getValue('c_disableShortPageScrolling', true),
  42. 		c_consoleColor: GM_getValue('c_consoleColor', '#33bd52')
  43. 	};
  44. 	log("Configuration:");
  45. 	log("c_removeFormStartPage", config.c_removeFormStartPage);
  46. 	log("c_removeFormSubscriptionFeed", config.c_removeFormSubscriptionFeed);
  47. 	log("c_removeFormAllFeeds", config.c_removeFormAllFeeds);
  48. 	log("c_removeFormFollowUp", config.c_removeFormFollowUp);
  49. 	log("c_removeFormChannel", config.c_removeFormChannel);
  50. 	log("c_removeSidebar", config.c_removeSidebar);
  51. 	log("c_removeFormSearch", config.c_removeFormSearch);
  52. 	log("c_disableShortPage", config.c_disableShortPage);
  53. 	log("c_disableShortPageScrolling", config.c_disableShortPageScrolling);
  54. 	log("c_consoleColor", config.c_consoleColor);
  55. 	log("============================");
  56.  
  57.  
  58. 	// Define the regex pattern for the YouTube start page
  59. 	var youtubeStartPagePattern = /^https?:\/\/(www\.)?youtube\.com\/?$/;
  60.  
  61. 	// Define the regex pattern for the all YouTube feed pages
  62. 	//https://www.youtube.com/feed/*
  63. 	var youtubeFeedPagePattern = /^https?:\/\/(www\.)?youtube\.com\/((feed)|(gaming))(?!\/subscriptions.*).*$/;
  64.  
  65. 	// Define the regex pattern for the YouTube subscriptions feed page
  66. 	//https://www.youtube.com/feed/subscriptions
  67. 	var youtubeSubscriptionsPagePattern = /^https?:\/\/(www\.)?youtube\.com\/feed\/subscriptions\/?$/;
  68.  
  69. 	// Define the regex pattern for the YouTube watch pages
  70. 	//https://www.youtube.com/watch?v=*
  71. 	var youtubeWatchPagePattern = /^https?:\/\/(www\.)?youtube\.com\/watch\/?.*$/;
  72.  
  73.  
  74. 	// Define the regex pattern for the YouTube shorts pages
  75. 	//https://www.youtube.com/shorts/*
  76. 	var youtubeShortPagePattern = /^https?:\/\/(www\.)?youtube\.com\/shorts.*$/;
  77.  
  78.     // Define the regex pattern for the YouTube channel pages
  79.     //https://www.youtube.com/LinusTechTips or https://www.youtube.com/@LinusTechTips ...
  80.     var youtubeChannelPagePattern = /^https?:\/\/(www\.)?youtube\.com\/(?!feed.*)(?!watch.*)(?!short.*)(?!playlist.*)(?!podcasts.*)(?!gaming.*)(?!results.*).+$/;
  81.     // Define the regex pattern for the YouTube channel short pages
  82.     //https://www.youtube.com/LinusTechTips/shorts or https://www.youtube.com/@LinusTechTips/shorts ...
  83.     var youtubeChannelShortsPagePattern = /^(https?:\/\/(?:www\.)?youtube\.com\/(?!feed.*)(?!watch.*)(?!short.*)(?!playlist.*)(?!podcasts.*)(?!gaming.*)(?!results.*).+)\/shorts\/?$/;
  84.     // Define the regex pattern for the YouTube search page
  85.     //https://www.youtube.com/shorts/*
  86.     var youtubeSearchPagePattern = /^https?:\/\/(www\.)?youtube\.com\/results.*$/;
  87.  
  88. 	// Define the regex pattern for the Config pages
  89. 	//https://www.youtube.com/account_playback
  90. 	var configPagePattern = /^https:\/\/www\.youtube\.com\/account_playback$/;
  91.  
  92.  
  93. 	if (config.c_disableShortPageScrolling){
  94. 		// Function to handle the custom scroll event
  95. 		function handleScroll(event) {
  96. 			if (youtubeShortPagePattern.test(window.location.href)) {
  97.  
  98. 				// Your custom scroll handling code goes here
  99. 				log("Scrolling is disabled.");
  100. 				sendToHome();
  101. 				// Prevent the default scroll behavior to disable other scroll listeners
  102. 				event.preventDefault();
  103. 				// Add a scroll listener to the window
  104. 			}
  105. 		}
  106. 		window.addEventListener('scroll', handleScroll);
  107. 		window.addEventListener('wheel', handleScroll);
  108. 	}
  109.  
  110. 	function removeShorts(){
  111.  
  112. 		// Get the current URL
  113. 		var currentURL = window.location.href;
  114. 		
  115. 		// Check if the current URL matches the YouTube short page URL pattern
  116. 		if (youtubeShortPagePattern.test(currentURL) && config.c_disableShortPage) {
  117. 			// URL & config matches
  118. 			sendToHome();
  119. 			log("Shorts page detected.");
  120. 			return;
  121. 		}
  122. 		if (configPagePattern.test(currentURL)) {
  123. 			// URL & config matches
  124. 			if (document.querySelector("div#contents.style-scope.ytd-section-list-renderer>#yt-short-remover-config-menu")){
  125. 				log("Config already exists.");
  126. 				return;
  127. 			}
  128. 			createConfigMenu();
  129. 			log("Config added.");
  130. 			return;
  131. 		}
  132. 		if (config.c_removeSidebar){
  133. 			removeSidebarElement();
  134. 		}
  135. 		// Check if the current URL matches the YouTube start page URL pattern
  136. 		if (youtubeStartPagePattern.test(currentURL) && config.c_removeFormStartPage) {
  137. 			// URL & config matches
  138. 			removeFormVideoOverview();
  139. 			log("Shorts removed from Startpage.");
  140. 			return;
  141. 		}
  142. 		// Check if the current URL matches the YouTube feed page URL pattern
  143. 		if (youtubeFeedPagePattern.test(currentURL) && config.c_removeFormAllFeeds) {
  144. 			// URL & config matches
  145. 			removeReelShelfRenderer();
  146. 			removeFormVideoOverview();
  147. 			log("Shorts removed from Feed.");
  148. 			return;
  149. 		}
  150. 		
  151. 		// Check if the current URL matches the YouTube subscriptions feed page URL pattern
  152. 		if (youtubeSubscriptionsPagePattern.test(currentURL) && config.c_removeFormSubscriptionFeed) {
  153. 			// URL & config matches
  154. 			removeFormVideoOverview();
  155. 			log("Shorts removed from subscriptions.");
  156. 			return;
  157. 		}
  158. 		
  159. 		// Check if the current URL matches the YouTube watch page URL pattern
  160. 		if (youtubeWatchPagePattern.test(currentURL) && config.c_removeFormFollowUp) {
  161. 			// URL & config matches
  162. 			removeReelShelfRenderer();
  163. 			return;
  164. 		}
  165.  
  166.         if (youtubeChannelPagePattern.test(currentURL) && config.c_removeFormChannel) {
  167.             const match = youtubeChannelShortsPagePattern.exec(currentURL);
  168.             if (match) {
  169.                 window.location.href = match[1];
  170.             }
  171.             // URL & config matches
  172.             removeReelShelfRenderer();
  173.             removeFormVideoOverview();
  174.             // Select all elements with tab-title Shorts
  175.             var elementsToRemove = document.querySelectorAll('[tab-title="Shorts"]');
  176.  
  177.             // Loop through each selected element and remove it
  178.             elementsToRemove.forEach(function (element) {
  179.                 element.style.display = "none";
  180.             });
  181.  
  182.             log("Shorts removed from channel.");
  183.             return;
  184.         }
  185.         if (youtubeSearchPagePattern.test(currentURL) && config.c_removeFormSearch) {
  186.             // URL & config matches
  187.             removeReelShelfRenderer();
  188.             removeFormVideoOverview();
  189.             removeByUrl();
  190.             return;
  191.         }
  192.  
  193. 	}
  194.  
  195.  
  196. 	// Remove shorts on videoOverview
  197. 	function removeFormVideoOverview() {
  198. 		// Select all elements with a specific attribute
  199. 		var elementsToRemove = document.querySelectorAll('[is-shorts],[is-reel-item-style-avatar-circle],ytd-reel-item-renderer');
  200.  
  201. 		// Loop through each selected element and remove it
  202. 		elementsToRemove.forEach(function (element) {
  203. 			element.parentNode.removeChild(element);
  204. 		});
  205.  
  206. 	}
  207.  
  208. 	//Remove Sidebar Element Shorts
  209. 	function removeSidebarElement() {
  210. 		// Select all elements with a title Shorts and specific class names
  211. 		var elementsToRemove = document.querySelectorAll('.yt-simple-endpoint.style-scope.ytd-guide-entry-renderer[title="Shorts"]');
  212.  
  213. 		// Loop through each selected element and remove the parent
  214. 		elementsToRemove.forEach(function (element) {
  215. 			element.parentNode.parentNode.removeChild(element.parentNode);
  216. 		});
  217. 	}
  218.  
  219.  
  220. 	//Remove shorts from video recommendations of a video
  221. 	function removeReelShelfRenderer() {
  222. 		// Select all "ytd-reel-shelf-renderer" elements
  223. 		var elementsToRemove = document.querySelectorAll('ytd-reel-shelf-renderer');
  224.  
  225. 		// Loop through each selected element and remove it
  226. 		elementsToRemove.forEach(function (element) {
  227. 			element.parentNode.removeChild(element);
  228. 		});
  229. 	}
  230. 	function removeByUrl() {
  231. 		// Select all "ytd-video-renderer" elements containing a a element wit a herf containing /shorts/
  232. 		var elementsToRemove = document.querySelectorAll('ytd-video-renderer:has([href*="/shorts/"])');
  233. 		// Loop through each selected element and remove it
  234. 		elementsToRemove.forEach(function (element) {
  235. 			element.parentNode.removeChild(element);
  236. 		});
  237. 	}
  238. 	function sendToHome(){
  239. 		window.location.href = "https://www.youtube.com/";
  240. 	}
  241.  
  242.  
  243. 	let progress = null;
  244. 	let timeoutId;
  245. 	function handleMutations(mutationsList, observer) {
  246. 		if (progress==null){
  247. 			progress = document.querySelector('yt-page-navigation-progress>#progress'); 
  248. 			if (progress != null){
  249. 				observer.observe(progress, observer_config);
  250. 				log("Added observer");
  251. 			}
  252. 		}
  253. 		for(let mutation of mutationsList) {
  254. 			if (mutation.target.id=="progress"){
  255. 				clearTimeout(timeoutId);
  256. 				timeoutId = setTimeout(() => {
  257. 					// Run your script here after all changes are done
  258. 					removeShorts();
  259. 					log("All Shorts are removed, detected by progress bar.");
  260. 				}, 500);
  261. 				break;
  262. 			}
  263. 			if (mutation.target.tagName=="YTD-VIDEO-RENDERER"){
  264. 				clearTimeout(timeoutId);
  265. 				timeoutId = setTimeout(() => {
  266. 				     // Run your script here after all changes are done
  267. 					removeShorts();
  268. 					log("All Shorts are removed, detected by video renderer.");
  269. 				}, 500);
  270. 				break;
  271. 			}
  272. 			if(mutation.target.parentElement ==null ){}else
  273. 			if (mutation.target.parentElement.id === "page-manager" || (mutation.target.parentElement.id=="primary")) {
  274. 				// console.log('Changes detected', mutationsList);
  275. 				//console.log('Changes detected in ytd-page-manager');
  276. 				// Your code to execute when ytd-page-manager changes goes here
  277. 				clearTimeout(timeoutId);
  278. 				timeoutId = setTimeout(() => {
  279. 					// Run your script here after all changes are done
  280. 					removeShorts();
  281. 					log("All Shorts are removed, detected by page-manager.");
  282. 				}, 500); // Adjust the timeout duration as needed
  283. 				//end loop if one change is a direct child of #page-manager
  284. 				break;
  285. 			}
  286. 		}
  287. 	}
  288. 	
  289.  
  290. 	// Create a MutationObserver instance
  291. 	const observer = new MutationObserver(handleMutations);
  292.  
  293. 	// Select the target node
  294. 	const targetNode = document.querySelector('#page-manager'); 
  295. 	// yt-page-navigation-progress#progress
  296. 	// Options for the observer (which mutations to observe)
  297. 	const observer_config = { childList: true, attributes: true, subtree: true,};
  298. 	// Start observing the target node for configured mutations
  299. 	observer.observe(targetNode, observer_config);
  300. 	
  301. 	removeShorts();
  302. 	if (config.c_removeSidebar){
  303. 		removeSidebarElement();
  304. 	}
  305.  
  306. 	function createConfigMenu() {
  307. 		// Create menu container
  308. 		var menuContainer = document.createElement('div');
  309. 		menuContainer.id = 'yt-short-remover-config-menu';
  310. 		menuContainer.style.color = 'var(--yt-spec-text-secondary)';
  311. 		menuContainer.style.font_size = '1.4rem';
  312. 		menuContainer.style.lineHeight = '2rem';
  313. 		menuContainer.style.fontWeight = '400';
  314. 		menuContainer.style.padding = '10px';
  315. 		menuContainer.style.width = '50%';
  316.  
  317. 		var hr = document.createElement('hr');
  318. 		var headline = document.createElement('h1');
  319. 		headline.style.lineHeight="6rem";
  320. 		headline.style.color="var(--yt-spec-text-primary)";
  321. 		headline.innerText="Shorts(Tampermonkey script)";
  322. 		menuContainer.appendChild(hr);
  323. 		menuContainer.appendChild(headline);
  324.  
  325. 		// Create menu items
  326. 		var menuItems = [
  327. 			{ label: 'Remove Shorts from Start Page', key: 'c_removeFormStartPage', type:"checkbox"},
  328. 			{ label: 'Remove Shorts from Subscription Feed', key: 'c_removeFormSubscriptionFeed', type:"checkbox" },
  329. 			{ label: 'Remove Shorts from All Feeds (except Subscription Feed)', key: 'c_removeFormAllFeeds', type:"checkbox" },
  330. 			{ label: 'Remove Shorts from Follow Up Page', key: 'c_removeFormFollowUp', type:"checkbox" },
  331. 			{ label: 'Remove Shorts from Channel Page', key: 'c_removeFormChannel', type:"checkbox" },
  332. 			{ label: 'Remove Shorts from Search Page', key: 'c_removeFormSearch', type:"checkbox" },
  333. 			{ label: 'Remove Sidebar Shorts', key: 'c_removeSidebar', type:"checkbox" },
  334. 			{ label: 'Disable Short Page', key: 'c_disableShortPage', type:"checkbox" },
  335. 			{ label: 'Disable Short Page Scrolling', key: 'c_disableShortPageScrolling', type:"checkbox" },
  336. 			{ label: 'Console log Color:', key: 'c_consoleColor', type:"color", default:"#33bd52" }
  337. 		];
  338.  
  339. 		// Add menu items to menu container
  340. 		menuItems.forEach(item => {
  341. 			var input = document.createElement('input');
  342. 			input.type = item.type
  343. 			if (input.type == "checkbox"){
  344. 				input.checked = GM_getValue(item.key, item.default ? item.default : true);
  345. 			}else{
  346. 				input.value = GM_getValue(item.key, item.default ? item.default : "undefine");
  347. 			}
  348. 			input.addEventListener('change', function() {
  349. 				if (this.type == "checkbox"){
  350. 					updateConfig(item.key, this.checked);
  351. 					log(item.key, "changed to", this.checked)
  352. 				}else{
  353. 					updateConfig(item.key, this.value);
  354. 					log(item.key, "changed to", this.value)
  355. 				}
  356. 			});
  357.  
  358. 			var label = document.createElement('label');
  359. 			label.textContent = item.label;
  360.  
  361. 			var menuItem = document.createElement('div');
  362. 			menuItem.style.display="flex";
  363. 			menuItem.style.justifyContent="space-between";
  364. 			menuItem.style.alignItems="center"
  365.  
  366. 			menuItem.appendChild(label);
  367. 			menuItem.appendChild(input);
  368. 			menuContainer.appendChild(menuItem);
  369. 		});
  370. 		config.c_consoleColor
  371. 		// Append menu container to config element
  372. 		document.querySelector("div#contents.style-scope.ytd-section-list-renderer").appendChild(menuContainer);
  373. 	}
  374.  
  375. })();