paul/linker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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>
This commit is contained in:
paul
2026-06-17 00:36:55 +00:00
co-authored by Claude Opus 4.8
parent 7c695be590
commit 607a4ab45e
8 changed files with 168 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
extension/background.js
+48
View File
@@ -0,0 +1,48 @@
// Background script: performs the cross-origin fetch to the resolver, and drives the
// toolbar badge.
//
// Why this exists: a content script running in the HTTPS reddit page CANNOT reach
// http://localhost:8787 — reddit's Content-Security-Policy (and mixed-content rules)
// block the request, so it never leaves the browser. The background page runs in the
// extension origin (moz-extension://), which is exempt, and may fetch any host listed
// in `permissions`. The content script therefore asks us to do the request.
const api = globalThis.browser ?? globalThis.chrome;
// Keep in sync with manifest.json `permissions` if you change host/port.
const RESOLVER_URL = "http://localhost:8787";
async function resolveCandidates(candidates) {
const r = await fetch(`${RESOLVER_URL}/resolve`, {
method: "POST",
headers: { "content-type": "application/json" },
body: JSON.stringify({ candidates }),
});
if (!r.ok) throw new Error(`resolver http ${r.status}`);
return r.json();
}
api.runtime.onMessage.addListener((msg, sender) => {
if (!msg || typeof msg !== "object") return;
if (msg.type === "resolve") {
// Returning a Promise makes sendMessage() in the content script resolve with it.
return resolveCandidates(msg.candidates)
.then((data) => ({ ok: true, data }))
.catch((e) => {
console.warn("[rsl/bg] resolve failed:", e && e.message);
return { ok: false, error: String((e && e.message) || e) };
});
}
if (msg.type === "badge") {
const tabId = sender.tab && sender.tab.id;
if (tabId != null) {
const n = msg.count | 0;
try {
api.browserAction.setBadgeBackgroundColor({ color: "#1db954", tabId });
api.browserAction.setBadgeText({ text: n > 0 ? String(n) : "", tabId });
} catch (e) { /* badge is best-effort */ }
}
}
});
extension/content.js
+29 -32
View File
@@ -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 });
extension/icon.svg
+8
View File
@@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
<rect width="32" height="32" rx="7" fill="#1db954"/>
<g fill="none" stroke="#ffffff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 22V10l9-2v12"/>
</g>
<circle cx="10" cy="22" r="3" fill="#ffffff"/>
<circle cx="19" cy="20" r="3" fill="#ffffff"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 385 B

extension/manifest.json
+7
View File
@@ -13,6 +13,13 @@
"http://localhost:8787/*",
"http://127.0.0.1:8787/*"
],
"background": {
"scripts": ["background.js"]
},
"browser_action": {
"default_icon": "icon.svg",
"default_title": "Reddit → Spotify/Bandcamp linker (active on reddit threads)"
},
"content_scripts": [
{
"matches": ["*://*.reddit.com/*"],
extension/styles.css
+10 -17
View File
@@ -1,23 +1,16 @@
/* Injected links — kept subtle so reddit comments stay readable. */
/* Injected links — kept subtle so reddit comments stay readable. One link per artist,
coloured by platform: green = Spotify, teal = Bandcamp. */
.rsl-link {
text-decoration: underline dotted #1db954 !important; /* spotify green */
text-decoration: underline dotted;
text-underline-offset: 2px;
cursor: pointer;
}
.rsl-spotify {
text-decoration-color: #1db954 !important; /* spotify green */
}
.rsl-bandcamp {
text-decoration-color: #629aa9 !important; /* bandcamp teal */
}
.rsl-link:hover {
text-decoration: underline solid #1db954 !important;
}
.rsl-sup {
font-size: 0.7em;
margin-left: 1px;
vertical-align: super;
line-height: 0;
}
.rsl-bc {
color: #629aa9 !important; /* bandcamp teal */
text-decoration: none !important;
font-weight: 600;
}
.rsl-bc:hover {
text-decoration: underline !important;
text-decoration-style: solid !important;
}