☰

Youtube Collapse Sidebar

collapse youtube sidebar

当前为 2024-03-20 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name            Youtube Collapse Sidebar
  3. // @version         1.3.7
  4. // @description     collapse youtube sidebar
  5. // @namespace       https://greasyfork.org/users/821661
  6. // @match           https://www.youtube.com/*
  7. // @grant           GM_addStyle
  8. // @grant           GM_setValue
  9. // @grant           GM_getValue
  10. // @grant           GM_registerMenuCommand
  11. // @icon            https://cdn-icons-png.flaticon.com/512/7711/7711100.png
  12. // @author          hdyzen
  13. // @license         MIT
  14. // ==/UserScript==
  15. (function () {
  16. 	('use strict');
  17.  
  18. 	let i = '!important';
  19. 	let guideP = 'ytd-app[guide-persistent-and-visible]';
  20. 	let guideM = 'ytd-app[mini-guide-visible]';
  21. 	let useJS = GM_getValue('useJS', false);
  22.  
  23. 	const id = GM_registerMenuCommand(
  24. 		'Using CSS',
  25. 		() => {
  26. 			GM_setValue('useJS', !useJS);
  27. 			location.reload();
  28. 		},
  29. 		{
  30. 			title: 'Use JS',
  31. 		},
  32. 	);
  33. 	if (useJS) {
  34. 		GM_registerMenuCommand(
  35. 			'Using JS',
  36. 			() => {
  37. 				GM_setValue('useJS', !useJS);
  38. 				location.reload();
  39. 			},
  40. 			{
  41. 				title: 'Use CSS',
  42. 				id: id,
  43. 			},
  44. 		);
  45. 		const observer = new MutationObserver((mutations) => {
  46. 			mutations.forEach((mutation) => {
  47. 				if (mutation.type === 'attributes' && mutation.target.hasAttribute('guide-persistent-and-visible')) {
  48. 					console.log(mutation);
  49. 					mutation.target.removeAttribute('guide-persistent-and-visible');
  50. 					mutation.target.setAttribute('mini-guide-visible', '');
  51. 					mutation.target.querySelector('[opened]').removeAttribute('opened');
  52. 					observer.disconnect();
  53. 				}
  54. 			});
  55. 		});
  56.  
  57. 		observer.observe(document.querySelector('ytd-app'), {
  58. 			childList: true,
  59. 			attributes: true,
  60. 		});
  61. 	}
  62.  
  63. 	if (!useJS) {
  64. 		let style = GM_addStyle(`
  65.         @media only screen and (min-width: 1313px) {
  66.             /*== Persist Guide ==*/
  67.             ${guideP} tp-yt-app-drawer {
  68.                 display: none ${i};
  69.             }
  70.             ${guideP} tp-yt-app-header {
  71.                 left: 72px ${i};
  72.             }
  73.             ${guideP} #channel-container {
  74.                 max-height: 218px ${i};
  75.             }
  76.             ${guideP} ytd-page-manager {
  77.                 margin-left: var(--ytd-mini-guide-width) ${i};
  78.             }
  79.             ${guideP} ytd-mini-guide-renderer {
  80.                 display: unset ${i};
  81.             }
  82.             ${guideP} ytd-playlist-header-renderer.ytd-browse {
  83.                 left: var(--ytd-mini-guide-width) ${i};
  84.             }
  85.             /*== Mini Guide ==*/
  86.             ${guideM} tp-yt-app-drawer {
  87.                 display: unset ${i};
  88.                 visibility: visible ${i};
  89.             }
  90.             ${guideM} tp-yt-app-header {
  91.                 left: 240px ${i};
  92.             }
  93.             ${guideM} tp-yt-app-header + #contentContainer  {
  94.                 padding-top: 485px ${i};
  95.             }
  96.             ${guideM} #channel-container {
  97.                 max-height: 230px ${i};
  98.             }
  99.             ${guideM} ytd-page-manager {
  100.                 margin-left: var(--app-drawer-width) ${i};
  101.             }
  102.             ${guideM} ytd-mini-guide-renderer {
  103.                 display: none ${i};
  104.             }
  105.             ${guideM} #scrim.tp-yt-app-drawer {
  106.                 opacity: 1 ${i};
  107.             }
  108.             ${guideM} #contentContainer.tp-yt-app-drawer {
  109.                 transform: translate3d(0, 0, 0) ${i};
  110.             }
  111.             ${guideM} #contentContainer.tp-yt-app-drawer #header.ytd-app {
  112.                 display: none ${i};
  113.             }
  114.             ${guideM} ytd-playlist-header-renderer.ytd-browse {
  115.                 left: var(--app-drawer-width) ${i};
  116.             }
  117.         }
  118.     `);
  119. 	}
  120. })();