New Design with new functionalities
当前为
// ==UserScript==
// @name Reddit CSS
// @namespace https://www.reddit.com
// @version 6.9
// @description New Design with new functionalities
// @author Agreasyforkuser
// @match https://old.reddit.com/*
// @match https://www.reddit.com/*
// @match https://rapidsave.com/*
// @exclude https://new.reddit.com/*
// @icon https://www.redditstatic.com/desktop2x/img/favicon/android-icon-192x192.png
// @license MIT
// @grant GM_addStyle
// ==/UserScript==
/////////////////// add CSS styles ////////////////////////////////////////////////////////////////////////
(function() {
'use strict';
GM_addStyle(`
:root {
--theme-color-new: #cee3f8;
--tab-text-color: #336699;
--tab-text-color-selected: #ff4500;
--action-button-color: #000000c7;
--action-button-background: #0000000d;
--general-text-background: white;
}
#header, #header:hover {background-color: var(--theme-color-new)}
#header-bottom-right {background: var(--theme-color-new)}
#header-bottom-right:hover {background: var(--general-text-background)}
#header-bottom-right a, .userkarma {color: var(--tab-text-color) !important}
#header-bottom-right:not(:hover) .user a {opacity: 0 !important}
.user .userkarma {font-weight: normal}
.dropdown.srdrop .selected.title {color: var(--tab-text-color) !important}
#sr-more-link {background-color: var(--theme-color-new)}
#sr-header-area {background-color: var(--theme-color-new) !important}
#sr-header-area a {background-color: var(--theme-color-new) !important; color: var(--tab-text-color) !important}
.media-gallery .gallery-nav-bar {color:var(--tab-text-color)}
.media-gallery .gallery-nav-next,
.media-gallery .gallery-nav-prev,
.media-gallery .gallery-nav-back {border:1px solid var(--tab-text-color);background:var(--theme-color-new)}
.nav-buttons {border: 3px solid var(--theme-color-new); background-color: var(--theme-color-new)}
#header .tabmenu li a {color: var(--tab-text-color); background: var(--theme-color-new) !important}
#header .tabmenu li.selected a {background: var(--general-text-background) !important}
#header .tabmenu li a:hover {background: var(--general-text-background) !important; color: var(--tab-text-color)}
#header .tabmenu li.selected a {color:var(--tab-text-color-selected); background-color: var(--general-text-background)}
body.with-listing-chooser #header .pagename {color: var(--general-text-background)}
.pagename {background-color: var(--general-text-background) !important}
.pagename a {color: black !important}
body, body > .content {background: var(--general-text-background)}
.thing.even, .thing.odd {background: var(--general-text-background) !important}
.side {background-color: var(--general-text-background)}
.entry .buttons li a {color: var(--action-button-color)}
.entry .buttons li {background: var(--action-button-background)}
/* Adjust the size of the thumbnails */
.thumbnail, .thumbnail img, .link .thumbnail img{
width: 200px !important;
height: auto !important;
position: relative;
margin-bottom: 0;
}
/* Visibility of text posts */
.expando-button.selftext {height:50px !important; width:200px !important; float:left; background-image:none !important;background-color: black !important}
/* search placeholder text */
::-moz-placeholder {color:transparent !important}
::-webkit-input-placeholder {color:transparent !important}
/* search page */
/*.search-result :link {display:inline-table !important}*/
.search-result :link:not(a.option.remove) {display: inline-table !important}
.search-result-group {max-width: none}
.search-header-menus {float: none}
.search-header-label {display: none}
.combined-search-page .raisedbox h4 {opacity: 0}
/* Video Controls for Mobile */
video::-webkit-media-controls-panel {background: none; opacity: 1}
video::-webkit-media-controls-overlay-play-button {opacity: 0}
/* Video controls for Desktop */
.reddit-video-controller-root.playback-controls {background: rgba(0,0,0,0.75) !important; border-radius: 50px !important}
.reddit-video-controller-root.playback-controls:hover {background: rgba(0,0,0,0.95) !important}
.reddit-video-controller-root.playback-controls a.permalink {display: none !important}
.reddit-video-controller-root.ended-controls, .reddit-video-controller-root.buffering-controls {background: none !important}
.reddit-video-controller-root.ended-controls .centered span.replay-video {display: none !important}
.reddit-video-controller-root.playback-controls .reddit-video-seek-bar-root .seek-bar-thumb {opacity: 1 !important}
.reddit-video-controller-root.playback-controls .time-label {font-weight: bold}
/* Videoplayer Background */
.reddit-video-player-root {background: #0000;}
/* Video Duration Info */
.duration-overlay {font-size: 10pt; font-weight: bold;}
.duration-overlay {border-top-left-radius: 10px; width:auto !important; padding:5px; right:0}
/* Flair Labels */
/* .flairrichtext {border-radius: 0px;border:none}*/
/* .linkflairlabel {border-radius: 0px;border:none}*/
/* .stamp {background: white; border-radius: 0; padding:0}*/
.nsfw-stamp {background: #d10023; color:white; font-weight:bold !important; border: 2px solid #d10023 !important;}
.spoiler-stamp {background: black; color:white; font-weight:bold !important; border: 2px solid black !important;}
/* Subreddit Name */
body.with-listing-chooser #header .pagename {position:inherit}
.pagename a {margin-left:4px; margin-right:4px; padding:0}
.pagename {font-variant: normal; border-radius:0px; margin: 0 !important; padding: 0 !important}
/* match pagename height with subreddit logo */
.pagename {display: inline-block !important; height: 35px !important}
.pagename a {vertical-align: middle !important}
/* no margin left for expanded media */
.entry {margin-left:0}
/* size videos correctly */
.no-constraints-when-pinned {min-width:0 !important; min-height: 0 !important;}
/* OP indicator */
.tagline .submitter, .search-result-meta .submitter {color: #228822}
/* sort menu*/
.menuarea {border:none}
.dropdown.lightdrop .selected {text-decoration: none; font-weight: normal; background-image: none}
/* Post */
.thing .title {font-weight: normal;color: #000; margin-bottom: 13px}
.subreddit {font-weight: bold;font-size: larger;color: #000;}
.link .flat-list {font-size: medium}
.link.last-clicked {border: 3px solid red}
/* Post Details */
.entry .buttons li a {font-weight:normal}
.entry .buttons li:hover {opacity:1 !important} //revert graying-out function on hover
.tagline {color: #8880;}
.tagline .live-timestamp {color: #369}
.expando-button {opacity: 0.1;float:right}
/* hide "submitted" and "by" text from post descriptions on main feeds */
.link .tagline {visibility: hidden !important}
.link .tagline::before {content: none}
.link .tagline time {visibility: visible; margin-left: -53px}
.link .tagline a {visibility: visible}
/* Text Posts Background*/
.link .usertext-body .md {background: none; border: 1px solid gray; border-radius: 0}
/* Crossposts */
.crosspost-preview {border-radius: 0}
/* Space between Posts */
.link {margin-bottom: 0px;}
/* Expanded Post Margins */
.expando {margin: 0}
/* hide some buttons */
.domain {display: none}
.reportbtn {display:none}
.post-crosspost-button {display:none}
.post-sharing-button {display:none}
.buttons .give-gold.gold-give-gold {display: none}
.hide-button {display:none !important}
.comments-page .reportbtn {display:block}
.profile-page .reportbtn {display:block}
.comments-page .post-crosspost-button {display:block}
.comments-page a.comments {display:none}
.comments-page a.embed-comment {display: none}
.comments-page .sendreplies-button {display: none !important}
.comments-page .bylink {display: none !important}
.comments-page .stamp {display: none !important}
/* Gallery Buttons */
.media-gallery .gallery-nav-bar {font-size:large; display:grid}
.media-gallery .gallery-nav-next {text-align: right !important}
.media-gallery .gallery-nav-prev {text-align: left !important}
.media-gallery .gallery-nav-back {text-align: center !important}
.media-gallery .gallery-nav-next:after {content:" ▶"}
.media-gallery .gallery-nav-prev:before {content:"◀ "}
.gallery-navigation {border: none}
.gallery-nav-disabled {opacity:0 !important}
/* Rank / Scores */
.link .rank {display: none}
.arrow.up {display: none}
.arrow.down {display: none}
/* Header Font Size and Icon */
#header-bottom-left {font-size: large}
#header-bottom-left {margin-top: 0}
.comments-page #header-img:not(:hover), .comments-page #header-img.default-header:not(:hover) {opacity: 0}
#header-img, #header-img.default-header {vertical-align: bottom; margin: 0}
#header-img {max-width: 32px; max-height: 32px}
/* #header-img.default-header {background-image: url(https://www.redditstatic.com/desktop2x/img/favicon/favicon-32x32.png);background-position: 0; height:32px; width:32px}*/
/* Upper Bars */
#sr-header-area:not(:hover) {opacity: 0.3}
#sr-header-area {border-bottom: none}
#sr-header-area .redesign-beta-optin {display:none}
.pref-lang {font-weight: normal}
#header-bottom-right {border-radius:0; border: none !important}
#header-bottom-right {font-size: larger}
#header {border:none}
.separator {color: transparent}
.tabmenu li a {font-weight: normal;opacity:1 !important}
.tabmenu li.selected a {opacity:1;font-weight: bold;font-size: x-large; border: none}
.tabmenu li.selected a {text-transform: uppercase}
/* Sidebar */
.sidecontentbox .content {border: none; background: none}
.sidebox .spacer {display: none}
.premium-banner {display: none}
.giftgold {display: none}
.titlebox .bottom {border:none}
#searchexpando, .linkinfo, .linkinfo .shortlink input {border: none}
.morelink .nub {display: none}
.morelink {border: none; background: #eff7ff;background-image:none}
.toggle .option {border: none; border-radius:0}
.c-btn-primary {border: none; border-radius: 0;}
.subscription-box:not(:hover) {opacity: 0}
/* Comment Page */
.comments-page .tabmenu a.choice[href*="comments"] {display:none !important}
.panestack-title {padding-bottom: 0px; border-bottom: none}
.commentarea .menuarea {font-size: large}
.dropdown-title.lightdrop {display: none}
.comment .author {font-size: unset; float: left !important; margin-right: 5px !important}
.comment .score {font-size: unset; float: left !important; margin-right: 5px !important}
.comment .tagline .userattrs {font-size: unset; float: left !important; margin-right: 5px !important}
.comment .tagline time {font-size: unset; float: left !important; margin-right: 5px !important; margin-left: 0px}
.numchildren {font-size: unset; float: left !important}
.comment .expand {font-size: unset; float: left !important; margin: 0 !important; padding: 0 !important; opacity: 0.09}
.comment.collapsed .expand {opacity:1}
.comment .midcol {z-index:9999}
.commentarea .entry:not(:hover) .buttons {opacity: 0}
.comments-page #siteTable .thing {display: flex !important;border: none;}
.comment .tagline {margin-bottom: 15px}
.comment .child {border-left: 3px solid black}
/* text-area */
.commentarea > .usertext textarea { height: 40px; max-width: 95vw !important}
.usertext-edit {margin: 0 !important; max-width: 95vw !important}
.commentarea > .usertext button {margin: 0 !important}
.commentarea .md {margin: 0 !important}
.comments-page .comment .score {visibility: visible; margin-right: 0}
.comments-page .arrow.up {display:block}
.comments-page .arrow.down {display:block}
.pinnable-content.pinned {background-color: #FFFFFFF7 !important;box-shadow: none !important}
.reddiquette {display: none}
.edited-timestamp {color: red}
.comments-page .expando-button {opacity: 1 }
.comments-page .thumbnail, .comments-page .thumbnail img {width: 100px !important; height: auto !important; max-height: 100px !important}
.comments-page #sr-header-area {display:none}
/* without this voting comments on mobile is impossible */
.comments-page .entry {margin-left:4px}
/* show "submitted" and "by" text in post descriptions again */
.comments-page .link .tagline {visibility: visible !important}
.comments-page .link .tagline::before {content: initial}
.comments-page .link .tagline time {margin-left: 0px}
/* bigger profile picture next to post */
.link .reddit-profile-picture {width: 33px !important; height: 33px !important}
/* promoted posts/ads */
.link.promotedlink.promoted, .link.promotedlink.external {display:none !important}
/* submissions */
.formtabs-content .infobar {border:none}
.content.submit .info-notice {display: none}
#items-required {display: none}
/* Bottom Page */
.footer {display:none}
.footer-parent {opacity:0}
.debuginfo {display:none}
.bottommenu {display:none}
/* Navbar */
.nav-buttons {
position: fixed;
display:table;
bottom: 0 !important;
right: 0 !important;
text-align: center !important;
font-size: larger;
z-index: 1000000 !important;
}
.nextprev a {background:none !important}
.email-collection-banner, .email-verification-tooltip, #eu-cookie-policy {display:none !important}
.infobar.listingsignupbar, .infobar.commentsignupbar {display: none !important;}
.infobar, .timeout-infobar {border:none}
.help-hoverable {display:none}
.reddit-infobar.with-icon {
min-height: 35px !important;
padding: 0 0 0 55px !important;
height: 35px !important;
}
.reddit-infobar.with-icon:not(:hover) {
min-height: 0 !important;
padding: 0 0 0 55px !important;
margin: 0 !important;
height: 9px !important;
opacity:0 !important
}
/* chat window */
.chat-app-window.regular {width: 100%; height: 70%}
.chat-app-window {right: 0; border: none; border-radius: 0}
/* Turn off custom subreddit styles */
#header, #header:hover {background-image: none !important}
.link {padding: 0}
.thumbnail, .thumbnail img {max-width: none; max-height: none; transform: none}
.link .entry .buttons li a.comments {color:#000000c7 !important}
.link.odd, .link.even {padding: 0 !important; margin-right: 0px !important}
body > .content {max-width: none !important}
html body div#header div#header-bottom-left span.pagename a {font-size: 1.2em !important; padding: 0; padding-right: 0; height: 0}
span.hover.pagename.redditname {font-size: 1.2em !important}
#header-bottom-left #header-img-a {margin: 0}
.pagename a {line-height: 0px; background: none}
.pagename a {border: none}
#header .pagename a {line-height: 0px}
#header .pagename > a {color: black !important}
.link > .thumbnail {border-radius:0 !important}
* {text-shadow: none !important}
.title {color:black !important}
.thing.link .title a.title {color: black !important}
body {border: none}
.tabmenu li.selected a {opacity: 1 !important;color: #ff4500 !important; border: none !important}
#header-bottom-left .tabmenu {left: 0 !important}
#header {margin: 0 !important}
#header .tabmenu li a {border: none}
`);
//////////////////////////////// over 18 button ///////////////////////////////////////////////////////
const button = document.querySelector('button.c-btn.c-btn-primary[type="submit"][name="over18"][value="yes"]');
if (button) {button.click();}
//////////////////////////////// auto-click on NSFW-disclaimers ////////////////////////////////////////
(function() {
'use strict';
// Function to click on elements with class 'expando-gate__show-once'
function clickExpandoGate() {
var elements = document.querySelectorAll('.expando-gate.expando-gate--overlay, .expando-gate.expando-gate--interstitial');
elements.forEach(function(element) {
if (!element.dataset.expandoClicked) {
element.click();
element.dataset.expandoClicked = true;
}
});
}
// Create a MutationObserver to watch for changes in the DOM
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
// Check if the target node or its descendants have elements with class 'expando-gate__show-once'
if (mutation.target.matches('.expando-gate.expando-gate--overlay') || mutation.target.querySelector('.expando-gate.expando-gate--overlay')) {clickExpandoGate();}
// embedded youtube-videos need this
if (mutation.target.matches('.expando-gate.expando-gate--interstitial') || mutation.target.querySelector('.expando-gate.expando-gate--interstitial')) {clickExpandoGate();}
});
});
// Define the configuration for the MutationObserver
var config = { subtree: true, childList: true };
// Start observing the document with the specified configuration
observer.observe(document.body, config);
// Initial click on elements with class 'expando-gate__show-once'
clickExpandoGate();
})();
GM_addStyle(`.expando-gate.expando-gate--overlay {display:none !important}`);
/////////////////////////////// auto-click download link after opening the rapidsave page ///////////////
const dbutton = document.querySelector('.downloadbutton');
if (dbutton) {
dbutton.click();
}
})();
////////////////////////////////////// comments page //////////////////////////////////
var commentpage = /https:\/\/.*\.reddit\.com\/.*\/comments\/.*/;
if (commentpage.test(window.location.href)) {
////////////////////////////////// Download Button ////////////////////////////////////
'use strict';
function downloadVideo() {
var postUrl = window.location.href;
var baseUrl = 'https://rapidsave.com/info?url=';
var downloadUrl = baseUrl + encodeURIComponent(postUrl);
window.open(downloadUrl, '_blank');
}
function createDownloadButton() {
var listItem = document.createElement('li');
listItem.classList.add('reddit-video-download-button');
var button = document.createElement('button');
button.innerHTML = 'Download ⤓';
button.style.color = 'var(--action-button-color)'; //same as .entry .buttons li a
button.style.background = 'none';
button.style.border = 'none';
button.style.fontSize = 'inherit';
// button.style.borderRadius = '10px';
// button.style.fontWeight = 'bold';
button.onclick = downloadVideo;
listItem.appendChild(button);
var buttonsList = document.querySelector('ul.buttons');
if (buttonsList) {
buttonsList.appendChild(listItem);
}
}
createDownloadButton();
/////////////////////add profile pictures next to comments ///////////////////////
const addAvatars = async (root = document) => {
Array.from(root.querySelectorAll('.thing:not(.morechildren)')).forEach(async (thing) => {
if (!thing) return;
if (thing.hasAttribute('data-reddit-profile-picture')) return;
const img = document.createElement('img');
img.classList.add('reddit-profile-picture');
img.style.height = '22px';
img.style.width = '22px';
img.style.float = 'left';
img.style.margin = '0px';
thing.insertBefore(img, thing.querySelector('.entry'));
thing.setAttribute('data-reddit-profile-picture', 1);
if (!thing.id) return;
const authorElement = thing.querySelector('.author');
if (authorElement && authorElement.href) {
const xhr = new XMLHttpRequest();
xhr.open('GET', `${authorElement.href}/about.json`);
xhr.addEventListener('load', async () => {
if (xhr.status === 200) {
try {
const profile = JSON.parse(xhr.responseText).data;
const ta = document.createElement('textarea');
ta.innerHTML = profile.icon_img;
img.src = ta.value;
} catch (error) {
// Error parsing JSON or extracting URL
console.error('Error parsing JSON or extracting URL:', error);
removeAvatar(img);
}
} else {
// Non-200 status, handle error
console.error('Error fetching user data:', xhr.status, xhr.statusText);
removeAvatar(img);
}
});
xhr.addEventListener('error', () => {
// Network error
console.error('Network error while fetching user data.');
removeAvatar(img);
});
xhr.send();
}
});
};
const removeAvatar = (imgElement) => {
if (imgElement && imgElement.parentNode) {
imgElement.parentNode.removeChild(imgElement);
}
};
addAvatars();
const mo = new MutationObserver((muts) => {
muts.forEach((mut) => {
Array.from(mut.addedNodes).forEach((node) => {
if (node instanceof HTMLElement) {
addAvatars();
}
});
});
});
mo.observe(document.body, { childList: true, subtree: true });
};
////////////////////////////// userpage ///////////////////////////////////////////////////////////////////
var userpage = /https:\/\/.*\.reddit\.com\/user\/.*/;
if (userpage.test(window.location.href)) {
GM_addStyle(`.comment, .content .details {border-bottom: 2px solid var(--theme-color-new) !important}`);
const addProfilePictures = async (root = document) => {
Array.from(root.querySelectorAll('.pagename')).forEach(async (pagename) => {
if (!pagename) return;
if (pagename.hasAttribute('data-reddit-profile-picture')) return;
const username = pagename.textContent.trim();
if (!username) return;
const img = document.createElement('img');
img.classList.add('reddit-profile-picture');
img.style.height = '35px';
img.style.width = '35px';
img.style.verticalAlign = 'middle';
pagename.parentNode.insertBefore(img, pagename.nextSibling);
pagename.setAttribute('data-reddit-profile-picture', 1);
const xhr = new XMLHttpRequest();
xhr.open('GET', `https://www.reddit.com/user/${username}/about.json`);
xhr.addEventListener('load', async () => {
const profile = JSON.parse(xhr.responseText).data;
const ta = document.createElement('textarea');
ta.innerHTML = profile.icon_img;
img.src = ta.value;
});
xhr.send();
});
};
addProfilePictures();
const mo = new MutationObserver((muts) => {
muts.forEach((mut) => {
Array.from(mut.addedNodes).forEach((node) => {
if (node instanceof HTMLElement) {
addProfilePictures(node);
}
});
});
});
mo.observe(document.body, { childList: true, subtree: true });
};
//////////////////////////////////////////// red numbers if score is less than one //////////////////////////////////////
if (userpage.test(window.location.href) || commentpage.test(window.location.href)) {
(function() {
'use strict';
// Function to check if the text starts with a "-" or "0"
function startsWithNegativeSymbolOrZero(text) {
return text.trim().startsWith('-') || text.trim().startsWith('0');
}
// Get all elements with class "score likes"
var scoreElements = document.querySelectorAll('.comment .score');
// Iterate over each score element using forEach
scoreElements.forEach(function(scoreElement) {
var scoreText = scoreElement.textContent.trim();
// Check if the score starts with a "-" or "0"
if (startsWithNegativeSymbolOrZero(scoreText)) {
// Change the color to red
scoreElement.style.color = 'red';
scoreElement.style.fontWeight = 'bold';
} else if (parseFloat(scoreText) > 1) {
// Change the color to green
scoreElement.style.color = 'green';
scoreElement.style.fontWeight = 'bold';
}
});
})();
}
////////////////////////////// open links in new tab, gray-out comments button if there are no comments /////////////////////////////////
if (!commentpage.test(window.location.href)) {
'use strict';
const removeCommentsCount = element => {
const text = element.textContent.trim();
if (!isNaN(parseInt(text.charAt(0), 10))) return;
element.closest('.entry .buttons li a').style.opacity = '0.1';
};
const openInNewTab = element => {
element.setAttribute('target', '_blank');
};
const commentElements = document.querySelectorAll('a.comments');
const postTitleElements = document.querySelectorAll('.thing .title');
const postauthorElements = document.querySelectorAll('.author');
const subredditElements = document.querySelectorAll('.subreddit');
commentElements.forEach(removeCommentsCount);
commentElements.forEach(openInNewTab);
postTitleElements.forEach(openInNewTab);
postauthorElements.forEach(openInNewTab);
subredditElements.forEach(openInNewTab);
const observer = new MutationObserver(mutationsList => {
for (const mutation of mutationsList) {
if (mutation.type === 'childList') {
const newCommentElements = mutation.addedNodes;
newCommentElements.forEach(node => {
if (node instanceof HTMLElement) {
const element = node.querySelector('a.comments');
const element2 = node.querySelector('.author');
const element3 = node.querySelector('.subreddit');
if (element) {
removeCommentsCount(element);
openInNewTab(element);
};
if (element2) {openInNewTab(element2)};
if (element3) {openInNewTab(element3)};
}
});
}
}
});
observer.observe(document.body, { childList: true, subtree: true });
};
/////////////////////////////////////////////////Thumbnail Click Functionality //////////////////
// Custom CSS for the clicked thumbnail
const customCSS = `
/* Makes Clicking Easier */
.thumbnail {z-index:99}
.thumbnail.clicked {
width: 80px !important;
height: 80px !important;
border-radius: 15px !important;
opacity:0.5;
}
.thumbnail.clicked img {
width: 80px !important;
height: 80px !important;
}
.thing.clicked .arrow.up {display: block}
.thing.clicked .arrow.down {display:block}
`;
function expandPostOnElementClick(element) {
const expandoButton = element.closest('.thing').querySelector('.expando-button');
if (expandoButton) {
expandoButton.click();
}
}
function handleElementClick(event) {
event.stopPropagation();
event.preventDefault();
const element = event.currentTarget;
const thumbnail = element.closest('.thumbnail');
const thing = element.closest('.thing');
// Check if the thumbnail has the 'clicked' class
const isClicked = thumbnail.classList.contains('clicked');
if (isClicked) {
// Remove the 'clicked' class to revert the changes
thumbnail.classList.remove('clicked');
thing.classList.remove('clicked');
} else {
// Add 'clicked' class to the thumbnail
thumbnail.classList.add('clicked');
thing.classList.add('clicked');
}
expandPostOnElementClick(element);
}
function attachClickListenersToElements() {
const elements = document.querySelectorAll('.thumbnail, img[src*="external-preview.redd.it"]');
elements.forEach((element) => {
element.addEventListener('click', handleElementClick);
});
}
// Add custom CSS styles
GM_addStyle(customCSS);
// Attach click listeners to elements initially
attachClickListenersToElements();
// Create a MutationObserver to monitor the page for changes
const observer = new MutationObserver(() => {
// Attach click listeners to elements whenever new content is added to the page
attachClickListenersToElements();
});
// Start observing the document for changes
observer.observe(document, { childList: true, subtree: true });
////////////////////////////////////// Subreddit Icon next to Subreddit name /////////////////////////
(function() {
'use strict';
function setSubredditIcon() {
const pagenameLink = document.querySelector('.pagename');
const subredditIcon = document.createElement('img');
subredditIcon.style.verticalAlign = 'middle';
subredditIcon.style.width = 'auto';
subredditIcon.style.height = '35px';
subredditIcon.classList.add('subreddit-icon');
const srName = getSrName();
const srDataUrl = `https://www.reddit.com/r/${srName}/about.json`;
fetch(srDataUrl)
.then(response => response.json())
.then(data => {
const communityIcon = cleanUpCommunityIcon(data.data.community_icon);
const iconUrl = communityIcon || data.data.icon_img || data.data.header_img;
if (!iconUrl || iconUrl.length === 0)
{
return;
}
subredditIcon.src = iconUrl;
pagenameLink.parentNode.insertBefore(subredditIcon, pagenameLink.nextSibling);
})
}
function getSrName() {
const srNameRegex = /https:[/][/](www|old|new)[.]reddit[.]com[/]r[/](\w+)/g;
const match = srNameRegex.exec(document.location.href);
return match[2];
}
function cleanUpCommunityIcon(url) {
if (!url || url.length === 0) {
return url;
}
function htmlDecode(input) {
const doc = new DOMParser().parseFromString(input, 'text/html');
return doc.documentElement.textContent;
}
const decodedUrl = htmlDecode(url);
return decodedUrl;
}
setSubredditIcon();
})();