fix: background-script fetch (CSP/mixed-content), prefer-Spotify links, toolbar icon (task/fix-extension-and-linkui)

The extension linked nothing and the resolver saw no requests: the content script
fetched http://localhost:8787 directly from the HTTPS reddit page, which reddit's CSP /
mixed-content blocks. Move the network call to a background script (extension origin,
exempt) and add stage logging so failures are visible.

- extension/background.js (new): does the resolver fetch on message; sets the toolbar badge.
- extension/content.js: talks to background via runtime messaging (no page-context fetch);
  [rsl] console logs at boot/root/candidates/resolve/scan; single primary link.
- extension/manifest.json: background.scripts + browser_action (icon.svg, title).
- extension/{styles.css,icon.svg}: platform-coloured link (green=spotify, teal=bandcamp) + toolbar icon.
- service/lib.js: primaryOf()/isSearchUrl() — link Spotify when the artist is on Spotify,
  else Bandcamp, else Spotify search; spotifyResult/mbResult attach `primary` (unit-tested).
- README: link behaviour, toolbar, Troubleshooting.

Verified: scripts/check.sh green (10 tests); resolver returns `primary` end-to-end. The
in-browser fix is logic-verified only (no headless Firefox here) — reload the temp add-on
and watch the page console `[rsl]` logs to confirm.

Source: project human-feedback 2026-06-16 (notes 01KV8VC58QMYBDY6VVVJHR8YNY + 01KV91AMJCN2C4GFCKMKQRGNXE).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

extension/content.js

@@ -8,9 +8,8 @@
 (() => {
   "use strict";
 
-  // If you run the resolver on a different host/port, change this AND the matching
-  // host entry in manifest.json `permissions`.
-  const RESOLVER_URL = "http://localhost:8787";
+  const api = globalThis.browser ?? globalThis.chrome;
+  const log = (...a) => console.log("[rsl]", ...a);
 
   // ---- candidate extraction -------------------------------------------------
   // A token is a Capitalized or ALL-CAPS word; a candidate is 1-4 tokens joined by
@@ -80,37 +79,25 @@
   }
 
   // ---- link building / rewriting --------------------------------------------
+  // Per the user's "if on spotify, link that, else bandcamp" rule: one link to the
+  // primary platform, colour-coded so you can tell which at a glance.
   function makeLink(label, links) {
-    const frag = document.createDocumentFragment();
+    const primary = links.primary || { platform: "spotify", url: links.spotify };
     const a = document.createElement("a");
-    a.className = "rsl-link";
+    a.className = `rsl-link rsl-${primary.platform}`;
     a.textContent = label;
-    a.href = links.spotify;
+    a.href = primary.url;
     a.target = "_blank";
     a.rel = "noopener noreferrer";
-    a.title = "Open on Spotify";
-    frag.appendChild(a);
-    if (links.bandcamp) {
-      const sup = document.createElement("sup");
-      sup.className = "rsl-sup";
-      const b = document.createElement("a");
-      b.className = "rsl-bc";
-      b.textContent = "bc";
-      b.href = links.bandcamp;
-      b.target = "_blank";
-      b.rel = "noopener noreferrer";
-      b.title = "Search on Bandcamp";
-      sup.appendChild(b);
-      frag.appendChild(sup);
-    }
-    return frag;
+    a.title = `Open on ${primary.platform === "spotify" ? "Spotify" : "Bandcamp"}`;
+    return a;
   }
 
   function wrapNode(node) {
     const text = node.nodeValue;
     const ms = matchesIn(text).filter((m) => {
       const links = resolved.get(m.name);
-      return links && links.spotify;
+      return links && ((links.primary && links.primary.url) || links.spotify);
     });
     if (!ms.length) return;
     const frag = document.createDocumentFragment();
@@ -128,17 +115,19 @@
   // ---- resolver client ------------------------------------------------------
   const resolved = new Map(); // candidate string -> { spotify, bandcamp } | null
 
+  // 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 r = await fetch(`${RESOLVER_URL}/resolve`, {
-        method: "POST",
-        headers: { "content-type": "application/json" },
-        body: JSON.stringify({ candidates: names }),
-      });
-      if (!r.ok) throw new Error(`http ${r.status}`);
-      return await r.json();
+      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] resolver unreachable:", e.message);
+      console.warn("[rsl] resolve failed (is the resolver running on :8787?):", e.message);
       return null;
     }
   }
@@ -152,11 +141,14 @@
   }
 
   async function scan() {
-    const nodes = collectTextNodes(getRoot());
+    const root = getRoot();
+    const nodes = collectTextNodes(root);
+    log("scan: root", root.tagName || root.nodeName, "| text nodes", nodes.length);
     if (!nodes.length) return;
 
     const seen = new Set();
     for (const node of nodes) for (const m of matchesIn(node.nodeValue)) seen.add(m.name);
+    log("candidates found:", seen.size);
 
     const ask = [...seen].filter((c) => !resolved.has(c));
     if (ask.length) {
@@ -164,6 +156,10 @@
       if (res) for (const c of ask) resolved.set(c, res[c] || null); // negative-cache misses
     }
     for (const node of nodes) if (node.isConnected) wrapNode(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
@@ -187,6 +183,7 @@
 
   const onThread = () => /\/comments\//.test(location.pathname);
 
+  log("content script loaded:", location.href, "| thread page:", onThread());
   if (onThread()) schedule();
   new MutationObserver(debounce(() => { if (onThread()) schedule(); }, 600))
     .observe(document.documentElement, { childList: true, subtree: true });