Injects new Reddit profile pictures into Old Reddit and Reddit-Stream.com next to the username. Caches in localstorage.
目前為
// ==UserScript==
// @name Old Reddit with New Reddit Profile Pictures - Universal Version
// @namespace https://github.com/Nick2bad4u/UserStyles
// @version 4.2
// @description Injects new Reddit profile pictures into Old Reddit and Reddit-Stream.com next to the username. Caches in localstorage.
// @author Nick2bad4u
// @match *://*.reddit.com/*
// @match *://reddit-stream.com/*
// @connect reddit.com
// @connect reddit-stream.com
// @grant GM_xmlhttpRequest
// @homepageURL https://github.com/Nick2bad4u/UserStyles
// @license Unlicense
// @resource https://www.google.com/s2/favicons?sz=64&domain=reddit.com
// @icon https://www.google.com/s2/favicons?sz=64&domain=reddit.com
// @icon64 https://www.google.com/s2/favicons?sz=64&domain=reddit.com
// @run-at document-start
// @tag reddit
// ==/UserScript==
(function () {
'use strict';
console.log('Script loaded');
let profilePictureCache = JSON.parse(localStorage.getItem('profilePictureCache') || '{}');
let cacheTimestamps = JSON.parse(localStorage.getItem('cacheTimestamps') || '{}');
const CACHE_DURATION = 7 * 24 * 60 * 60 * 1000; // 7 days in milliseconds
const MAX_CACHE_SIZE = 25000; // Maximum number of cache entries
function saveCache() {
localStorage.setItem('profilePictureCache', JSON.stringify(profilePictureCache));
localStorage.setItem('cacheTimestamps', JSON.stringify(cacheTimestamps));
}
function flushOldCache() {
console.log('Flushing old cache');
const now = Date.now();
for (const username in cacheTimestamps) {
if (now - cacheTimestamps[username] > CACHE_DURATION) {
console.log(`Deleting cache for ${username}`);
delete profilePictureCache[username];
delete cacheTimestamps[username];
}
}
saveCache();
console.log('Old cache entries flushed');
}
function limitCacheSize() {
const cacheEntries = Object.keys(profilePictureCache);
if (cacheEntries.length > MAX_CACHE_SIZE) {
console.log('Cache size exceeded, removing oldest entries');
const sortedEntries = cacheEntries.sort((a, b) => cacheTimestamps[a] - cacheTimestamps[b]);
const entriesToRemove = sortedEntries.slice(0, cacheEntries.length - MAX_CACHE_SIZE);
entriesToRemove.forEach((username) => {
delete profilePictureCache[username];
delete cacheTimestamps[username];
});
saveCache();
console.log('Cache size limited');
}
}
async function fetchProfilePictures(usernames) {
console.log('Fetching profile pictures');
const uncachedUsernames = usernames.filter(
(username) =>
!profilePictureCache[username] && username !== '[deleted]' && username !== '[removed]'
);
if (uncachedUsernames.length === 0) {
console.log('All usernames are cached');
return usernames.map((username) => profilePictureCache[username]);
}
console.log(`Fetching profile pictures for: ${uncachedUsernames.join(', ')}`);
const fetchPromises = uncachedUsernames.map(async (username) => {
try {
const response = await fetch(`https://www.reddit.com/user/${username}/about.json`);
if (!response.ok) {
console.error(`Error fetching profile picture for ${username}: ${response.statusText}`);
return null;
}
const data = await response.json();
if (data.data && data.data.icon_img) {
const profilePictureUrl = data.data.icon_img.split('?')[0];
profilePictureCache[username] = profilePictureUrl;
cacheTimestamps[username] = Date.now();
saveCache();
console.log(`Fetched profile picture: ${username}`);
return profilePictureUrl;
} else {
console.warn(`No profile picture found for: ${username}`);
return null;
}
} catch (error) {
console.error(`Error fetching profile picture for ${username}:`, error);
return null;
}
});
const results = await Promise.all(fetchPromises);
limitCacheSize();
return usernames.map((username) => profilePictureCache[username]);
}
async function injectProfilePictures(comments) {
console.log(`Comments found: ${comments.length}`);
const usernames = Array.from(comments)
.map((comment) => comment.textContent.trim())
.filter((username) => username !== '[deleted]' && username !== '[removed]');
const profilePictureUrls = await fetchProfilePictures(usernames);
comments.forEach((comment, index) => {
const username = usernames[index];
const profilePictureUrl = profilePictureUrls[index];
if (
profilePictureUrl &&
!comment.previousElementSibling?.classList.contains('profile-picture')
) {
console.log(`Injecting profile picture: ${username}`);
const img = document.createElement('img');
img.src = profilePictureUrl;
img.classList.add('profile-picture');
img.onerror = () => {
img.style.display = 'none';
};
img.addEventListener('click', () => {
window.open(profilePictureUrl, '_blank');
});
comment.insertAdjacentElement('beforebegin', img);
const enlargedImg = document.createElement('img');
enlargedImg.src = profilePictureUrl;
enlargedImg.classList.add('enlarged-profile-picture');
document.body.appendChild(enlargedImg);
img.addEventListener('mouseover', () => {
enlargedImg.style.display = 'block';
const rect = img.getBoundingClientRect();
enlargedImg.style.top = `${rect.top + window.scrollY + 20}px`;
enlargedImg.style.left = `${rect.left + window.scrollX + 20}px`;
});
img.addEventListener('mouseout', () => {
enlargedImg.style.display = 'none';
});
}
});
console.log('Profile pictures injected');
}
function setupObserver() {
console.log('Setting up observer');
const observer = new MutationObserver((mutations) => {
const comments = document.querySelectorAll('.author, .c-username');
if (comments.length > 0) {
console.log('New comments detected');
observer.disconnect();
injectProfilePictures(comments);
}
});
observer.observe(document.body, {
childList: true,
subtree: true,
});
console.log('Observer initialized');
}
function runScript() {
flushOldCache();
console.log('Cache loaded:', profilePictureCache);
setupObserver();
}
window.addEventListener('load', () => {
console.log('Page loaded');
runScript();
setInterval(runScript, 10000); // Run every 10 seconds
});
const style = document.createElement('style');
style.textContent = `
.profile-picture {
width: 20px;
height: 20px;
border-radius: 50%;
margin-right: 5px;
transition: transform 0.2s ease-in-out;
position: relative;
z-index: 1;
cursor: pointer;
}
.enlarged-profile-picture {
width: 250px;
height: 250px;
border-radius: 50%;
position: absolute;
display: none;
z-index: 1000;
pointer-events: none;
outline: 3px solid #000;
box-shadow: 0 4px 8px rgba(0, 0, 0, 1);
background-color: rgba(0, 0, 0, 1);
}
`;
document.head.appendChild(style);
})();