// ==UserScript==
// @name SubsPlease Fine Enhancer
// @namespace https://github.com/SonGokussj4/tampermonkey-subsplease-FineEnhancer
// @version 1.3.3
// @description Adds image previews and AniList ratings to SubsPlease release listings. Click ratings to refresh. Settings via menu commands. Also manage favorites with visual highlights.
// @author SonGokussj4
// @license MIT
// @match https://subsplease.org/
// @grant GM_xmlhttpRequest
// @connect graphql.anilist.co
// @grant GM_addStyle
// @grant GM_setValue
// @grant GM_getValue
// @grant GM_registerMenuCommand
// @run-at document-start
// ==/UserScript==
/* ------------------------------------------------------------------
* CONFIG & CONSTANTS
* ---------------------------------------------------------------- */
const DEBOUNCE_TIMER = 300; // ms
const CACHE_KEY = 'ratingCache';
const FAVORITES_KEY = 'spFavorites';
const CACHE_TTL_MS = 6 * 60 * 60 * 1000; // 6 hours
// Menu commands for quick settings
GM_registerMenuCommand('Settings', showSettingsDialog);
/* ------------------------------------------------------------------
* UTILITY FUNCTIONS
* ---------------------------------------------------------------- */
/** Simple debounce wrapper */
function debounce(func, wait) {
let timeout;
return function (...args) {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), wait);
};
}
/** Normalize anime title:
* - Remove episode markers like "— 01" / "- 03"
* - Remove episode ranges like "— 01-24"
* - Remove version markers like "— 01v2"
* - Remove "(Batch)" or other bracketed notes at the end
*/
function normalizeTitle(raw) {
const normalized = raw
.replace(/\s*\(Batch\)$/i, '') // remove "(Batch)" suffix
.replace(/\s*[–—-]\s*\d+(?:[vV]\d+)?(?:\s*-\s*\d+(?:[vV]\d+)?)?$/i, '')
.trim();
console.debug(`normalizeTitle: ${raw} --> ${normalized}`);
return normalized;
}
/** Convert milliseconds → "Xh Ym" */
function msToTime(ms) {
let totalSeconds = Math.floor(ms / 1000);
let hours = Math.floor(totalSeconds / 3600);
let minutes = Math.floor((totalSeconds % 3600) / 60);
return `${hours}h ${minutes}m`;
}
/** Normalize CSS size input into "NNpx" */
function normalizeSize(raw) {
if (typeof raw === 'number') return raw + 'px';
if (typeof raw === 'string') {
raw = raw.trim();
if (/^\d+$/.test(raw)) return raw + 'px';
if (/^\d+px$/.test(raw)) return raw;
}
return '64px';
}
function readRatingCache() {
try {
const raw = localStorage.getItem(CACHE_KEY);
if (!raw) return {};
const parsed = JSON.parse(raw);
return parsed && typeof parsed === 'object' ? parsed : {};
} catch (e) {
console.error('Failed to parse rating cache, clearing it.', e);
localStorage.removeItem(CACHE_KEY);
return {};
}
}
function writeRatingCache(cache) {
try {
localStorage.setItem(CACHE_KEY, JSON.stringify(cache));
} catch (e) {
console.error('Failed to write rating cache.', e);
}
}
const mediaRegistry = new Map();
const ratingFetches = new Map();
function getMediaEntry(normalizedTitle) {
let entry = mediaRegistry.get(normalizedTitle);
if (!entry) {
entry = {
releaseWrappers: new Set(),
releaseStars: new Set(),
ratingSpans: new Set(),
scheduleRows: new Set(),
scheduleStars: new Set(),
primaryTitle: null,
};
mediaRegistry.set(normalizedTitle, entry);
}
return entry;
}
function pruneDisconnected(set) {
for (const node of set) {
if (!node.isConnected) {
set.delete(node);
}
}
}
function applyFavoriteVisuals(normalizedTitle, isFav) {
const entry = getMediaEntry(normalizedTitle);
pruneDisconnected(entry.releaseWrappers);
for (const wrapper of entry.releaseWrappers) {
wrapper.classList.toggle('sp-favorite', isFav);
}
pruneDisconnected(entry.releaseStars);
for (const star of entry.releaseStars) {
star.innerHTML = isFav ? '★' : '☆';
star.style.color = isFav ? '#ffd700' : '#666';
star.title = isFav ? 'Click to remove favorite' : 'Click to add favorite';
}
pruneDisconnected(entry.scheduleRows);
for (const row of entry.scheduleRows) {
row.classList.toggle('sp-schedule-favorite', isFav);
}
pruneDisconnected(entry.scheduleStars);
for (const star of entry.scheduleStars) {
star.innerHTML = isFav ? '★' : '☆';
star.style.color = isFav ? '#ffd700' : '#666';
star.title = isFav ? 'Click to remove favorite' : 'Click to add favorite';
}
}
function refreshFavoriteVisuals(normalizedTitle) {
const favorites = getFavorites();
const isFav = !!favorites[normalizedTitle];
applyFavoriteVisuals(normalizedTitle, isFav);
return isFav;
}
function registerReleaseElements(normalizedTitle, { wrapper, star, ratingSpan, originalTitle }) {
const entry = getMediaEntry(normalizedTitle);
if (wrapper) entry.releaseWrappers.add(wrapper);
if (star) entry.releaseStars.add(star);
if (ratingSpan) entry.ratingSpans.add(ratingSpan);
if (originalTitle && !entry.primaryTitle) entry.primaryTitle = originalTitle;
refreshFavoriteVisuals(normalizedTitle);
}
function registerScheduleElements(normalizedTitle, { row, star, originalTitle }) {
const entry = getMediaEntry(normalizedTitle);
if (row) entry.scheduleRows.add(row);
if (star) entry.scheduleStars.add(star);
if (originalTitle && !entry.primaryTitle) entry.primaryTitle = originalTitle;
refreshFavoriteVisuals(normalizedTitle);
}
/* ------------------------------------------------------------------
* FAVORITES MANAGEMENT
* ---------------------------------------------------------------- */
/** Get all favorites from localStorage */
function getFavorites() {
try {
return JSON.parse(localStorage.getItem(FAVORITES_KEY) || '{}');
} catch (e) {
console.error('Failed to parse favorites:', e);
return {};
}
}
/** Save favorites to localStorage */
function saveFavorites(favorites) {
try {
localStorage.setItem(FAVORITES_KEY, JSON.stringify(favorites));
} catch (e) {
console.error('Failed to save favorites:', e);
}
}
/** Check if a show is favorited */
function isFavorite(title) {
const normalizedTitle = normalizeTitle(title);
const favorites = getFavorites();
return !!favorites[normalizedTitle];
}
/** Toggle favorite status of a show */
function toggleFavorite(title) {
const normalizedTitle = normalizeTitle(title);
const favorites = getFavorites();
let isFav;
if (favorites[normalizedTitle]) {
delete favorites[normalizedTitle];
isFav = false;
} else {
favorites[normalizedTitle] = {
originalTitle: title,
timestamp: Date.now(),
};
isFav = true;
}
saveFavorites(favorites);
applyFavoriteVisuals(normalizedTitle, isFav);
return isFav;
}
/** Clear all favorites */
function clearAllFavorites() {
if (confirm('Are you sure you want to clear all favorites? This cannot be undone.')) {
localStorage.removeItem(FAVORITES_KEY);
location.reload(); // Refresh to update UI
}
}
/** Add favorite star to the time column */
function addFavoriteStar(cell, titleText, normalizedTitle) {
// Find the table row and the time cell
const row = cell.closest('tr');
if (!row) return;
const timeCell = row.querySelector('.release-item-time');
if (!timeCell) return;
// Create favorite star
const favoriteSpan = document.createElement('span');
favoriteSpan.className = 'sp-favorite-star';
favoriteSpan.style.cursor = 'pointer';
favoriteSpan.style.userSelect = 'none';
favoriteSpan.innerHTML = '☆';
favoriteSpan.style.color = '#666';
favoriteSpan.title = 'Click to toggle favorite';
favoriteSpan.dataset.title = titleText;
favoriteSpan.dataset.normalizedTitle = normalizedTitle;
favoriteSpan.addEventListener('click', (e) => {
e.stopPropagation();
toggleFavorite(titleText);
});
// Position the star at the top-right of the time cell
timeCell.style.position = 'relative';
timeCell.appendChild(favoriteSpan);
return favoriteSpan;
}
/* ------------------------------------------------------------------
* ANILIST FETCH + CACHE
* ---------------------------------------------------------------- */
/** Perform AniList GraphQL request */
function gmFetchAniList(query, variables) {
return new Promise((resolve, reject) => {
GM_xmlhttpRequest({
method: 'POST',
url: 'https://graphql.anilist.co',
headers: {
'Content-Type': 'application/json',
Accept: 'application/json',
},
data: JSON.stringify({ query, variables }),
onload: (response) => {
try {
console.log('Fetching ratings for:', JSON.stringify(variables.search));
resolve(JSON.parse(response.responseText));
} catch (e) {
reject(e);
}
},
onerror: reject,
});
});
}
/** Fetch AniList rating, with caching (6h TTL) */
async function fetchAniListRating(title, forceRefresh = false) {
const now = Date.now();
const cache = readRatingCache();
const cleanTitle = normalizeTitle(title);
const entry = cache[cleanTitle];
const hasEntry = !!entry;
const timestamp = entry?.timestamp ?? 0;
const age = hasEntry ? now - timestamp : Infinity;
const stale = hasEntry ? age >= CACHE_TTL_MS : false;
if (hasEntry && !forceRefresh) {
return {
score: Object.prototype.hasOwnProperty.call(entry, 'score') ? entry.score : null,
cached: true,
stale,
timestamp,
expires: timestamp + CACHE_TTL_MS,
};
}
const query = `
query ($search: String) {
Media(search: $search, type: ANIME) {
averageScore
}
}
`;
try {
const json = await gmFetchAniList(query, { search: cleanTitle });
const score = json?.data?.Media?.averageScore ?? null;
const latestCache = readRatingCache();
latestCache[cleanTitle] = { score, timestamp: now };
writeRatingCache(latestCache);
return { score, cached: false, stale: false, timestamp: now, expires: now + CACHE_TTL_MS };
} catch (err) {
console.error('AniList fetch failed:', err);
if (hasEntry) {
return {
score: Object.prototype.hasOwnProperty.call(entry, 'score') ? entry.score : null,
cached: true,
stale,
timestamp,
expires: timestamp + CACHE_TTL_MS,
failed: true,
};
}
return { score: null, cached: false, stale: false, timestamp: now, expires: now + CACHE_TTL_MS, failed: true };
}
}
/* ------------------------------------------------------------------
* RATING BADGE HANDLING
* ---------------------------------------------------------------- */
function getCachedRatingData(normalizedTitle) {
const cache = readRatingCache();
const entry = cache[normalizedTitle];
if (!entry) return null;
const timestamp = entry?.timestamp ?? 0;
const stale = Date.now() - timestamp >= CACHE_TTL_MS;
return {
score: Object.prototype.hasOwnProperty.call(entry, 'score') ? entry.score : null,
cached: true,
stale,
timestamp,
expires: timestamp + CACHE_TTL_MS,
failed: false,
};
}
function renderRatingSpan(span, data) {
if (!span || !span.isConnected) return;
if (data.loading) {
span.textContent = '…';
span.style.color = '#999';
span.title = data.message || 'Loading rating…';
return;
}
const hasScore = typeof data.score === 'number';
if (!hasScore) {
span.textContent = 'N/A';
span.style.color = '#999';
if (data.failed) {
span.title = 'AniList fetch failed\nClick to retry';
} else if (data.cached) {
if (data.stale) {
const age = Date.now() - (data.timestamp ?? Date.now());
span.title = `AniList rating not available (${msToTime(age)} old)\nRefreshing… Click to force refresh`;
} else {
span.title = 'AniList rating not available\nClick to refresh';
}
} else {
span.title = 'AniList rating not available\nClick to refresh';
}
return;
}
span.textContent = `⭐ ${data.score}%`;
if (!data.cached) {
span.style.color = data.failed ? '#cc4444' : '#00cc66';
span.title = data.failed ? 'AniList fetch failed\nClick to retry' : 'Fresh from AniList\nClick to refresh';
return;
}
const now = Date.now();
const ageMs = now - (data.timestamp ?? now);
if (data.stale) {
span.style.color = '#cc8800';
const staleDuration = msToTime(Math.max(0, ageMs - CACHE_TTL_MS));
span.title = data.failed
? `Refresh failed — showing cached rating (expired ${staleDuration} ago)\nClick to retry`
: `Using cached rating (${msToTime(ageMs)} old)\nRefreshing… Click to force refresh`;
return;
}
const remaining = Math.max(0, (data.expires ?? data.timestamp + CACHE_TTL_MS) - now);
span.style.color = '#ff9900';
span.title = data.failed
? `Refresh failed — showing cached (expires in ${msToTime(remaining)})\nClick to retry`
: `Loaded from cache (expires in ${msToTime(remaining)})\nClick to refresh`;
}
function renderRatingForTitle(normalizedTitle, data) {
const entry = getMediaEntry(normalizedTitle);
pruneDisconnected(entry.ratingSpans);
for (const span of entry.ratingSpans) {
renderRatingSpan(span, data);
}
}
function setRefreshingState(normalizedTitle) {
const entry = getMediaEntry(normalizedTitle);
pruneDisconnected(entry.ratingSpans);
for (const span of entry.ratingSpans) {
span.title = 'Refreshing rating…';
}
}
function ensureRatingForTitle(normalizedTitle, originalTitle, force = false) {
const cachedData = getCachedRatingData(normalizedTitle);
if (cachedData) {
renderRatingForTitle(normalizedTitle, cachedData);
} else {
renderRatingForTitle(normalizedTitle, { loading: true });
}
const shouldFetch = force || !cachedData || cachedData.stale;
if (!shouldFetch) {
return Promise.resolve(cachedData);
}
setRefreshingState(normalizedTitle);
if (ratingFetches.has(normalizedTitle)) {
return ratingFetches.get(normalizedTitle);
}
const entry = getMediaEntry(normalizedTitle);
const sourceTitle = originalTitle || entry.primaryTitle || normalizedTitle;
const fetchPromise = fetchAniListRating(sourceTitle, true)
.then((result) => {
renderRatingForTitle(normalizedTitle, result);
return result;
})
.catch((err) => {
console.error('Failed to refresh rating:', err);
const fallback = cachedData || {
score: null,
cached: false,
stale: false,
timestamp: Date.now(),
expires: Date.now() + CACHE_TTL_MS,
failed: true,
};
renderRatingForTitle(normalizedTitle, { ...fallback, failed: true });
throw err;
})
.finally(() => {
ratingFetches.delete(normalizedTitle);
});
ratingFetches.set(normalizedTitle, fetchPromise);
return fetchPromise;
}
/** Attach rating badge to a title */
function addRatingToTitle(titleDiv, titleText, normalizedTitle) {
const ratingSpan = document.createElement('span');
ratingSpan.style.marginLeft = '8px';
ratingSpan.style.cursor = 'pointer';
ratingSpan.textContent = '…';
ratingSpan.dataset.normalizedTitle = normalizedTitle;
titleDiv.appendChild(ratingSpan);
ratingSpan.addEventListener('click', (e) => {
e.stopPropagation();
ensureRatingForTitle(normalizedTitle, titleText, true);
});
return ratingSpan;
}
/* ------------------------------------------------------------------
* IMAGE PREVIEW + STYLES
* ---------------------------------------------------------------- */
function initScheduleFavorites() {
const rows = document.querySelectorAll('#schedule-table tr.schedule-widget-item:not(.sp-schedule-processed)');
if (!rows.length) return;
rows.forEach((row) => {
row.classList.add('sp-schedule-processed');
const showCell = row.querySelector('.schedule-widget-show');
const link = showCell?.querySelector('a');
if (!showCell || !link) return;
showCell.classList.add('sp-schedule-show');
const titleText = link.textContent.trim();
const normalizedTitle = normalizeTitle(titleText);
const star = document.createElement('span');
star.className = 'sp-schedule-favorite-star';
star.innerHTML = '☆';
star.style.cursor = 'pointer';
star.style.userSelect = 'none';
star.title = 'Click to toggle favorite';
star.dataset.title = titleText;
star.dataset.normalizedTitle = normalizedTitle;
star.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
toggleFavorite(titleText);
});
showCell.appendChild(star);
registerScheduleElements(normalizedTitle, { row, star, originalTitle: titleText });
});
}
/** Inject styles (only once) */
function ensureStyles() {
if (document.getElementById('sp-styles')) return;
const css = `
#releases-table td .sp-img-wrapper {
display: flex;
gap: 10px;
align-items: flex-start;
padding: 6px 0;
transition: all 0.3s ease;
border-radius: 8px;
position: relative;
}
.sp-thumb {
width: var(--sp-thumb-size, 64px);
height: auto;
object-fit: cover;
border-radius: 6px;
flex-shrink: 0;
transition: all 0.3s ease;
}
.sp-text {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.sp-title {
font-weight: 600;
margin-bottom: 4px;
}
.sp-badges {
margin-top: 6px;
}
.sp-favorite {
background: linear-gradient(90deg,
rgba(255, 215, 0, 0.2) 0%,
rgba(255, 215, 0, 0.14) 35%,
rgba(255, 215, 0, 0.08) 70%,
rgba(255, 215, 0, 0.03) 100%);
border-left: 3px solid rgba(255, 215, 0, 0.75);
padding-left: 10px;
margin-left: -3px;
box-shadow: 0 3px 12px rgba(255, 215, 0, 0.18);
}
.sp-favorite::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(to bottom,
rgba(255, 215, 0, 0.95) 0%,
rgba(255, 215, 0, 0.45) 50%,
rgba(255, 215, 0, 0.95) 100%);
border-radius: 1px;
}
.sp-favorite .sp-thumb {
box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
border: 1px solid rgba(255, 215, 0, 0.45);
}
.sp-favorite:hover {
background: linear-gradient(90deg,
rgba(255, 215, 0, 0.24) 0%,
rgba(255, 215, 0, 0.16) 35%,
rgba(255, 215, 0, 0.1) 70%,
rgba(255, 215, 0, 0.04) 100%);
}
.sp-favorite-star {
position: absolute;
top: 5px;
right: 5px;
font-size: 16px;
z-index: 10;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
transition: all 0.2s ease;
opacity: 0.7;
line-height: 1;
}
.sp-favorite-star:hover {
opacity: 1;
transform: scale(1.15);
}
.release-item-time {
position: relative;
}
.sp-schedule-show {
display: flex;
align-items: center;
gap: 8px;
justify-content: space-between;
}
.sp-schedule-show a {
flex: 1;
}
.sp-schedule-favorite {
background: linear-gradient(90deg,
rgba(255, 215, 0, 0.18) 0%,
rgba(255, 215, 0, 0.1) 65%,
rgba(255, 215, 0, 0.05) 100%);
border-left: 3px solid rgba(255, 215, 0, 0.7);
}
.sp-schedule-favorite .schedule-widget-show a {
font-weight: 600;
}
.sp-schedule-favorite-star {
font-size: 16px;
line-height: 1;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
opacity: 0.75;
transition: all 0.2s ease;
color: #666;
}
.sp-schedule-favorite-star:hover {
opacity: 1;
transform: scale(1.15);
}
`;
const style = document.createElement('style');
style.id = 'sp-styles';
style.textContent = css;
document.head.appendChild(style);
}
/** Attach images + ratings to release table */
function addImages() {
ensureStyles();
initScheduleFavorites();
// Load thumbnail size
const thumbSize = normalizeSize(GM_getValue('imageSize', '64px'));
document.documentElement.style.setProperty('--sp-thumb-size', thumbSize);
const links = document.querySelectorAll('#releases-table a[data-preview-image]:not(.processed)');
links.forEach((link) => {
if (!link || link.classList.contains('processed')) return;
link.classList.add('processed');
const imgUrl = link.getAttribute('data-preview-image') || '';
const cell = link.closest('td');
if (!cell) return;
// Build wrapper layout
const wrapper = document.createElement('div');
wrapper.className = 'sp-img-wrapper';
const img = document.createElement('img');
img.className = 'sp-thumb';
img.src = imgUrl;
img.alt = link.textContent.trim() || 'preview';
const textDiv = document.createElement('div');
textDiv.className = 'sp-text';
const titleDiv = document.createElement('div');
titleDiv.className = 'sp-title';
titleDiv.appendChild(link);
const titleText = link.textContent.trim();
const normalizedTitle = normalizeTitle(titleText);
// Add favorite star to time column
const star = addFavoriteStar(cell, titleText, normalizedTitle);
const ratingSpan = addRatingToTitle(titleDiv, titleText, normalizedTitle);
const badge = cell.querySelector('.badge-wrapper');
if (badge) {
badge.classList.add('sp-badges');
textDiv.appendChild(titleDiv);
textDiv.appendChild(badge);
} else {
textDiv.appendChild(titleDiv);
}
wrapper.appendChild(img);
wrapper.appendChild(textDiv);
cell.innerHTML = '';
cell.appendChild(wrapper);
registerReleaseElements(normalizedTitle, { wrapper, star, ratingSpan, originalTitle: titleText });
ensureRatingForTitle(normalizedTitle, titleText, false);
});
}
/* ------------------------------------------------------------------
* SETTINGS DIALOGS
* ---------------------------------------------------------------- */
/** Modal to change script settings */
function showSettingsDialog() {
const modal = document.createElement('div');
modal.id = 'settingsModal';
Object.assign(modal.style, {
position: 'fixed',
left: '0',
top: '0',
width: '100%',
height: '100%',
backgroundColor: 'rgba(0, 0, 0, 0.5)',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
zIndex: '9999',
});
const dialog = document.createElement('div');
Object.assign(dialog.style, {
backgroundColor: 'white',
border: '1px solid #ccc',
borderRadius: '5px',
padding: '20px',
width: '350px',
boxShadow: '0 4px 6px rgba(50,50,93,0.11), 0 1px 3px rgba(0,0,0,0.08)',
});
// Image size section
const imageSizeLabel = document.createElement('label');
imageSizeLabel.textContent = 'Image Preview Size:';
imageSizeLabel.style.display = 'block';
imageSizeLabel.style.marginBottom = '8px';
imageSizeLabel.style.fontWeight = 'bold';
const select = document.createElement('select');
select.id = 'imageSizeSelect';
select.style.width = '100%';
select.style.marginBottom = '20px';
[
{ text: 'Small (64px)', value: '64px' },
{ text: 'Medium (128px)', value: '128px' },
{ text: 'Large (225px)', value: '225px' },
].forEach((item) => {
const option = document.createElement('option');
option.value = item.value;
option.text = item.text;
select.appendChild(option);
});
select.value = GM_getValue('imageSize', '64px');
// Favorites section
const favoritesLabel = document.createElement('label');
favoritesLabel.textContent = 'Favorites Management:';
favoritesLabel.style.display = 'block';
favoritesLabel.style.marginBottom = '8px';
favoritesLabel.style.fontWeight = 'bold';
const favoritesCount = Object.keys(getFavorites()).length;
const favoritesInfo = document.createElement('div');
favoritesInfo.textContent = `Current favorites: ${favoritesCount}`;
favoritesInfo.style.marginBottom = '10px';
favoritesInfo.style.color = '#666';
favoritesInfo.style.fontSize = '14px';
const clearFavoritesButton = document.createElement('button');
clearFavoritesButton.textContent = 'Clear All Favorites';
Object.assign(clearFavoritesButton.style, {
backgroundColor: '#dc3545',
color: 'white',
border: 'none',
borderRadius: '5px',
padding: '8px 16px',
cursor: 'pointer',
fontSize: '14px',
width: '100%',
marginBottom: '20px',
});
clearFavoritesButton.onclick = () => {
document.body.removeChild(modal);
clearAllFavorites();
};
// Main buttons
const saveButton = document.createElement('button');
saveButton.textContent = 'Save';
Object.assign(saveButton.style, {
backgroundColor: '#007BFF',
color: 'white',
border: 'none',
borderRadius: '5px',
padding: '10px 20px',
cursor: 'pointer',
fontSize: '16px',
});
saveButton.onclick = () => {
GM_setValue('imageSize', select.value);
document.body.removeChild(modal);
document.documentElement.style.setProperty('--sp-thumb-size', select.value);
};
const closeButton = document.createElement('button');
closeButton.textContent = 'Close';
Object.assign(closeButton.style, {
backgroundColor: '#6c757d',
color: 'white',
border: 'none',
borderRadius: '5px',
padding: '10px 20px',
cursor: 'pointer',
fontSize: '16px',
});
closeButton.onclick = () => {
document.body.removeChild(modal);
};
const buttonsDiv = document.createElement('div');
buttonsDiv.style.display = 'flex';
buttonsDiv.style.gap = '10px';
buttonsDiv.style.marginTop = '10px';
buttonsDiv.appendChild(saveButton);
buttonsDiv.appendChild(closeButton);
dialog.appendChild(imageSizeLabel);
dialog.appendChild(select);
dialog.appendChild(favoritesLabel);
dialog.appendChild(favoritesInfo);
dialog.appendChild(clearFavoritesButton);
dialog.appendChild(buttonsDiv);
modal.appendChild(dialog);
document.body.appendChild(modal);
modal.addEventListener('click', (e) => {
if (e.target === modal) {
document.body.removeChild(modal);
}
});
}
/* ------------------------------------------------------------------
* ENTRYPOINT: Mutation observer
* ---------------------------------------------------------------- */
(function () {
'use strict';
const debouncedAddImages = debounce(addImages, DEBOUNCE_TIMER);
const observer = new MutationObserver((mutationsList) => {
for (const mutation of mutationsList) {
if (mutation.type === 'childList') {
for (const node of mutation.addedNodes) {
if (node.nodeType === Node.ELEMENT_NODE && node.querySelector('a[data-preview-image]:not(.processed)')) {
debouncedAddImages();
return;
}
}
}
}
});
observer.observe(document.documentElement, { childList: true, subtree: true });
})();
