Addon to highlight seen/unseen/skipped AO3 links across reddit. Also keeps a separate seen/skipped backup that it will provide if it detects cookies were accidentally cleared.
// ==UserScript==
// @name Old Reddit highlighter + Live backup for Min_'s "AO3: kudosed seen history"
// @description Addon to highlight seen/unseen/skipped AO3 links across reddit. Also keeps a separate seen/skipped backup that it will provide if it detects cookies were accidentally cleared.
// @namespace https://greasyfork.org/users/1376767
// @author C89sd
// @version 1.14
// @include https://archiveofourown.org/*
// @include https://old.reddit.com/favicon.ico
// @grant GM_setValue
// @grant GM_getValue
// @grant GM_addStyle
// @grant GM_setClipboard
// @run-at document-start
// @include /^https:\/\/old\.reddit\.com\/r\/[^\/]*\/comments\//
// ==/UserScript==
/* To run only on a few subs: replace the @include above with the one below and customise it.
// @include /^https:\/\/old\.reddit\.com\/r\/(?:AO3|HP|masseffect|TheCitadel|[^\/]*?(?:[Ff]an[Ff]ic|[Hh]ero))[^\/]*\/comments\//
This matches:
- Anything starting with (?:AO3|HP|masseffect|TheCitadel)
- Anything containing (?:FanFic|Fanfic|fanfic|fanFic|Hero|hero) // note: case-insensitive is not supported and must be done manually.
*/
'use strict';
// =====================================================================
// Navback-safe GM get/set
// =====================================================================
const DEBUG = false;
// -------------------------------------- Iframe
if (window.self !== window.top) {
{ // !Security
const ALLOWED_PARENT_DOMAINS = [
'https://old.reddit.com',
'https://archiveofourown.org',
];
const isTopDomainAuthorized = ALLOWED_PARENT_DOMAINS.includes(window.top.location.origin);
const isIframeURLAllowed = window.location.origin === window.top.location.origin && window.location.pathname === '/favicon.ico';
const isDirectChildOfTop = (window.parent === window.top);
if (!(isTopDomainAuthorized && isIframeURLAllowed && isDirectChildOfTop)) {
console.error('Iframe security violation.', { isTopDomainAuthorized, isIframeURLAllowed, isDirectChildOfTop, iframeLocation: window.location.href, topLocation: window.top.location.href })
return;
}
if (DEBUG) console.log("Iframe security checks passed: Running in an authorized context.");
}
unsafeWindow.top.GMproxy3 = {
setValue: (key, val) => {
if (DEBUG) console.log('Iframe SET', {key, length: val.length});
return GM_setValue(key, val);
},
getValue: (key, def) => {
const res = GM_getValue(key, def);
if (DEBUG) console.log('Iframe GET', {key, def, length: res.length});
return res;
}
}
window.parent.postMessage('R', '*');
if (DEBUG) console.log('Iframe message sent.');
return; // --> [Exit] <--
}
// -------------------------------------- Main
let dontBotherReloadingThereAreNoLinks = false;
const cleanupCtrl = new AbortController();
const cleanupSig = cleanupCtrl.signal;
// ------------
let GMproxy3 = {}
let iframe = null;
let iframeReady = false;
const _setValue = GM_setValue;
const _getValue = GM_getValue;
GM_setValue = (key, val) => {
if (iframe) {
if (iframeReady) return GMproxy3.setValue(key, val);
else throw new Error(`GM_setValue, Iframe not ready, key=${key}`);
} else {
if (DEBUG) console.log('Main SET', {key, length: val.length});
return _setValue(key, val);
}
}
GM_getValue = (key, def) => {
if (iframe) {
if (iframeReady) return GMproxy3.getValue(key, def);
else throw new Error(`GM_getValue, Iframe not ready, key=${key}`);
} else {
const res = _getValue(key, def);
if (DEBUG) console.log('Main GET', {key, def, length: res.length});
return res;
}
}
let backForwardQueue = [];
function onBackForward(fn) {
backForwardQueue.push(fn);
}
window.addEventListener('pageshow', (e) => {
if (DEBUG) console.log('pageshow persisted=', e.persisted);
if (e.persisted && !dontBotherReloadingThereAreNoLinks) {
const oldIframe = document.getElementById('gmproxy3');
if (oldIframe) oldIframe.remove();
iframeReady = false;
iframe = document.createElement('iframe');
iframe.id = 'gmproxy3';
iframe.style.display = 'none';
iframe.referrerPolicy = 'no-referrer';
iframe.src = location.origin + '/favicon.ico';
document.body.appendChild(iframe);
const my_iframe = iframe;
const controller = new AbortController();
const onHide = (ev) => {
if (DEBUG) console.log('Iframe aborted (pagehide).');
controller.abort();
};
const onMsg = (ev) => {
if (my_iframe !== iframe) {
if (DEBUG) console.log('ERROR ! my_iframe !== iframe')
controller.abort();
return;
}
if (ev.source === iframe.contentWindow && ev.data === 'R') {
GMproxy3 = unsafeWindow.GMproxy3;
iframeReady = true;
controller.abort();
if (DEBUG) console.log('Iframe message received. GMproxy3=', GMproxy3);
if (DEBUG) console.log('Running onBackForward fns=', backForwardQueue);
backForwardQueue.forEach((fn) => { fn() });
}
};
window.addEventListener('message', onMsg, { signal: controller.signal });
window.addEventListener('pagehide', onHide, { signal: controller.signal });
}
}, { cleanupSig })
const _addEventListener = window.addEventListener;
window.addEventListener = (type, listener, options) => {
if (type === 'pageshow') {
throw new Error('Cannot register "pageshow" event listener, use onBackForward(fn)');
}
_addEventListener(type, listener, options);
};
// =====================================================================
// Main
// =====================================================================
const url = window.location.href;
const IS_AO3 = url.startsWith('https://archiveofourown.org');
const IS_REDDIT = !IS_AO3;
let applyingForSecondTime = false; // skip removing classes 1rst time
// Find all highlightable links on ao3 and reddit
let ao3LinksAndIds = [];
document.addEventListener("DOMContentLoaded", () => {
if (DEBUG) console.log('DOMContentLoaded getting links');
const workIdRegex = /\/works\/(\d+)/;
const seriesRegex = /\/series\/\d/;
// [el, workId, isSeries]
const links = document.querySelectorAll('a[href*="archiveofourown.org/"]');
for (const link of links) {
const href = link.getAttribute('href');
const match = workIdRegex.exec(href);
if (match) {
ao3LinksAndIds.push([link, match[1], false]);
} else {
if (seriesRegex.test(href)) {
ao3LinksAndIds.push([link, null, true]);
}
}
}
if (ao3LinksAndIds.length === 0) {
if (DEBUG) console.log('DOMContentLoaded 0 links, abort!');
dontBotherReloadingThereAreNoLinks = true;
cleanupCtrl.abort();
}
else {
if (DEBUG) console.log('DOMContentLoaded links=', ao3LinksAndIds);
}
}, { cleanupSig });
if (IS_AO3) {
if (DEBUG) console.log('AO3 PATH');
// Note: 'storage' events come from other tabs only.
// Since the script is by definition in every AO3 tab, we don't need it.
// Just override Storage.prototype.setItem.
// Note: data loss can happend from a corrupted write, we must check old vs new at every write.
// If loss is detected, we may trigger a second notice if the second key triggers.
// This is bad because the notice overwrite the old value, so the next notice would serve an outdated backup.
// We write a per-key lock flag to storage that gets read before triggering a notice.
// The lock key is removed at every succcessfull write.
const LOCK_PREFIX = 'khxr_lock_';
function maybeAlertAndBackup(GMkey, newVal) {
const oldVal = GM_getValue(GMkey, ',');
const oldLength = oldVal.split(',').length;
const newLength = newVal.split(',').length;
if (oldLength > 30) { // This is an old key, it makes sense to check for data loss.
const diff = newLength - oldLength;
if (diff <= -30) // AO3 pages have ~20 posts. Even if you press the forget button, losing 30 while we monitor is unlikely!
{
// Key is locked, probably a repeat after data-loss. We already exported and overwrote half our data.
if (localStorage.getItem(LOCK_PREFIX + GMkey)) {
alert('⚠️ [userscript][Reddit highlighter-Kudosed history]\nData-loss detected in the second key "'+GMkey+'".\nIt was already exported in the previously offered backup.\n\nSkipping and overwriting.')
return;
}
// This is the first key to encouter data loss, lock the other, the data is about to be corrupted by overwrite.
const OPPOSITE = { seen: 'skipped', skipped: 'seen' };
localStorage.setItem(LOCK_PREFIX + OPPOSITE[GMkey], '1');
// Backup and warn user while we can.
let tempKey = 'khxr_backup_'+new Date().toISOString().slice(0,19).replace(/[-:T]/g,'');
const backup = JSON.stringify({seen: GM_getValue('seen', ','), skipped: GM_getValue('skipped', ',')});
localStorage.setItem(tempKey, backup);
GM_setClipboard(backup, "text");
console.warn(backup)
alert('⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️\n[userscript][Reddit highlighter-Kudosed history]\n ❌❌ 𝐃𝐀𝐓𝐀 𝐋𝐎𝐒𝐒 𝐃𝐄𝐓𝐄𝐂𝐓𝐄𝐃! ❌❌ \n\n(' + (-diff) + ') "' + GMkey + '" fics have disappeared from your "AO3 Kudosed and Seen History" _outside_ of this script\'s live monitoring.\n\n🗑️ Were your cookies cleared and your seen/skipped data deleted?\n\n🛟 Backups have juste been made to:\n - 🧾 The devtools error log of this page.\n - 💾 AO3 localStorage "' + tempKey + '"\n - 📋 and pasted to your clipboard in the "Import your lists" settings format used by Kudosed&SeenHistory v2.2.1.\n\nStorage has been overwritten with new values, message will not repeat.\nNote: maybe this script is outdated and does not recognise a newer version\'s data, do you own checks.');
}
else
{ // Value matches our knowlegde, we can trust it again, unlock this key.
localStorage.removeItem(LOCK_PREFIX + GMkey);
}
}
}
// Override Storage.prototype.setItem
const originalSetItem = Storage.prototype.setItem;
Storage.prototype.setItem = function(key, value) {
if (DEBUG) console.log('setItem() intercepted,length:', key, value.length);
if (iframe && !iframeReady) {
console.warn(`AO3 Exporter: iframe && !iframeReady, skipped change`);
} else {
if (key === 'kudoshistory_seen') {
maybeAlertAndBackup('seen', value);
GM_setValue('seen', value);
if (DEBUG) console.log('interecpted seen[:100],', value.slice(0, 100));
}
if (key === 'kudoshistory_skipped') {
maybeAlertAndBackup('skipped', value);
GM_setValue('skipped', value);
}
}
// Call the original method
return originalSetItem.call(this, key, value);
};
return;
}
// --------------------- REDDIT
const MAX_RETRIES = 20;
const RETRY_DELAY = 100;
let retryCount = 0;
function updateHighlight() {
if (dontBotherReloadingThereAreNoLinks) return;
// fetch up to date seen list
if (iframe && !iframeReady) {
if (DEBUG) console.warn(`AO3 Exporter: iframe && !iframeReady, retries=`, retryCount);
if (retryCount >= MAX_RETRIES) {
console.error(`iframe not ready after ${MAX_RETRIES} attempts`);
retryCount = 0;
return
}
retryCount++;
setTimeout(updateHighlight, RETRY_DELAY);
return
}
retryCount = 0;
const seen = GM_getValue('seen', '');
const skipped = GM_getValue('skipped', '');
function isInList(list, workId) { return list.indexOf(',' + workId + ',') > -1; }
if (DEBUG) console.log('highlight seen[:100],', seen.slice(0, 100));
if (DEBUG) console.log('... doing updateHighlight(', ao3LinksAndIds.length ,')');
for (const [link, id, isSeries] of ao3LinksAndIds) {
if (isSeries) {
link.classList.add('khxr-series');
} else {
link.classList.add('khxr-work');
if (applyingForSecondTime) link.classList.remove('khxr-seen', 'khxr-skipped');
if (isInList(seen, id)) link.classList.add('khxr-seen');
if (isInList(skipped, id)) link.classList.add('khxr-skipped');
}
}
applyingForSecondTime = true;
}
if (IS_REDDIT) {
if (DEBUG) console.log('REDDIT PATH');
// Apply styles on load
// note: nested for early exit
document.addEventListener("DOMContentLoaded", () => {
if (DEBUG) console.log('updateHighlight() DOMContentLoaded');
const DM=+getComputedStyle(document.querySelector('.md')).color.match(/\d+/)[0]>128;
if (DM) GM_addStyle(`
.khxr-work {color: rgb(217, 101, 76) !important; text-decoration: underline !important; }
.khxr-skipped {color: rgb(167, 155, 93) !important; text-decoration: dashed underline !important;}
.khxr-seen {color: rgb(91, 174, 93) !important; text-decoration: dashed underline !important;}
.khxr-series::before {content: "⧉"; margin-right: 0.3em; text-decoration: none !important; }
`);
else GM_addStyle(`
.khxr-work {color: rgb(201, 38, 4) !important; text-decoration: underline !important; }
.khxr-skipped {color: rgb(131, 110, 0) !important; text-decoration: dashed underline !important;}
.khxr-seen {color: rgb(39, 145, 41) !important; text-decoration: dashed underline !important;}
.khxr-series::before {content: "⧉"; margin-right: 0.3em; text-decoration: none !important; }
`);
updateHighlight();
// Apply styles when navigating back
onBackForward(() => {
if (DEBUG) console.log('updateHighlight() onBackForward');
updateHighlight();
});
// Apply styles on tab change.
document.addEventListener('focus', () => { // focus in
if (DEBUG) console.log('updateHighlight() focus');
updateHighlight();
}, { cleanupSig });
document.addEventListener("visibilitychange", () => { // alt-tab in
if (!document.hidden) {
if (DEBUG) console.log('updateHighlight() visibilitychange');
updateHighlight();
}
}, { cleanupSig });
}, { cleanupSig });
return;
}