Reddit CSS

New Design with new functionalities

当前为 2023-11-19 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name Reddit CSS
  3. // @namespace https://www.reddit.com
  4. // @version 6.2
  5. // @description New Design with new functionalities
  6. // @author Agreasyforkuser
  7. // @match https://old.reddit.com/*
  8. // @match https://www.reddit.com/*
  9. // @match https://rapidsave.com/*
  10. // @exclude https://new.reddit.com/*
  11. // @icon https://www.redditstatic.com/desktop2x/img/favicon/android-icon-192x192.png
  12. // @license MIT
  13. // @grant GM_addStyle
  14. // ==/UserScript==
  15.  
  16.  
  17. /////////////////// sort by new ////////////////////////////////////////////////////////////////////////
  18.  
  19. 'use strict';
  20. const re = /https?:\/\/(?:www\.|old\.|new\.)?reddit\.com/i;
  21. for (var i=0, l=document.links.length; i<l; i++) {
  22. if (re.test(document.links[i].href)) {
  23. var path = document.links[i].pathname;
  24. if (path === '/' || path.startsWith('/r/')) {
  25. var pathlen = path.split('/').length - 1 - (path.endsWith('/') ? 1 : 0);
  26. if ((pathlen <= 2) && (document.links[i].closest('.tabmenu') === null)) {
  27. document.links[i].href += path.endsWith('/') ? 'new/' : '/new/';
  28. }
  29. }
  30. }
  31. }
  32. //////////////////////////////// over 18 button ///////////////////////////////////////////////////////
  33.  
  34. const button = document.querySelector('button.c-btn.c-btn-primary[type="submit"][name="over18"][value="yes"]');
  35. if (button) {button.click();}
  36.  
  37.  
  38. /////////////////////////////// auto-click download link after opening the rapidsave page ///////////////
  39. const dbutton = document.querySelector('.downloadbutton');
  40. if (dbutton) {
  41. dbutton.click();
  42. }
  43.  
  44. ///////////////////////////////////////////////////////////////////////////////////////////////////
  45. (function() {
  46. 'use strict';
  47.  
  48. // Define the CSS to enlarge the thumbnails and modify the styling
  49. var customCSS = `
  50.  
  51. /* View full thumbnails on search page */
  52. .search-result :link {display:inline-table !important}
  53.  
  54. .email-collection-banner, .email-verification-tooltip, #eu-cookie-policy {display:none !important}
  55.  
  56. .infobar.listingsignupbar, .infobar.commentsignupbar {display: none !important;}
  57. .infobar, .timeout-infobar {border:none}
  58. .help-hoverable {display:none}
  59.  
  60. /* Video Controls for Mobile */
  61. video::-webkit-media-controls-panel {background: none; opacity:.7}
  62. video::-webkit-media-controls-overlay-play-button {opacity: 0}
  63.  
  64. /* Flair Labels */
  65. .flairrichtext {border-radius: 0px;border:none}
  66. .linkflairlabel {border-radius: 0px;border:none}
  67. .stamp {background: white;border-radius: 0;padding:0}
  68.  
  69.  
  70.  
  71.  
  72. /* Buttons */
  73. button, .preftable select, input[type="submit"] {border-radius:0}
  74.  
  75. /* Subreddit Name */
  76. body.with-listing-chooser #header .pagename {position:inherit; color: white}
  77. .pagename a {color: black; margin-left:4px; margin-right:4px}
  78. .pagename {background-color:white; font-variant: normal; border-radius:0px; margin: 0;}
  79.  
  80.  
  81. /* Adjust the size of the thumbnails */
  82.  
  83. .thumbnail, .thumbnail img{
  84. width: 200px !important;
  85. height: auto !important;
  86. position: relative;
  87. margin-bottom: 0;
  88. }
  89.  
  90. /* Visibility of text posts */
  91. .expando-button.selftext {float:left}
  92. .expando-button.selftext {height:50px !important;width:200px !important; background-image:none !important;background-color: black !important}
  93.  
  94.  
  95. /* no margin left for expanded media */
  96. .entry {margin-left:0}
  97.  
  98. /* size videos correctly */
  99. .no-constraints-when-pinned {min-width:0 !important; min-height: 0 !important;}
  100.  
  101. /* Videoplayer Background */
  102. .reddit-video-player-root {background: #0000;}
  103.  
  104. /* Video Duration Info */
  105. .duration-overlay {font-size: 10pt; font-weight: bold;}
  106. .duration-overlay {border-top-left-radius: 10px; width:auto !important; padding:5px; right:0}
  107.  
  108.  
  109. /* OP indicator */
  110. .tagline .submitter, .search-result-meta .submitter {color: #228822}
  111.  
  112. /* sort menu*/
  113. .menuarea {border:none}
  114. .dropdown.lightdrop .selected {text-decoration: none}
  115.  
  116. /* Post */
  117. .thing .title {font-weight: normal;color: #000; ;margin-bottom: 15px;}
  118. .subreddit {font-weight: bold;font-size: larger;color: #000;}
  119. .link .flat-list {font-size:larger}
  120. .link.last-clicked {border: 3px dotted red;}
  121.  
  122. /* Text Posts Background*/
  123. .link .usertext-body .md {background: none; border: 1px solid gray; border-radius: 0}
  124.  
  125. /* Post Details */
  126. .entry .buttons li a {color:#000000c7; font-weight:normal}
  127.  
  128. .entry .buttons li {background: #0000000d}
  129. .entry .buttons li:hover {opacity:1 !important} //revert graying-out function on hover
  130.  
  131. .tagline {color: #8880; margin-bottom: 15px;}
  132. .tagline .live-timestamp {color: #369}
  133. .domain {display: none;}
  134. .reportbtn {display:none}
  135. .post-crosspost-button {display:none}
  136. .post-sharing-button {display:none}
  137. .buttons .give-gold.gold-give-gold {display: none}
  138. .hide-button {display:none !important}
  139. .expando-button {opacity: 0.1;float:right}
  140.  
  141.  
  142. /* Header Font Size and Icon */
  143. #header-bottom-left {font-size: large;}
  144. #header-img.default-header:not(:hover) {opacity: 0}
  145.  
  146. /* Upper Bars */
  147. #sr-header-area:not(:hover) {background: none !important; opacity:0.3 }
  148. #sr-header-area {border-bottom: none}
  149. #sr-header-area .redesign-beta-optin {display:none}
  150. #sr-more-link {background-color: #cee3f8 }
  151.  
  152. /* Hide Username */
  153. .user a:not(:hover) {opacity: 0;}
  154.  
  155.  
  156.  
  157. .pref-lang {font-weight: normal}
  158. #header-bottom-right:not(:hover) {background: none; border-radius:0}
  159. #header-bottom-right {background: white; border-radius:0}
  160. #header-bottom-right {font-size: larger;}
  161. #header {border:none}
  162.  
  163.  
  164. .separator {color: transparent;}
  165. #header-bottom-left {margin-top: -10px;}
  166. a[href="https://old.reddit.com/wiki/"].choice {display: none;}
  167. .tabmenu li a {background:none;opacity:0.6;font-weight: normal}
  168. .tabmenu li a:hover {background:white}
  169. .tabmenu li.selected a {opacity:1;font-weight: bold;font-size: x-large; background-color: white; border: none}
  170. .tabmenu li.selected a {text-transform: uppercase}
  171.  
  172.  
  173.  
  174.  
  175. /* Sidebar */
  176. .sidecontentbox .content {border: none; background: none}
  177. .sidebox .spacer {display: none}
  178. .premium-banner {display: none}
  179. .giftgold {display: none}
  180. .titlebox .bottom {border:none}
  181. #searchexpando, .linkinfo, .linkinfo .shortlink input {border: none}
  182. .morelink .nub {display: none}
  183. .morelink {border: none; background: #eff7ff;background-image:none}
  184. .toggle .option {border: none; border-radius:0}
  185. .c-btn-primary {border: none; border-radius: 0;}
  186. .subscription-box:not(:hover) {opacity: 0}
  187.  
  188.  
  189.  
  190. /* Space between Posts */
  191. .link {margin-bottom: 0px;}
  192.  
  193. /* Expanded Post Margins */
  194. .expando {margin: 0}
  195.  
  196. /* Gallery Buttons */
  197. .media-gallery .gallery-nav-bar {font-size:large; display:grid}
  198. .media-gallery .gallery-nav-next {border:1px solid #336699;background:#eff7ff; float:right !important}
  199. .media-gallery .gallery-nav-prev {border:1px solid #336699;background:#eff7ff}
  200. .media-gallery .gallery-nav-back {border:1px solid #336699;background:#eff7ff}
  201. /*.gallery-navigation {padding: 0px}*/
  202. .gallery-navigation {border: none}
  203. .gallery-nav-disabled {opacity:0 !important}
  204.  
  205. /* Rank / Scores */
  206. .link .rank {display: none}
  207. .arrow.up {display: none}
  208. .arrow.down {display: none}
  209.  
  210. /* Comment Page */
  211. .panestack-title { padding-bottom: 0px; border-bottom: none;}
  212. .commentarea .menuarea {font-size: large;}
  213. .comment .author {font-size: larger;float:left}
  214. .comment .expand {font-size: large;float:left; opacity:1;margin: 0 !important;padding: 0 !important; opacity:0}
  215. .comment .expand {width:6px}
  216. .comment.collapsed .expand { opacity:1;width:auto}
  217. .comment .midcol {z-index:9999}
  218.  
  219. .commentarea > .usertext:not(:hover) {opacity:0.2; height: 18px}
  220.  
  221. .commentarea .entry .buttons:not(:hover) {opacity:0;}
  222. .comments-page #siteTable .thing {display: flex !important;border: none;}
  223. .comment .tagline {color: #00000069 ; margin-bottom: 15px; text-align:left}
  224. .comment .child {border-left: dotted 3px #000000}
  225. .comment .score {font-size: larger}
  226. .comments-page .arrow.up {display:block}
  227. .comments-page .arrow.down {display:block}
  228. .pinnable-content.pinned {background-color: #FFFFFFF7 !important;box-shadow: none !important}
  229. .reddiquette {display: none}
  230.  
  231. /* Bottom Page */
  232. .footer {display:none}
  233. .footer-parent {opacity:0}
  234. .debuginfo {display:none}
  235. .bottommenu {opacity:0}
  236.  
  237. /* promoted posts/ads */
  238. .link.promotedlink.promoted, .link.promotedlink.external {display:none !important}
  239.  
  240. /* submissions */
  241. .formtabs-content .infobar {border:none}
  242. .content.submit .info-notice {display: none;}
  243. #items-required {display: none;}
  244.  
  245.  
  246.  
  247. /* Navbar */
  248. .nav-buttons {
  249. display:table;
  250. bottom: 0 !important;
  251. right: 0 !important;
  252. text-align: center !important;
  253. border: 3px solid;
  254. border-color: #cee3f8;
  255. border-top-left-radius: 15px;
  256. background-color: #cee3f8;
  257. font-size: larger;
  258. z-index: 9998 !important;
  259. }
  260. .nextprev a {background:none !important}
  261.  
  262. /* Crossposts */
  263. .crosspost-preview {border-radius: 0 !important}
  264.  
  265. `;
  266.  
  267. // Add the custom CSS to the page
  268. GM_addStyle(customCSS);
  269.  
  270. ////////////////////// Remove thumbnails from posts without thumbnails////////////////////////
  271.  
  272. function removePostsWithoutImages() {
  273. var posts = document.querySelectorAll('.thumbnail');
  274. for (var i = 0; i < posts.length; i++) {
  275. if (!posts[i].querySelector('img')) {
  276. posts[i].parentNode.removeChild(posts[i]);
  277. }
  278. }
  279. }
  280. setInterval(removePostsWithoutImages, 1000);
  281. })();
  282.  
  283.  
  284. ////////////////////////////////////// comments page //////////////////////////////////
  285.  
  286. var commentpage = /https:\/\/.*\.reddit\.com\/.*\/comments\/.*/;
  287. if (commentpage.test(window.location.href)) {
  288. GM_addStyle(`.reportbtn {display:block}
  289. .post-crosspost-button {display:block}
  290. a.comments {display:none}
  291. /* .buttons .give-gold.gold-give-gold {display:block} */
  292. .expando-button {opacity: 1 }
  293. .hide-button {display:block !important}
  294.  
  295. a.embed-comment {display: none}
  296. /* a.bylink {display: none} */
  297.  
  298.  
  299. .thumbnail,.thumbnail img {width: 100px !important;height: 100px !important;}
  300. #sr-header-area {display:none}
  301.  
  302. /* without this voting comments on mobile is impossible */
  303. .entry {margin-left:4px}
  304.  
  305. `
  306. );
  307.  
  308. ////////////////////////////////// Download Button ////////////////////////////////////
  309.  
  310.  
  311. 'use strict';
  312.  
  313. function downloadVideo() {
  314. var postUrl = window.location.href;
  315. var baseUrl = 'https://rapidsave.com/info?url=';
  316. var downloadUrl = baseUrl + encodeURIComponent(postUrl);
  317. window.open(downloadUrl, '_blank');
  318. }
  319.  
  320. function createDownloadButton() {
  321. var listItem = document.createElement('li');
  322. listItem.classList.add('reddit-video-download-button');
  323.  
  324. var button = document.createElement('button');
  325. button.innerHTML = 'Download';
  326. button.style.color = '#000000c7'; //same as .entry .buttons li a
  327. button.style.background = 'none';
  328. button.style.border = 'none';
  329. button.style.fontSize = 'inherit';
  330. // button.style.borderRadius = '10px';
  331. // button.style.fontWeight = 'bold';
  332. button.onclick = downloadVideo;
  333.  
  334. listItem.appendChild(button);
  335.  
  336. var buttonsList = document.querySelector('ul.buttons');
  337. if (buttonsList) {
  338. buttonsList.appendChild(listItem);
  339. }
  340. }
  341.  
  342. createDownloadButton();
  343.  
  344.  
  345. /////////////////////add profile pictures next to comments ///////////////////////
  346.  
  347. const addAvatars = async (root = document) => {
  348. Array.from(root.querySelectorAll('.thing:not(.morechildren)')).forEach(async (thing) => {
  349. if (!thing) return;
  350. if (thing.hasAttribute('data-reddit-profile-picture')) return;
  351. const img = document.createElement('img');
  352. img.classList.add('reddit-profile-picture');
  353. img.style.height = '22px';
  354. img.style.width = '22px';
  355. img.style.float = 'left';
  356. img.style.margin = '0px';
  357. thing.insertBefore(img, thing.querySelector('.entry'));
  358. thing.setAttribute('data-reddit-profile-picture', 1);
  359. if (!thing.id) return;
  360. const authorElement = thing.querySelector('.author');
  361. if (authorElement && authorElement.href) {
  362. const xhr = new XMLHttpRequest();
  363. xhr.open('GET', `${authorElement.href}/about.json`);
  364. xhr.addEventListener('load', async () => {
  365. if (xhr.status === 200) {
  366. try {
  367. const profile = JSON.parse(xhr.responseText).data;
  368. const ta = document.createElement('textarea');
  369. ta.innerHTML = profile.icon_img;
  370. img.src = ta.value;
  371. } catch (error) {
  372. // Error parsing JSON or extracting URL
  373. console.error('Error parsing JSON or extracting URL:', error);
  374. removeAvatar(img);
  375. }
  376. } else {
  377. // Non-200 status, handle error
  378. console.error('Error fetching user data:', xhr.status, xhr.statusText);
  379. removeAvatar(img);
  380. }
  381. });
  382. xhr.addEventListener('error', () => {
  383. // Network error
  384. console.error('Network error while fetching user data.');
  385. removeAvatar(img);
  386. });
  387. xhr.send();
  388. }
  389. });
  390. };
  391.  
  392. const removeAvatar = (imgElement) => {
  393. if (imgElement && imgElement.parentNode) {
  394. imgElement.parentNode.removeChild(imgElement);
  395. }
  396. };
  397.  
  398. addAvatars();
  399.  
  400. const mo = new MutationObserver((muts) => {
  401. muts.forEach((mut) => {
  402. Array.from(mut.addedNodes).forEach((node) => {
  403. if (node instanceof HTMLElement) {
  404. addAvatars();
  405. }
  406. });
  407. });
  408. });
  409. mo.observe(document.body, { childList: true, subtree: true });
  410. };
  411.  
  412. ////////////////////////////// userpage ///////////////////////////////////////////////////////////////////
  413.  
  414. var userpage = /https:\/\/.*\.reddit\.com\/user\/.*/;
  415. if (userpage.test(window.location.href)) {
  416.  
  417. GM_addStyle(`.comment, .content .details {border-bottom: 2px solid #5f99cf !important}`);
  418.  
  419. const addProfilePictures = async (root = document) => {
  420. Array.from(root.querySelectorAll('.pagename')).forEach(async (pagename) => {
  421. if (!pagename) return;
  422. if (pagename.hasAttribute('data-reddit-profile-picture')) return;
  423.  
  424. const username = pagename.textContent.trim();
  425. if (!username) return;
  426.  
  427. const img = document.createElement('img');
  428. img.classList.add('reddit-profile-picture');
  429. img.style.height = '35px';
  430. img.style.width = '35px';
  431. img.style.verticalAlign = 'middle';
  432.  
  433.  
  434. pagename.parentNode.insertBefore(img, pagename.nextSibling);
  435.  
  436. pagename.setAttribute('data-reddit-profile-picture', 1);
  437.  
  438. const xhr = new XMLHttpRequest();
  439. xhr.open('GET', `https://www.reddit.com/user/${username}/about.json`);
  440. xhr.addEventListener('load', async () => {
  441. const profile = JSON.parse(xhr.responseText).data;
  442. const ta = document.createElement('textarea');
  443. ta.innerHTML = profile.icon_img;
  444. img.src = ta.value;
  445. });
  446. xhr.send();
  447. });
  448. };
  449.  
  450. addProfilePictures();
  451.  
  452. const mo = new MutationObserver((muts) => {
  453. muts.forEach((mut) => {
  454. Array.from(mut.addedNodes).forEach((node) => {
  455. if (node instanceof HTMLElement) {
  456. addProfilePictures(node);
  457. }
  458. });
  459. });
  460. });
  461.  
  462. mo.observe(document.body, { childList: true, subtree: true });
  463. };
  464.  
  465.  
  466. //////////////////////////////////////////// red numbers if score is less than one //////////////////////////////////////
  467.  
  468. if (userpage.test(window.location.href) || commentpage.test(window.location.href)) {
  469. (function() {
  470. 'use strict';
  471.  
  472. // Function to check if the text starts with a "-" or "0"
  473. function startsWithNegativeSymbolOrZero(text) {
  474. return text.trim().startsWith('-') || text.trim().startsWith('0');
  475. }
  476.  
  477. // Get all elements with class "score likes"
  478. var scoreElements = document.querySelectorAll('.score');
  479.  
  480. // Iterate over each score element using forEach
  481. scoreElements.forEach(function(scoreElement) {
  482. var scoreText = scoreElement.textContent.trim();
  483.  
  484. // Check if the score starts with a "-" or "0"
  485. if (startsWithNegativeSymbolOrZero(scoreText)) {
  486. // Change the color to red
  487. scoreElement.style.color = 'red';
  488. scoreElement.style.fontWeight = 'bold';
  489. } else if (parseFloat(scoreText) > 1) {
  490. // Change the color to green
  491. scoreElement.style.color = 'green';
  492. scoreElement.style.fontWeight = 'bold';
  493. }
  494. });
  495. })();
  496. }
  497.  
  498. /////////////////////////grey out comment-buttons if no comments were written /////////////////////////////////
  499.  
  500.  
  501. if (!commentpage.test(window.location.href)) {
  502.  
  503. 'use strict';
  504.  
  505. const removeCommentsCount = element => {
  506. const text = element.textContent.trim();
  507. if (!isNaN(parseInt(text.charAt(0), 10))) return;
  508. element.closest('.entry .buttons li').style.opacity = '0.2';
  509. };
  510.  
  511. const commentElements = document.querySelectorAll('a.comments');
  512. commentElements.forEach(removeCommentsCount);
  513.  
  514. const observer = new MutationObserver(mutationsList => {
  515. for (const mutation of mutationsList) {
  516. if (mutation.type === 'childList') {
  517. const newCommentElements = mutation.addedNodes;
  518. newCommentElements.forEach(node => {
  519. if (node instanceof HTMLElement) {
  520. const element = node.querySelector('a.comments');
  521. if (element) removeCommentsCount(element);
  522. }
  523. });
  524. }
  525. }
  526.  
  527. });
  528.  
  529. observer.observe(document.body, { childList: true, subtree: true });
  530. };
  531.  
  532. /////////////////////////////////////////////////Thumbnail Click Functionality //////////////////
  533.  
  534. // Custom CSS for the clicked thumbnail
  535. const customCSS = `
  536. /* Makes Clicking Easier */
  537. .thumbnail {z-index:99}
  538.  
  539. .thumbnail.clicked {
  540. width: 80px !important;
  541. height: 80px !important;
  542. border-radius: 15px;
  543. opacity:0.5;
  544. }
  545.  
  546. .thumbnail.clicked img {
  547. width: 80px !important;
  548. height: 80px !important;
  549. }
  550.  
  551. .thing.clicked .arrow.up {display: block}
  552. .thing.clicked .arrow.down {display:block}
  553. `;
  554.  
  555. function expandPostOnElementClick(element) {
  556. const expandoButton = element.closest('.thing').querySelector('.expando-button');
  557.  
  558. if (expandoButton) {
  559. expandoButton.click();
  560. }
  561. }
  562.  
  563. function handleElementClick(event) {
  564. event.stopPropagation();
  565. event.preventDefault();
  566.  
  567. const element = event.currentTarget;
  568. const thumbnail = element.closest('.thumbnail');
  569. const thing = element.closest('.thing');
  570.  
  571. // Check if the thumbnail has the 'clicked' class
  572. const isClicked = thumbnail.classList.contains('clicked');
  573.  
  574. if (isClicked) {
  575. // Remove the 'clicked' class to revert the changes
  576. thumbnail.classList.remove('clicked');
  577. thing.classList.remove('clicked');
  578. } else {
  579. // Add 'clicked' class to the thumbnail
  580. thumbnail.classList.add('clicked');
  581. thing.classList.add('clicked');
  582. }
  583.  
  584. expandPostOnElementClick(element);
  585. }
  586.  
  587. function attachClickListenersToElements() {
  588. const elements = document.querySelectorAll('.thumbnail, img[src*="external-preview.redd.it"]');
  589.  
  590. elements.forEach((element) => {
  591. element.addEventListener('click', handleElementClick);
  592. });
  593. }
  594.  
  595. // Add custom CSS styles
  596. GM_addStyle(customCSS);
  597.  
  598. // Attach click listeners to elements initially
  599. attachClickListenersToElements();
  600.  
  601. // Create a MutationObserver to monitor the page for changes
  602. const observer = new MutationObserver(() => {
  603. // Attach click listeners to elements whenever new content is added to the page
  604. attachClickListenersToElements();
  605. });
  606.  
  607. // Start observing the document for changes
  608. observer.observe(document, { childList: true, subtree: true });
  609.  
  610. /////////////////////Toggle Nav-Bar On Scroll /////////////////////////////////////////////////////////////
  611.  
  612.  
  613. 'use strict';
  614.  
  615. var navButtons = document.getElementsByClassName('nav-buttons');
  616. if (navButtons.length > 0) {
  617. var nav = navButtons[0];
  618. nav.style.position = 'fixed';
  619. }
  620.  
  621. //var headerHeight = header.offsetHeight;
  622. var lastScrollTop = 0;
  623.  
  624.  
  625. window.addEventListener('scroll', function() {
  626. var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  627. var windowHeight = window.innerHeight;
  628. var documentHeight = document.documentElement.scrollHeight;
  629.  
  630. if (scrollTop === 0) {
  631. // Reached the top of the page
  632. nav.style.opacity = '1';
  633. nav.style.pointerEvents = 'auto';
  634. } else {
  635. // Scrolling up
  636. nav.style.opacity = '.8';
  637. nav.style.pointerEvents = 'auto';
  638. }
  639.  
  640. if (scrollTop + windowHeight + 10 >= documentHeight) {
  641. // Reached the end of the page
  642. nav.style.opacity = '1';
  643. nav.style.pointerEvents = 'auto';
  644. } else {
  645. if (scrollTop > lastScrollTop) {
  646. // Scrolling down
  647. nav.style.opacity = '0';
  648. nav.style.pointerEvents = 'none';
  649. }
  650. }
  651.  
  652. lastScrollTop = scrollTop;
  653. });
  654.  
  655.  
  656. /////////////////////////////////////// remove some tabs /////////////////////////////////////////////////
  657.  
  658. (function() {
  659. 'use strict';
  660.  
  661. // Function to remove the elements containing the text "gilded" or "best" from .tabmenu
  662. function removeGildedAndBestTabs() {
  663. const tabmenu = document.querySelector('.tabmenu');
  664. if (!tabmenu) return;
  665.  
  666. const tabs = tabmenu.querySelectorAll('a');
  667. for (let i = 0; i < tabs.length; i++) {
  668. const tab = tabs[i];
  669. const tabText = tab.textContent.toLowerCase();
  670. if (tabText.includes('gilded') || tabText.includes('best')) {
  671. tab.remove();
  672. }
  673. }
  674. }
  675.  
  676. // Call the function to remove the "gilded" and "best" tabs after the page has loaded
  677. window.addEventListener('load', removeGildedAndBestTabs);
  678. })();
  679.  
  680. ////////////////////////////////////// Subreddit Icon next to Subreddit name /////////////////////////
  681.  
  682. (function() {
  683. 'use strict';
  684.  
  685. function setSubredditIcon() {
  686. const pagenameLink = document.querySelector('.pagename');
  687. const subredditIcon = document.createElement('img');
  688. subredditIcon.style.verticalAlign = 'middle';
  689. subredditIcon.style.width = 'auto';
  690. subredditIcon.style.height = '35px';
  691.  
  692. const srName = getSrName();
  693.  
  694.  
  695. const srDataUrl = `https://www.reddit.com/r/${srName}/about.json`;
  696. fetch(srDataUrl)
  697. .then(response => response.json())
  698. .then(data => {
  699. const communityIcon = cleanUpCommunityIcon(data.data.community_icon);
  700. const iconUrl = communityIcon || data.data.icon_img || data.data.header_img;
  701. if (!iconUrl || iconUrl.length === 0)
  702. {
  703. return;
  704. }
  705. subredditIcon.src = iconUrl;
  706. pagenameLink.parentNode.insertBefore(subredditIcon, pagenameLink.nextSibling);
  707. })
  708.  
  709. }
  710.  
  711. function getSrName() {
  712. const srNameRegex = /https:[/][/](www|old|new)[.]reddit[.]com[/]r[/](\w+)/g;
  713. const match = srNameRegex.exec(document.location.href);
  714.  
  715. return match[2];
  716. }
  717.  
  718. function cleanUpCommunityIcon(url) {
  719. if (!url || url.length === 0) {
  720. return url;
  721. }
  722. function htmlDecode(input) {
  723. const doc = new DOMParser().parseFromString(input, 'text/html');
  724. return doc.documentElement.textContent;
  725. }
  726. const decodedUrl = htmlDecode(url);
  727. return decodedUrl;
  728. }
  729.  
  730. setSubredditIcon();
  731. })();
  732.  
  733.