☰

Restore App Bar

Restores the appbar used in the classic Hitchhiker YouTube layout

目前为 2023-12-13 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name         Restore App Bar
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.1
  5. // @description  Restores the appbar used in the classic Hitchhiker YouTube layout
  6. // @author       BowDown097 and whoever made it originally
  7. // @match        https://www.youtube.com/*
  8. // @icon         https://www.google.com/s2/favicons?domain=youtube.com
  9. // @grant        GM_addStyle
  10. // ==/UserScript==
  11.  
  12. if (typeof GM_addStyle !== "function") {
  13.     function GM_addStyle(css) {
  14.         let style = document.createElement('style');
  15.         style.type = 'text/css';
  16.         style.appendChild(document.createTextNode(css));
  17.         const head = document.getElementsByTagName('head')[0];
  18.         if (head) head.appendChild(style);
  19.         else document.documentElement.appendChild(style);
  20.     }
  21. }
  22.  
  23. function waitForElement(selector) {
  24.     return new Promise(resolve => {
  25.         if (document.querySelector(selector)) {
  26.             return resolve(document.querySelector(selector));
  27.         }
  28.         const observer = new MutationObserver(mutations => {
  29.             if (document.querySelector(selector)) {
  30.                 resolve(document.querySelector(selector));
  31.                 observer.disconnect();
  32.             }
  33.         });
  34.         observer.observe(document, {
  35.             childList: true,
  36.             subtree: true
  37.         });
  38.     });
  39. }
  40.  
  41. function navigate(url, browseId) {
  42.     document.querySelector("ytd-app").insertAdjacentHTML("beforeend", '<ytd-guide-entry-renderer class="ytd-guide-entry-renderer navigateTemp"></ytd-guide-entry-renderer>');
  43.     document.querySelector(".navigateTemp").data = {};
  44.     document.querySelector(".navigateTemp").data.navigationEndpoint = {
  45.         "clickTrackingParams": "CJEBELUsGAIiEwi3y-qlp9bxAhVchuUHHSLSCts=",
  46.         "commandMetadata": {
  47.             "webCommandMetadata": {
  48.                 "url": url,
  49.                 "webPageType": "WEB_PAGE_TYPE_BROWSE",
  50.                 "rootVe": 6827,
  51.                 "apiUrl": "/youtubei/v1/browse"
  52.             }
  53.         },
  54.         "browseEndpoint": {
  55.             "browseId": browseId
  56.         }
  57.     };
  58.     document.querySelector(".navigateTemp").click();
  59.     document.querySelector(".navigateTemp").remove();
  60. }
  61.  
  62. function navBar() {
  63.     const hasMyChannel = document.querySelector("#items > ytd-guide-entry-renderer:nth-child(2) .guide-icon").getComputedStyleValue("content") == "url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAOFJREFUeJztlL0Ng0AMhWlSZ5QMkU0o6KjpIlLAHSNkgkyQLbICA6RPT/hEAk8WxwWJKoolS5Z/3vnZhiT5y0cuvtiXZXny3t/run6i2PiIrQKrqvPROdf22gW0JWcN2FhMV3mRH1BsjUVBoaKd9TQ7pYeNTztdpM98tAPmZnPwaQ41QUBLaaDl0mkcLrVxaoKA9nUtmnssxCIG2DZNc0PnNr8IqF0AwGZtDr43eJyyLOWRZdkulEeMnOhS9Gx0GVZkOctnMyRPh93P5wpFOkKx8X192AZ0m09P6W/2c/hteQFIL1T2NRIk0wAAAABJRU5ErkJggg==\")";
  64.     let headers = [{
  65.         text: document.querySelector("ytd-guide-entry-renderer:first-child yt-formatted-string").innerHTML
  66.     }, {
  67.         text: hasMyChannel ? document.querySelector("ytd-guide-entry-renderer:nth-child(3) yt-formatted-string").innerHTML : document.querySelector("ytd-guide-entry-renderer:nth-child(2) yt-formatted-string").innerHTML
  68.     }, {
  69.         text: hasMyChannel ? document.querySelector("ytd-guide-entry-renderer:nth-child(5) yt-formatted-string").innerHTML : document.querySelector("ytd-guide-entry-renderer:nth-child(4) yt-formatted-string").innerHTML
  70.     }];
  71.     
  72.     let appbar = document.createElement("div");
  73.     let appbarNav = document.createElement("ul");
  74.     
  75.     for (const header of headers)
  76.     {
  77.         let item = document.createElement("li");
  78.         let text = document.createElement("span");
  79.         text.href = header.href;
  80.         text.innerHTML = header.text;
  81.         item.appendChild(text);
  82.         appbarNav.appendChild(item);
  83.     }
  84.     
  85.     let home = document.querySelector(`ytd-browse[role="main"][page-subtype="home"]`);
  86.     let trending = document.querySelector(`ytd-browse[role="main"][page-subtype="trending"]`);
  87.     let subscriptions = document.querySelector(`ytd-browse[role="main"][page-subtype="subscriptions"]`);
  88.     
  89.     home?.appendChild(appbar).appendChild(appbarNav);
  90.     trending?.appendChild(appbar).appendChild(appbarNav);
  91.     subscriptions?.appendChild(appbar).appendChild(appbarNav);
  92.     
  93.     appbar.className = "ytcp-main-appbar";
  94.     appbarNav.className = "ytcp-appbar-nav";
  95.     appbarNav.childNodes[0].className = "ytcp-nav-home ytcp-nav-item";
  96.     appbarNav.childNodes[1].className = "ytcp-nav-trending ytcp-nav-item";
  97.     appbarNav.childNodes[2].className = "ytcp-nav-subs ytcp-nav-item";
  98.     
  99.     appbarNav.childNodes[0].addEventListener("click", () => navigate("/", "FEwhat_to_watch"));
  100.     appbarNav.childNodes[1].addEventListener("click", () => navigate("/feed/trending", "FEexplore"));
  101.     appbarNav.childNodes[2].addEventListener("click", () => navigate("/feed/subscriptions", "FEsubscriptions"));
  102. }
  103.  
  104. function setupNavbar() {
  105.     if (!["/", "/feed/trending", "/feed/subscriptions"].includes(window.location.pathname)) return;
  106.     waitForElement("ytd-guide-entry-renderer").then(() => navBar());
  107.     document.querySelector("[hidden] .ytcp-main-appbar")?.remove();
  108. }
  109.  
  110. (function() {
  111.     'use strict';
  112.     window.addEventListener("yt-page-data-updated", setupNavbar, false);
  113.     GM_addStyle(`
  114. .ytcp-main-appbar {
  115.     margin: -12px;
  116. 	width: 100%;
  117. 	text-align: center;
  118. 	line-height: 40px;
  119. 	height: 40px;
  120. 	border-bottom: 1px solid #e8e8e8;
  121. 	border-left: 1px solid #e8e8e8;
  122. 	background-color: #fff;
  123. 	position: fixed;
  124. 	z-index: 2001;
  125. 	font-size: 13px;
  126. 	font-family: Roboto, arial, sans-serif;
  127. }
  128.  
  129. html:not([dark]) .ytcp-nav-item {
  130. 	display: inline-block;
  131. 	margin-left: 30px;
  132. }
  133.  
  134. html:not([dark]) .ytcp-nav-item span {
  135. 	display: inline-block;
  136. 	color: #666;
  137. 	text-decoration: none;
  138. 	cursor: pointer;
  139. }
  140.  
  141. html:not([dark]) .ytcp-nav-item span:hover {
  142. 	box-shadow: inset 0 -3px #cc181e;
  143. }
  144.  
  145. html:not([dark]) [page-subtype="home"] .ytcp-nav-home span,
  146. html:not([dark]) [page-subtype="subscriptions"] .ytcp-nav-subs span,
  147. html:not([dark]) [page-subtype="trending"] .ytcp-nav-trending span {
  148. 	box-shadow: inset 0 -3px #cc181e;
  149. 	color: #333;
  150. }
  151.  
  152. html:not([dark]) .ytcp-appbar-nav {
  153. 	display: inline-block;
  154. 	vertical-align: top;
  155. 	overflow: hidden;
  156. }
  157.  
  158. html[dark] .ytcp-main-appbar {
  159. 	width: 100%;
  160. 	text-align: center;
  161. 	line-height: 40px;
  162. 	height: 40px;
  163. 	background-color: var(--yt-spec-brand-background-primary);
  164.     border-bottom: 1px solid var(--yt-spec-10-percent-layer);
  165.     border-left: 1px solid var(--yt-spec-10-percent-layer);
  166. 	position: fixed;
  167. 	z-index: 2001;
  168. 	font-size: 13px;
  169. 	font-family: Roboto, arial, sans-serif;
  170. 	box-shadow: inset 0 1px #0f0f0f;
  171. }
  172.  
  173. html[dark] .ytcp-nav-item {
  174. 	display: inline-block;
  175. 	margin-left: 30px;
  176. }
  177.  
  178. html[dark] .ytcp-nav-item span {
  179. 	display: inline-block;
  180. 	color: #8f8f8f;
  181. 	text-decoration: none;
  182. 	cursor: pointer;
  183. }
  184.  
  185. html[dark] .ytcp-nav-item span:hover {
  186. 	box-shadow: inset 0 -3px #dcdcdc;
  187. }
  188.  
  189. html[dark] [page-subtype="home"] .ytcp-nav-home span,
  190. html[dark] [page-subtype="subscriptions"] .ytcp-nav-subs span,
  191. html[dark] [page-subtype="trending"] .ytcp-nav-trending span {
  192. 	box-shadow: inset 0 -3px #dcdcdc;
  193. 	color: #c1c1c1;
  194. }
  195.  
  196. html[dark] .ytcp-appbar-nav {
  197. 	display: inline-block;
  198. 	vertical-align: top;
  199. 	overflow: hidden;
  200. }
  201.  
  202. .ytcp-load-more-button {
  203. 	margin: 20px auto;
  204. 	display: block;
  205. 	height: 28px;
  206. 	border-radius: 2px;
  207. 	cursor: pointer;
  208. 	font: 11px Roboto, arial, sans-serif;
  209. 	padding: 0 10px;
  210. 	font-weight: 500;
  211. 	outline: 0;
  212. }
  213.  
  214. .ytcp-load-more-button.ytcp-related {
  215. 	margin: 0 auto !important;
  216. }
  217.  
  218. html:not([dark]) .ytcp-load-more-button {
  219. 	border: 1px solid #d3d3d3;
  220. 	box-shadow: 0 1px 0 rgba(0, 0, 0, .05);
  221. 	background-color: #f8f8f8;
  222. 	color: #333;
  223. }
  224.  
  225. html:not([dark]) .ytcp-load-more-button:hover {
  226. 	border-color: #c6c6c6;
  227. 	background-color: #f0f0f0;
  228. 	box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
  229. }
  230.  
  231. html:not([dark]) .ytcp-load-more-button:active {
  232. 	border-color: #c6c6c6;
  233. 	background-color: #e9e9e9;
  234. 	box-shadow: inset 0 1px 0 #ddd;
  235. }
  236.  
  237. html[dark] .ytcp-load-more-button {
  238. 	border: 0;
  239. 	background-color: #2e2e2e;
  240. 	color: #c1c1c1;
  241. }
  242.  
  243. html[dark] .ytcp-load-more-button:hover {
  244. 	background-color: #353535;
  245. }
  246.  
  247. html[dark] .ytcp-load-more-button:active {
  248. 	background-color: #292929;
  249. }
  250.  
  251. [page-subtype="home"] ytd-two-column-browse-results-renderer,
  252. [page-subtype="trending"] ytd-two-column-browse-results-renderer,
  253. [page-subtype="subscriptions"] ytd-two-column-browse-results-renderer,
  254. [page-subtype="trending"] tp-yt-app-header {
  255. 	margin-top: 60px !important;
  256. }`);
  257. })();