AH/DLP/QQ/SB/SV highlight visited & watched

Greasy Fork is available in English.
AH/DLP/QQ/SB/SV highlight visited & watched

Highlights visited & watched links on AH/DLP/QQ/SB/SV forums.
当前为 2024-10-04 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name AH/DLP/QQ/SB/SV highlight visited & watched
// @description Highlights visited & watched links on AH/DLP/QQ/SB/SV forums.
// @author C89sd
// @version 1.0.1
// @match https://forum.questionablequesting.com/*
// @match https://forums.spacebattles.com/*
// @match https://forums.sufficientvelocity.com/*
// @match https://forums.darklordpotter.net/*
// @match https://www.alternatehistory.com/*
// @grant GM_setValue
// @grant GM_getValue
// @namespace http://greasyfork.icu/users/1376767
// ==/UserScript==


// Toasts via LocalStorage reload
const toast = document.createElement('div');
toast.id = 'toast';
toast.style.position = 'fixed';
toast.style.bottom = '20px';
toast.style.right = '20px';
toast.style.backgroundColor = '#333';
toast.style.color = '#fff';
toast.style.padding = '10px';
toast.style.borderRadius = '5px';
toast.style.opacity = '0';
toast.style.display = 'none';
toast.style.transition = 'opacity 0.5s ease';
toast.style.zIndex = '1000';
document.body.appendChild(toast);

function _showToast(message, duration = 3000) {
toast.textContent = message;
toast.style.display = 'block';
setTimeout(() => { toast.style.opacity = '1'; }, 10);
setTimeout(() => { toast.style.opacity = '0'; }, duration - 500);
setTimeout(() => { toast.style.display = 'none'; }, duration);
}
function showToast(message) {
localStorage.setItem('toastMessage', message);
}
function showToastOnPageLoad() {
const message = localStorage.getItem('toastMessage');
if (message) {
_showToast(message);
localStorage.removeItem('toastMessage');
}
}
window.addEventListener('load', showToastOnPageLoad);


// Colors & Functions
const dom = window.location.hostname;
const sites = ['spacebattles.com', 'sufficientvelocity.com', 'questionablequesting.com', 'alternatehistory.com', 'darklordpotter.net'];
const [isSB, isSV, isQQ, isAH, isDLP] = sites.map(site => dom.includes(site));

const highlightColor =
isSB ? 'rgb(223, 166, 255)'
: isDLP ? 'rgb(183, 128, 215)'
: isSV ? 'rgb(152, 100, 184)'
: 'rgb(119, 69, 150)'
const highlightYellowColor =
isSB ? 'rgb(223, 185, 0)'
: isDLP ? 'rgb(180, 147, 0)'
: isSV ? 'rgb(209, 176, 44)'
: 'rgb(145, 117, 0)'

const threadRegex = new RegExp(`(${sites.map(s => s.replace('.', '\\.')).join('|')}).*?/threads/`);
function isThreadUrl(url) {
  console.log(threadRegex);
  return threadRegex.test(url);
}

function extractThreadName(url) { // e.g "site.com/threads/[foo-bar].0000/"
let name = url;
name = name.replace(/.*?\/threads\//, '');
name = name.replace(/\/.*/, '');
name = name.replace(/\.\d+$/, '');
return name;
}

const THREAD_NAME = isThreadUrl(window.location.href) ? extractThreadName(window.location.href) : '~/~'; // ensure no-match


// Plugin Storage
function Storage_ReadMap() {
const rawData = GM_getValue("JvCSS", '{}');
try {
return JSON.parse(rawData);
} catch (e) {
alert('Failed to parse stored data:', e);
}
}
function Storage_AddEntry(key, val) {
var upToDateMap = Storage_ReadMap() // in case another tab wrote to it
if (upToDateMap[key]) { // preserve oldest time
} else {
upToDateMap[key] = val;
GM_setValue("JvCSS", JSON.stringify(upToDateMap));
}
}
function removeMostRecentEntry() {
const map = Storage_ReadMap();
let mostRecentKey = null;
let mostRecentDate = '';

for (const [key, date] of Object.entries(map)) {
if (date >= mostRecentDate) {
mostRecentDate = date;
mostRecentKey = key;
}
}
if (mostRecentKey) {
delete map[mostRecentKey];
GM_setValue("JvCSS", JSON.stringify(map));
showToast(`REMOVED\n${mostRecentKey} ${mostRecentDate}`);
window.location.reload(); // restore old color that was overwritten
}
}


(() => {
"use strict";

const footer = document.createElement('div');
footer.style.width = '100%';
footer.style.padding = '5px';
footer.style.display = 'flex';
footer.style.justifyContent = 'center';
footer.style.gap = '10px';
footer.class = 'footer';

const BTN_1 = isSV ? ['button', 'button--link'] : ['button']
const BTN_2 = isSV ? ['button'] : (isDLP ? ['button', 'primary'] : ['button', 'button--link'])
const exportButton = document.createElement('button');
exportButton.textContent = 'Backup';
exportButton.classList.add(...BTN_1);
if (isSV) { exportButton.style.filter = 'brightness(82%)'; }
exportButton.addEventListener('click', exportVisitedLinks);
footer.appendChild(exportButton);

const importButton = document.createElement('button');
importButton.textContent = 'Restore';
importButton.classList.add(...BTN_1);
if (isSV) { importButton.style.filter = 'brightness(82%)'; }
importButton.addEventListener('click', importVisitedLinks);
footer.appendChild(importButton);

const updateButton = document.createElement('button');
updateButton.textContent = 'Remove latest highlight';
updateButton.classList.add(...BTN_2);
updateButton.addEventListener('click', removeMostRecentEntry);
footer.appendChild(updateButton);

const xFooter = document.querySelector('footer.p-footer');
if (xFooter) { xFooter.insertAdjacentElement('afterbegin', footer); }
else { document.body.appendChild(footer); }

function exportVisitedLinks() {
const data = GM_getValue("JvCSS", '{}');
const blob = new Blob([data], {type: 'application/json'});
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'visited_links_backup.json';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}

function importVisitedLinks() {
const input = document.createElement('input');
input.type = 'file';
input.accept = '.json';
input.onchange = function(event) {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = function(e) {
try {
 const data = JSON.parse(e.target.result);
 GM_setValue("JvCSS", JSON.stringify(data));
 alert('Visited links imported successfully. Page will refresh.');
 window.location.reload();
} catch (error) {
 alert('Error importing file. Please make sure it\'s a valid JSON file.');
}
};
reader.readAsText(file);
};
input.click();
}

// Set link colors
const applyLinkStyles = () => {
const visitedLinks = Storage_ReadMap();
const links = document.getElementsByTagName("a");

for (let link of links) {
const href = link.href;
if (isThreadUrl(href)) {

const threadName = extractThreadName(href);
if (threadName == THREAD_NAME) { continue; }

// seen
if (visitedLinks[threadName]) { link.style.color = highlightColor; }

// watched
const parent = isDLP
  ? link.closest('div.titleText')
  : link.closest('div.structItem');
const hasIcon = isDLP
  ? parent && parent.getElementsByClassName('fa-eye').length > 0
  : parent && parent.getElementsByClassName('structItem-status--watched').length > 0;
if (hasIcon) {
  link.style.color = highlightYellowColor;
}

// only add listeners once
if (!link.hasAttribute('data-click-listener-added')) {
 function clickHandler(event) { Storage_AddEntry(extractThreadName(this.href), new Date().toISOString().slice(0, 19).replace(/[-:T\.]/g, '')); }
 link.addEventListener("click", clickHandler);
 link.setAttribute('data-click-listener-added', 'true');
}

}
}
};

// Apply styles on load
applyLinkStyles();
// Apply styles when navigating back
window.addEventListener('pageshow', (event) => {
if (event.persisted) {
  applyLinkStyles();
}
});
})();