Reddit CSS

New Design with new functionalities

当前为 2023-08-06 提交的版本,查看 最新版本

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