MeFi Navigator Redux

MetaFilter: navigate through users' comments, and highlight comments by OP and yourself

Устаревшая версия за 29.03.2025. Перейдите к последней версии.

Чтобы установить этот скрипт, вы сначала должны установить расширение браузера, например Tampermonkey, Greasemonkey или Violentmonkey.

Для установки этого скрипта вам необходимо установить расширение, такое как Tampermonkey.

Чтобы установить этот скрипт, вы сначала должны установить расширение браузера, например Tampermonkey или Violentmonkey.

Чтобы установить этот скрипт, вы сначала должны установить расширение браузера, например Tampermonkey или Userscripts.

Чтобы установить этот скрипт, сначала вы должны установить расширение браузера, например Tampermonkey.

Чтобы установить этот скрипт, вы должны установить расширение — менеджер скриптов.

(у меня уже есть менеджер скриптов, дайте мне установить скрипт!)

Чтобы установить этот стиль, сначала вы должны установить расширение браузера, например Stylus.

Чтобы установить этот стиль, сначала вы должны установить расширение браузера, например Stylus.

Чтобы установить этот стиль, сначала вы должны установить расширение браузера, например Stylus.

Чтобы установить этот стиль, сначала вы должны установить расширение — менеджер стилей.

Чтобы установить этот стиль, сначала вы должны установить расширение — менеджер стилей.

Чтобы установить этот стиль, сначала вы должны установить расширение — менеджер стилей.

(у меня уже есть менеджер стилей, дайте мне установить скрипт!)

// ==UserScript==
// @name         MeFi Navigator Redux
// @namespace    https://github.com/klipspringr/mefi-userscripts
// @version      2025-03-29-b
// @description  MetaFilter: navigate through users' comments, and highlight comments by OP and yourself
// @author       Klipspringer
// @supportURL   https://github.com/klipspringr/mefi-userscripts
// @license      MIT
// @match        *://*.metafilter.com/*
// @grant        none
// ==/UserScript==

const SELF_HTML =
    '<span style="padding:0 4px;margin-left:4px;background-color:#C8E0A1;color:#000;font-size:0.8em;border-radius:2px;">me</span>';

const getCookie = (key) => {
    const s = RegExp(key + "=([^;]+)").exec(document.cookie);
    if (!s || !s[1]) return null;
    return decodeURIComponent(s[1]);
};

const createLink = (href, content) => {
    const a = document.createElement("a");
    a.setAttribute("href", href);
    a.textContent = content;
    return a;
};

const markSelf = (targetNode) =>
    targetNode.insertAdjacentHTML("afterend", SELF_HTML);

const markOP = (targetNode) => {
    const wrapper = targetNode.parentNode.parentNode;
    wrapper.style["border-left"] = "5px solid #0004"; // 40% black
    wrapper.style["padding-left"] = "10px";
};

const processByline = (
    bylineNode,
    user,
    anchor,
    anchors,
    firstRun,
    self = null,
    op = null
) => {
    // don't mark self or OP more than once
    if (firstRun || !bylineNode.hasAttribute("data-mfnr-byline")) {
        if (self !== null && user === self) markSelf(bylineNode);
        if (op !== null && user === op) markOP(bylineNode);
        bylineNode.setAttribute("data-mfnr-byline", "");
    }

    if (anchors.length <= 1) return;

    const i = anchors.indexOf(anchor);
    const previous = anchors[i - 1];
    const next = anchors[i + 1];

    // if not first run, check for existing nav and remove it if exists
    if (!firstRun)
        bylineNode.parentNode.querySelector("span[data-mfnr-nav]")?.remove();

    const navigator = document.createElement("span");
    navigator.setAttribute("data-mfnr-nav", "");

    const navigatorNodes = [" ["];
    if (previous) navigatorNodes.push(createLink("#" + previous, "⮝"));
    navigatorNodes.push(anchors.length);
    if (next) navigatorNodes.push(createLink("#" + next, "⮟"));
    navigatorNodes.push("]");

    navigator.append(...navigatorNodes);
    bylineNode.parentNode.append(navigator);
};

const run = (firstRun = false) => {
    const start = performance.now();

    const subsite = window.location.hostname.split(".")[0];
    const self = getCookie("USER_NAME");

    // post node: first smallcopy in div.copy (works on all subsites, 2025-03-29)
    const postNode = document.querySelector(
        "div.copy > span.smallcopy > a:first-child"
    );
    const op = postNode.textContent;

    // initialise with post
    const bylines = [[op, "top"]];
    const mapUsersAnchors = new Map([[op, ["top"]]]);

    // comment nodes: smallcopy children of div.comments (works on all subsites, 2025-03-29)
    const commentNodes = document.querySelectorAll(
        "div.comments > span.smallcopy > a:first-child"
    );

    for (const node of commentNodes) {
        const user = node.textContent;

        const anchorElement =
            node.parentElement.parentElement.previousElementSibling;
        const anchor = anchorElement.getAttribute("name");

        bylines.push([user, anchor]);

        const anchors = mapUsersAnchors.get(user) ?? [];
        mapUsersAnchors.set(user, anchors.concat(anchor));
    }

    for (const [i, bylineNode] of [postNode, ...commentNodes].entries()) {
        processByline(
            bylineNode,
            bylines[i][0],
            bylines[i][1],
            mapUsersAnchors.get(bylines[i][0]),
            firstRun,
            self,
            subsite !== "ask" && i > 0 ? op : null // don't highlight OP on AskMe, as site already does
        );
    }

    console.log(
        "mefi-navigator-redux",
        firstRun ? "first-run" : "new-comments",
        1 + commentNodes.length,
        performance.now() - start
    );
};

(() => {
    if (!/^\/(\d|comments\.mefi)/.test(window.location.pathname)) return;

    const newCommentsElement = document.getElementById("newcomments");
    if (newCommentsElement) {
        const observer = new MutationObserver(run);
        observer.observe(newCommentsElement, { childList: true });
    }

    run(true);
})();