☰

YouTube Quick Watch Later

Adds quick Watch Later button

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

  1. // ==UserScript==
  2. // @name         YouTube Quick Watch Later
  3. // @namespace    http://tampermonkey.net/
  4. // @version      2.2
  5. // @description  Adds quick Watch Later button
  6. // @author       kavinned
  7. // @match        https://www.youtube.com/*
  8. // @grant        GM_addStyle
  9. // @icon         https://www.google.com/s2/favicons?sz=64&domain=YouTube.com
  10. // @license      MIT
  11. // ==/UserScript==
  12.  
  13. (function () {
  14. 	"use strict";
  15.  
  16. 	function addWatchLaterButton() {
  17. 		const targetDiv = document.querySelector(
  18. 			"#top-level-buttons-computed > segmented-like-dislike-button-view-model > yt-smartimation > div"
  19. 		);
  20. 		if (!targetDiv || document.querySelector(".quick-watch-later")) return;
  21.  
  22. 		const button = document.createElement("button");
  23. 		button.className = "quick-watch-later";
  24. 		button.textContent = "WL";
  25.  
  26. 		button.addEventListener("click", function () {
  27. 			// First click menu button
  28. 			const menuButton = document.querySelector(
  29. 				"#button-shape > button > yt-touch-feedback-shape > div"
  30. 			);
  31. 			menuButton.click();
  32. 			if (menuButton) {
  33. 				console.log("menu clicked");
  34. 			}
  35. 			// Next click the Save button
  36. 			setTimeout(function () {
  37. 				const saveButtons = document.querySelectorAll(
  38. 					"#items > ytd-menu-service-item-renderer > tp-yt-paper-item > yt-formatted-string"
  39. 				);
  40. 				const saveButton = Array.from(saveButtons).find((button) =>
  41. 					button.textContent.includes("Save")
  42. 				);
  43. 				saveButton.click();
  44. 				// Then click the Watch Later button
  45. 				setTimeout(function () {
  46. 					const watchLaterBox = document.querySelector(
  47. 						"#playlists > ytd-playlist-add-to-option-renderer:first-child #checkbox"
  48. 					);
  49.  
  50. 					if (
  51. 						watchLaterBox &&
  52. 						watchLaterBox.getAttribute("aria-checked") === "true"
  53. 					) {
  54. 						const confirmRemove = window.confirm(
  55. 							"This video is already in your Watch Later playlist. Do you want to remove it?"
  56. 						);
  57.  
  58. 						if (confirmRemove) {
  59. 							watchLaterBox.click();
  60. 							const closeButton = document.querySelector(
  61. 								"#button > yt-icon > span"
  62. 							);
  63. 							if (closeButton) {
  64. 								closeButton.click();
  65. 							}
  66. 						} else {
  67. 							const closeButton = document.querySelector(
  68. 								"#button > yt-icon > span"
  69. 							);
  70. 							if (closeButton) {
  71. 								closeButton.click();
  72. 							}
  73. 						}
  74. 					} else {
  75. 						// If the video isn't in Watch Later, proceed with adding it
  76. 						watchLaterBox.click();
  77. 						const closeButton = document.querySelector(
  78. 							"#button > yt-icon > span"
  79. 						);
  80. 						if (closeButton) {
  81. 							closeButton.click();
  82. 						}
  83. 					}
  84. 				}, 1000);
  85. 			}, 100);
  86. 		});
  87.  
  88. 		targetDiv.appendChild(button);
  89. 	}
  90.  
  91. 	setTimeout(addWatchLaterButton, 2000);
  92.  
  93. 	const observer = new MutationObserver(() => {
  94. 		if (window.location.href.includes("/watch?")) {
  95. 			setTimeout(addWatchLaterButton, 1000);
  96. 		}
  97. 	});
  98.  
  99. 	observer.observe(document.body, { childList: true, subtree: true });
  100.  
  101. 	GM_addStyle(
  102. 		`#top-level-buttons-computed > segmented-like-dislike-button-view-model > yt-smartimation > div {
  103.             display: flex;
  104.             flex-direction: row-reverse;
  105.             gap: 5px;
  106.         }
  107.         #top-level-buttons-computed > segmented-like-dislike-button-view-model > yt-smartimation > div > button {
  108.             border-radius: 24px;
  109.             border: none;
  110.             padding-left: 20px;
  111.             padding-right: 20px;
  112.             color: white;
  113.             font-weight: bold;
  114.             background: #272727;
  115.             cursor: pointer;
  116.  
  117.             &:hover {
  118.                 background: #414141;
  119.             }
  120.         }
  121.         .ryd-tooltip.ryd-tooltip-new-design {
  122.             height: 0px !important;
  123.             width: 0px !important;
  124.         }
  125.     }`
  126. 	);
  127. })();