linker/extension/content.js

// Reddit -> Spotify/Bandcamp linker (content script).
//
// On a reddit thread page it: pulls candidate artist names out of comment text,
// asks the local resolver service which ones are real artists, and rewrites those
// occurrences in place into links. The resolver does the hard "is this an artist"
// part; this script only handles extraction + DOM rewriting.

(() => {
  "use strict";

  const api = globalThis.browser ?? globalThis.chrome;
  const log = (...a) => console.log("[rsl]", ...a);

  // Candidate extraction is pure + lives in extract.js (loaded first per manifest order;
  // defines globalThis.RSLExtract) so it can be unit-tested in node. allMatchesIn(text)
  // returns {name,index,length} for Title-Case runs AND cue-phrase ("check out <x>") names.
  const Extract = globalThis.RSLExtract;

  // ---- DOM walking ----------------------------------------------------------
  const SKIP_TAGS = new Set([
    "A", "SCRIPT", "STYLE", "CODE", "PRE", "TEXTAREA", "INPUT", "BUTTON", "TIME", "NOSCRIPT", "SVG", "SELECT",
  ]);

  function inSkippable(node) {
    for (let el = node.parentElement; el; el = el.parentElement) {
      if (SKIP_TAGS.has(el.tagName)) return true;
      if (el.classList && el.classList.contains("rsl-link")) return true;
      if (el.isContentEditable) return true;
    }
    return false;
  }

  // New reddit's shreddit-* web components may render comment bodies inside an OPEN shadow
  // root. A TreeWalker can't cross a shadow boundary, so collectTextNodes walks `root`'s light
  // DOM AND, recursively, the open shadow roots of elements within that subtree — so it reaches
  // the comment text whether reddit slots it (light DOM) or encapsulates it (shadow DOM). Old
  // reddit has no shadow roots, so the recursion is a no-op there. The shadow walk is gated by
  // `allowShadow`: when the root is a narrow comment container the whole subtree is comment text,
  // so every shadow host is descended; on a BROAD fallback root (main/body) only a shadow host
  // that is itself a comment component is descended, so reddit's chrome shadow roots (nav,
  // sidebar, composer) are never walked. A slotted light-DOM node is reached only by the light
  // walk: a TreeWalker over a shadow root walks the shadow tree's own nodes, not a <slot>'s
  // assigned (light) nodes, so it isn't double-collected — a Set keyed on node identity is a
  // belt-and-braces guard. Closed shadow roots (`.shadowRoot === null`) stay unreachable.
  const MAX_SHADOW_DEPTH = 50; // bound the shadow-host recursion; a real comment tree is far shallower.

  function collectInto(root, nodes, seen, depth, allowShadow) {
    if (depth > MAX_SHADOW_DEPTH) return;
    // SHOW_TEXT to gather candidate text; SHOW_ELEMENT so we can spot shadow hosts to recurse into.
    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT, {
      acceptNode(node) {
        if (node.nodeType === Node.ELEMENT_NODE) {
          // Elements are visited only to discover shadow hosts; never collected as text.
          // On a broad root, only descend into comment-component hosts — never chrome.
          if (!node.shadowRoot) return NodeFilter.FILTER_SKIP;
          return (allowShadow || hostIsCommentComponent(node)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
        }
        const v = node.nodeValue;
        if (!v || v.length > 5000 || !/[A-Za-z]/.test(v)) return NodeFilter.FILTER_REJECT;
        if (inSkippable(node)) return NodeFilter.FILTER_REJECT;
        return NodeFilter.FILTER_ACCEPT;
      },
    });
    let n;
    while ((n = walker.nextNode())) {
      if (n.nodeType === Node.ELEMENT_NODE) {
        // Open shadow host (already gated above): descend. Inside a comment component the whole
        // shadow subtree is comment content, so further descent is unconditionally allowed.
        collectInto(n.shadowRoot, nodes, seen, depth + 1, true);
      } else if (!seen.has(n)) {
        seen.add(n);
        nodes.push(n);
      }
    }
  }

  function collectTextNodes(root) {
    const nodes = [];
    // A narrow comment container scopes the whole walk to comment text → pierce every shadow
    // host. A broad fallback root (main/body) pierces only comment-component hosts (see collectInto).
    collectInto(root, nodes, new Set(), 0, isNarrowRoot(root));
    return nodes;
  }

  // ---- link building / rewriting --------------------------------------------
  // Per the user's "if on spotify, link that, else a Bandcamp Google-search fallback"
  // rule: one link to the primary platform, colour-coded so you can tell which at a glance.
  // `kind` ("artist" | "album", absent => "artist") adds an rsl-album class + an album word
  // in the tooltip so album links read as albums; the platform colour is unchanged.
  function makeLink(label, links) {
    const primary = links.primary || { platform: "spotify", url: links.spotify };
    const name = links.name || label;
    const platform = primary.platform;
    const kind = links.kind === "album" ? "album" : "artist";
    const noun = kind === "album" ? "album" : "artist";
    // Re-validate the href scheme client-side: only http(s) becomes a clickable link.
    // A swapped/compromised/buggy resolver could send a javascript:/data: url; never
    // inject that into reddit's DOM. Returning null leaves the original text in place.
    if (!Extract.isSafeHttpUrl(primary.url)) return null;
    const a = document.createElement("a");
    a.className = `rsl-link rsl-${platform} rsl-${kind}`;
    a.textContent = label;
    a.href = primary.url;
    a.target = "_blank";
    a.rel = "noopener noreferrer";
    a.title = platform === "spotify"
      ? `Open ${name} (${noun}) on Spotify`
      : `Find ${name} (${noun}) on Bandcamp (Google search)`;
    return a;
  }

  // `matches` is the node's allMatchesIn(text) result, computed once per scan in scan()
  // and reused here — the regex battery runs once per node per scan, not twice.
  function wrapNode(node, matches) {
    const text = node.nodeValue;
    const ms = matches.filter((m) => {
      const links = resolved.get(m.name);
      return links && ((links.primary && links.primary.url) || links.spotify);
    });
    if (!ms.length) return;
    const frag = document.createDocumentFragment();
    let last = 0;
    for (const m of ms) {
      if (m.index < last) continue; // skip overlaps
      if (m.index > last) frag.appendChild(document.createTextNode(text.slice(last, m.index)));
      const matchText = text.substr(m.index, m.length);
      const link = makeLink(matchText, resolved.get(m.name));
      // makeLink returns null for an unsafe (non-http(s)) href: keep the plain text.
      frag.appendChild(link || document.createTextNode(matchText));
      last = m.index + m.length;
    }
    if (last < text.length) frag.appendChild(document.createTextNode(text.slice(last)));
    node.parentNode && node.parentNode.replaceChild(frag, node);
  }

  // ---- resolver client ------------------------------------------------------
  const resolved = new Map(); // candidate string -> { name, spotify?, google?, primary } | null

  // The resolver caps each /resolve call at MAX_CANDIDATES (service/resolve-core.js); names past the
  // cap are silently dropped from the response. So split a large ask into batches of at most that cap
  // and resolve each — every candidate is actually answered, none lost to the server-side slice.
  // MUST stay <= the server's MAX_CANDIDATES.
  const BATCH = 100;

  // The network call goes through the background script — a page-context fetch to
  // http://localhost is blocked by reddit's CSP / mixed-content rules.
  async function resolve(names) {
    log("resolving", names.length, "candidate(s) via background:", names.slice(0, 8));
    try {
      const resp = await api.runtime.sendMessage({ type: "resolve", candidates: names });
      if (!resp) throw new Error("no response from background script");
      if (!resp.ok) throw new Error(resp.error || "resolve failed");
      const hits = Object.values(resp.data).filter(Boolean).length;
      log("resolver returned", hits, "artist(s) of", names.length);
      return resp.data;
    } catch (e) {
      console.warn("[rsl] resolve failed (is the resolver running on :8787?):", e.message);
      return null;
    }
  }

  // ---- scan orchestration ---------------------------------------------------
  // Try the NARROW comment containers first, one at a time, before the broad app
  // shells. A single union querySelector returns the first element in DOCUMENT ORDER
  // matching ANY selector, and on new reddit <main> wraps the whole app and is an
  // ANCESTOR of shreddit-comment-tree, so <main> would always win — rooting the
  // shadow-piercing walk at the whole app and over-collecting reddit's chrome. Picking
  // the comment tree when present keeps the walk inside the comment subtree.
  function getRoot() {
    return (
      document.querySelector("shreddit-comment-tree") || // new reddit
      document.querySelector(".commentarea") ||          // old reddit
      document.querySelector("main, .content[role='main']") ||
      document.body
    );
  }

  // A narrow comment container scopes the whole walk to comment text, so shadow-piercing
  // is always safe there. On a BROAD fallback root (main/body — no comment tree found) the
  // walk must NOT descend into the app's chrome shadow roots (nav, sidebar, composer): only
  // descend into a shadow host that is itself a comment component.
  const NARROW_ROOT_SELECTOR = "shreddit-comment-tree, .commentarea";
  const isNarrowRoot = (root) =>
    root.nodeType === Node.ELEMENT_NODE && typeof root.matches === "function" && root.matches(NARROW_ROOT_SELECTOR);
  const hostIsCommentComponent = (el) =>
    typeof el.tagName === "string" && el.tagName.startsWith("SHREDDIT-COMMENT");

  async function scan() {
    const root = getRoot();
    const nodes = collectTextNodes(root);
    log("scan: root", root.tagName || root.nodeName, "| text nodes", nodes.length);
    if (!nodes.length) return;

    // Run the regex battery ONCE per node this scan: cache each node's full match array in
    // matchesByNode and derive the candidate `seen` set from it, so wrapNode can reuse the same
    // array instead of re-running allMatchesIn. Scoped to this scan (rebuilt each call) — node text
    // can change between scans, so it is never persisted.
    const matchesByNode = new Map();
    const seen = new Set();
    for (const node of nodes) {
      const ms = Extract.allMatchesIn(node.nodeValue);
      matchesByNode.set(node, ms);
      for (const m of ms) seen.add(m.name);
    }
    log("candidates found:", seen.size);

    const ask = [...seen].filter((c) => !resolved.has(c));
    // Resolve in server-cap-sized batches so no candidate is dropped by the resolver's slice.
    // Only cache keys the response actually carries: a name the server didn't answer (cap overflow,
    // partial error, or a resolver-down null response) is left OUT of `resolved` so it is retried on
    // the next scan, instead of being stuck at null and never retried again.
    for (const batch of Extract.chunk(ask, BATCH)) {
      const res = await resolve(batch);
      if (!res) continue; // whole-batch failure (resolver down): leave every name un-cached for retry
      for (const c of batch) {
        if (Object.prototype.hasOwnProperty.call(res, c)) resolved.set(c, res[c] || null);
      }
    }
    for (const node of nodes) if (node.isConnected) wrapNode(node, matchesByNode.get(node));

    const total = document.querySelectorAll("a.rsl-link").length;
    api.runtime.sendMessage({ type: "badge", count: total }).catch(() => {});
    log("scan done; links on page:", total);
  }

  // serialize scans; coalesce overlapping triggers
  let running = false;
  let pending = false;
  function schedule() {
    if (running) { pending = true; return; }
    running = true;
    scan()
      .catch((e) => console.warn("[rsl]", e))
      .finally(() => {
        running = false;
        if (pending) { pending = false; setTimeout(schedule, 300); }
      });
  }

  function debounce(fn, ms) {
    let t;
    return () => { clearTimeout(t); t = setTimeout(fn, ms); };
  }

  const onThread = () => /\/comments\//.test(location.pathname);

  // Only ADDED element/text nodes can introduce new comment text to link, so a mutation batch
  // that added none (pure attribute/characterData churn on existing nodes — vote counts, timers,
  // hovercard text) can't change the link set and is skipped. SPA navigation and "load more" both
  // ADD nodes, so they still trigger a scan. Conservative: any addedNodes of a relevant type
  // schedules — we never inspect the added node's contents (late-rendered text would be missed).
  function addedRelevantNodes(records) {
    for (const r of records) {
      for (const n of r.addedNodes) {
        if (n.nodeType === Node.ELEMENT_NODE || n.nodeType === Node.TEXT_NODE) return true;
      }
    }
    return false;
  }

  log("content script loaded:", location.href, "| thread page:", onThread());
  if (onThread()) schedule();
  // The observer stays broad (documentElement, subtree) so a SPA nav that replaces the comment-tree
  // root is still seen; the short-circuit below cuts the churn-scans without narrowing the root.
  const scheduleScan = debounce(() => { if (onThread()) schedule(); }, 600);
  new MutationObserver((records) => { if (addedRelevantNodes(records)) scheduleScan(); })
    .observe(document.documentElement, { childList: true, subtree: true });
})();