☰

Reddit CSS

New Design with new functionalities

当前为 2023-08-04 提交的版本，查看 最新版本。

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