hackertube-zh 0.0.0-stage → 0.1.2

package/content/player.js

@@ -0,0 +1,221 @@
+// Isolated content script inside HackerTube's YouTube embed: receives the caption file from player-main.js,
+// regroups it into sentences, translates them a few minutes ahead of playback and draws the Chinese subtitles
+// over the video (inside the player element, so they also show in fullscreen).
+(() => {
+  const H = globalThis.HTZ;
+  const S = H.subtitles, R = H.runtime;
+
+  const anc = location.ancestorOrigins;
+  const origins = anc ? Array.from({ length: anc.length }, (_, i) => anc[i]) : [document.referrer];
+  const fromHackerTube = origins.some((o) => { try { return /(^|\.)hackertube\.org$/.test(new URL(o).hostname); } catch { return false; } });
+  // HTZ_ALLOW_ANY_HOST is only ever set by the local test harness (dev/), which loads this file as a page script
+  if (!fromHackerTube && !globalThis.HTZ_ALLOW_ANY_HOST) return;
+
+  const LOOKAHEAD_MS = 5 * 60 * 1000; // translate up to five minutes ahead: cost follows what is actually watched
+  const MAX_INFLIGHT = 2;
+
+  let settings = { ...R.DEFAULTS };
+  let vid = null, title = "";
+  let sentences = [], zh = [], st = []; // st: 0 = not sent, 1 = in flight, 2 = done
+  let gen = 0, inflight = 0, failures = 0, doneCount = 0;
+  let retryAt = 0; // after a failed request nothing is sent before this time
+
+  const post = (type, data = {}) => window.postMessage({ source: "htz-iso", type, ...data }, "*");
+  const sendConfig = () => post("config", { enabled: settings.subMode !== "off" });
+  const player = () => document.getElementById("movie_player");
+  const video = () => document.querySelector("#movie_player video") || document.querySelector("video");
+
+  // ---------- overlay ----------
+  let overlay, zhLine, enLine, badge, badgeTimer, shown = "";
+  const ro = new ResizeObserver((entries) => {
+    for (const e of entries) e.target.style.setProperty("--htz-h", `${Math.round(e.contentRect.height)}px`);
+  });
+
+  function ensureOverlay() {
+    const p = player();
+    if (!p) return false;
+    if (overlay && overlay.isConnected && overlay.parentElement === p) return true;
+    overlay = document.createElement("div");
+    overlay.className = "htz-sub";
+    overlay.setAttribute("aria-hidden", "true");
+    zhLine = document.createElement("div"); zhLine.className = "htz-line htz-zh"; zhLine.lang = "zh-CN";
+    enLine = document.createElement("div"); enLine.className = "htz-line htz-en";
+    overlay.append(zhLine, enLine);
+    badge = document.createElement("div"); badge.className = "htz-badge";
+    p.append(overlay, badge);
+    ro.observe(p);
+    applyStyle();
+    return true;
+  }
+
+  function applyStyle() {
+    const p = player();
+    if (!p) return;
+    p.style.setProperty("--htz-scale", String(settings.subScale || 1));
+    p.style.setProperty("--htz-bottom", String(settings.subBottom ?? 8));
+    p.classList.toggle("htz-style-box", settings.subStyle === "box");
+    // our lines include the English, so YouTube's own captions would only duplicate them
+    p.classList.toggle("htz-hide-native", settings.subMode !== "off" && sentences.length > 0);
+  }
+
+  function say(msg, { ms = 4000, error = false } = {}) {
+    if (!ensureOverlay()) return;
+    clearTimeout(badgeTimer);
+    badge.textContent = msg;
+    badge.classList.toggle("err", error);
+    badge.classList.add("on");
+    if (ms) badgeTimer = setTimeout(() => badge.classList.remove("on"), ms);
+  }
+
+  function render() {
+    if (!overlay || !overlay.isConnected) { if (!sentences.length || !ensureOverlay()) return; }
+    const v = video();
+    const i = v && sentences.length && settings.subMode !== "off" ? S.findActive(sentences, v.currentTime * 1000) : -1;
+    let z = "", e = "";
+    if (i >= 0) {
+      const en = sentences[i].text, tr = zh[i];
+      if (settings.subMode === "zh") z = tr || en;
+      else { z = tr || ""; e = en; }
+    }
+    const key = `${z}\u0001${e}`;
+    if (key === shown) return;
+    shown = key;
+    zhLine.textContent = z;
+    enLine.textContent = e;
+    overlay.classList.toggle("on", !!(z || e));
+  }
+
+  let raf = 0;
+  function loop() {
+    raf = 0;
+    render();
+    const v = video();
+    if (v && !v.paused) raf = requestAnimationFrame(loop);
+  }
+  const kick = () => { if (!raf) raf = requestAnimationFrame(loop); };
+
+  // ---------- translation scheduling ----------
+  function progress() {
+    if (!sentences.length) return;
+    const total = sentences.length;
+    if (doneCount < total && inflight) say(`中文字幕 · 翻译中 ${doneCount}/${total}`, { ms: 0 });
+    else if (badge && badge.textContent.startsWith("中文字幕 · 翻译中")) say(`中文字幕 · 已就绪 ${doneCount}/${total}`, { ms: 1500 });
+  }
+
+  function pump() {
+    if (settings.subMode === "off" || !sentences.length || Date.now() < retryAt) return;
+    const v = video();
+    const now = v ? v.currentTime * 1000 : 0;
+    while (inflight < MAX_INFLIGHT) {
+      let i = S.firstFrom(sentences, now - 2000);
+      while (i < sentences.length && st[i] !== 0) i++;
+      if (i >= sentences.length || sentences[i].start > now + LOOKAHEAD_MS) break;
+      // first request is small so the first subtitle appears within a second or two
+      const size = doneCount === 0 && inflight === 0 ? 6 : 25;
+      const idx = [];
+      for (let j = i; j < sentences.length && idx.length < size && st[j] === 0; j++) idx.push(j);
+      idx.forEach((k) => { st[k] = 1; });
+      inflight++;
+      const myGen = gen;
+      const previous = sentences.slice(Math.max(0, i - 3), i).map((s) => s.text);
+      R.translate(idx.map((k) => sentences[k].text), { kind: "subtitle", context: { title, previous } })
+        .then((res) => {
+          if (myGen !== gen) return;
+          failures = 0;
+          idx.forEach((k, n) => { zh[k] = res.translations[n]; st[k] = 2; });
+          doneCount += idx.length;
+          if (res.warning) say(res.warning, { error: true, ms: 6000 });
+        })
+        .catch((err) => {
+          if (myGen !== gen) return;
+          failures++;
+          idx.forEach((k) => { st[k] = 0; });
+          say(`字幕翻译失败：${err.message}`, { error: true, ms: 6000 });
+          // never give up for good, the network may come back mid-video: wait longer each time, up to 30 s
+          const wait = Math.min(2500 * failures, 30000);
+          retryAt = Date.now() + wait;
+          setTimeout(pump, wait + 50);
+        })
+        .finally(() => {
+          if (myGen !== gen) return;
+          inflight--;
+          shown = "";
+          render();
+          progress();
+          pump();
+        });
+    }
+    progress();
+  }
+
+  function reset(newVid) {
+    gen++;
+    vid = newVid;
+    sentences = []; zh = []; st = [];
+    inflight = 0; failures = 0; doneCount = 0; shown = ""; retryAt = 0;
+    if (overlay) { zhLine.textContent = ""; enLine.textContent = ""; overlay.classList.remove("on"); }
+    applyStyle();
+  }
+
+  function onCaptions(msg) {
+    if (msg.vid && msg.vid !== vid) reset(msg.vid);
+    if (msg.title) title = msg.title;
+    const list = S.buildSentences(S.parseTimedText(msg.body));
+    if (!list.length) return;
+    // a second copy of the same track (YouTube re-requests on seek or quality change) changes nothing
+    if (sentences.length === list.length && sentences.every((s, i) => s.text === list[i].text)) return;
+    reset(vid);
+    sentences = list;
+    zh = new Array(list.length);
+    st = new Array(list.length).fill(0);
+    ensureOverlay();
+    applyStyle();
+    if (settings.subMode !== "off") say(`中文字幕 · 已获取 ${list.length} 句${msg.kind === "asr" ? "（自动生成字幕）" : ""}`, { ms: 0 });
+    pump();
+    kick();
+  }
+
+  // ---------- wiring ----------
+  window.addEventListener("message", (e) => {
+    if (e.source !== window || !e.data || e.data.source !== "htz-main") return;
+    const m = e.data;
+    if (m.type === "hello") sendConfig();
+    else if (m.type === "video") { if (m.vid !== vid) reset(m.vid); title = m.title || title; }
+    else if (m.type === "captions" && typeof m.body === "string") onCaptions(m);
+    else if (m.type === "nocaptions" && m.vid === vid && settings.subMode !== "off") say("这个视频没有字幕，无法生成中文字幕", { ms: 6000 });
+    else if (m.type === "captionsfailed" && m.vid === vid && !sentences.length && settings.subMode !== "off") {
+      say("没拿到字幕：点一下播放器右下角的 CC 按钮即可重试", { ms: 8000 });
+    }
+  });
+
+  // media events don't bubble, but a capturing listener on the document still sees them
+  let lastPump = 0;
+  document.addEventListener("play", kick, true);
+  // a seek or a changed setting is the viewer asking again: retry now instead of waiting out the pause
+  document.addEventListener("seeked", () => { shown = ""; retryAt = 0; render(); pump(); }, true);
+  document.addEventListener("pause", render, true);
+  document.addEventListener("timeupdate", () => {
+    render();
+    if (Date.now() - lastPump > 3000) { lastPump = Date.now(); pump(); }
+  }, true);
+
+  R.loadSettings().then((s) => { settings = s; sendConfig(); applyStyle(); });
+  R.onSettings((s) => {
+    const prev = settings;
+    settings = s;
+    sendConfig();
+    applyStyle();
+    const engineChanged = ["engine", "claudeModel", "openaiBaseUrl", "openaiModel"].some((k) => s[k] !== prev[k]);
+    if (engineChanged && sentences.length) {
+      const keep = sentences;
+      reset(vid);
+      sentences = keep;
+      zh = new Array(keep.length);
+      st = new Array(keep.length).fill(0);
+    }
+    shown = "";
+    retryAt = 0;
+    render();
+    pump();
+  });
+})();

package/content/site.css

@@ -0,0 +1,31 @@
+/* Bilingual: the original and its translation sit together as one pair, then the site's usual spacing. */
+html[data-htz-mode="bilingual"] .htz-src { margin-bottom: 2px !important; }
+html[data-htz-mode="bilingual"] .htz-tr { margin-top: 0 !important; }
+html[data-htz-mode="bilingual"] .htz-tr.vt,
+html[data-htz-mode="bilingual"] h1.htz-tr { opacity: .92; }
+
+/* Chinese only: hide the original, the translated copy already carries the original's classes */
+html[data-htz-mode="zh"] .htz-src { display: none !important; }
+
+.htz-pair { min-width: 0; }
+.htz-inline { margin-left: .4em; opacity: .75; }
+
+#htz-status {
+  position: fixed; right: 16px; bottom: 16px; z-index: 2147483000;
+  max-width: min(420px, calc(100vw - 32px)); padding: 6px 12px; border-radius: 999px;
+  background: var(--chip-on, #0f0f0f); color: var(--chip-on-text, #fff);
+  font: 13px/1.4 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
+  box-shadow: 0 2px 10px rgba(0,0,0,.2); pointer-events: none;
+  opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s;
+}
+#htz-status.on { opacity: .92; transform: none; }
+#htz-status.err { background: #c62828; color: #fff; border-radius: 12px; }
+
+#htz-toast {
+  position: fixed; left: 50%; bottom: 24px; z-index: 2147483000; transform: translate(-50%, 8px);
+  max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 8px;
+  background: var(--chip-on, #0f0f0f); color: var(--chip-on-text, #fff);
+  font: 14px/1.4 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
+  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
+}
+#htz-toast.on { opacity: 1; transform: translate(-50%, 0); }

package/content/site.js

@@ -0,0 +1,291 @@
+// HackerTube pages: localize the interface instantly, translate titles / summaries / comments as they scroll
+// into view, and render the Chinese right under the original (or instead of it). HackerTube is a single-page
+// app that re-renders with innerHTML, so everything is driven by a MutationObserver.
+(() => {
+  const H = globalThis.HTZ;
+  const T = H.text, UI = H.uidict, R = H.runtime;
+
+  // Content written per video goes to the translation engine. "block": the translation is a copy of the element
+  // (same tag and classes, so it looks native) inserted right after it. "inline": a short label inside a link
+  // or chip, translated in place. "dict": try the local UI dictionary first (page headings like "Settings").
+  const RULES = [
+    { sel: ".vt", kind: "block" },
+    { sel: ".watch h1", kind: "block" },
+    { sel: ".snip", kind: "block" },
+    { sel: ".desc > p", kind: "block" },
+    { sel: ".cmt .body > p", kind: "block" },
+    { sel: ".plnote", kind: "block" },
+    { sel: ".plinfo h2", kind: "block" },
+    { sel: ".plinfo .intro", kind: "block" },
+    { sel: ".plcard p.sub", kind: "block" },
+    { sel: ".pagehead h2", kind: "block", dict: true },
+    { sel: ".setting b", kind: "block" },
+    { sel: ".setting p", kind: "block" },
+    { sel: ".about .lede", kind: "block" },
+    { sel: ".about > h2", kind: "block" },
+    { sel: ".about > p", kind: "block" },
+    { sel: ".about li", kind: "block" },
+    { sel: ".areaname", kind: "inline" },
+    { sel: ".cats a", kind: "inline" },
+    { sel: ".catwrap .chip", kind: "inline" },
+    { sel: ".tag.cat", kind: "inline" },
+  ];
+  const CONTENT_SEL = RULES.map((r) => r.sel).join(",");
+  const OURS = ".htz-tr, .htz-inline, .htz-pair, #htz-status, #htz-toast";
+  // never touched: our own nodes, code, the copyable agent prompt, hashtags, people's and channels' names
+  const SKIP_SEL = `${OURS}, script, style, pre, code, textarea, #agent-prompt, .tag:not(.cat), .chan, .who b, .cmt .meta b, .count, .dur`;
+
+  let settings = { ...R.DEFAULTS };
+  let mode = "off";
+  const memo = new Map();       // source text -> translation, for this page's lifetime
+  const waiting = new Map();    // source text -> elements waiting for it
+  const inflight = new Set();   // source texts currently being translated
+  let failures = 0;             // requests failed in a row: sets the pause before the next retry
+  const replaced = new Map();   // Text node -> original text, so "off" can restore the page exactly
+  let handled = new WeakSet();
+
+  // ---------- status pill + toast ----------
+  const status = (() => {
+    let el, timer;
+    return (msg, { error = false, ms = 0 } = {}) => {
+      if (!el) { el = document.createElement("div"); el.id = "htz-status"; document.body.append(el); }
+      clearTimeout(timer);
+      el.textContent = msg || "";
+      el.classList.toggle("on", !!msg);
+      el.classList.toggle("err", error);
+      if (msg && ms) timer = setTimeout(() => el.classList.remove("on"), ms);
+    };
+  })();
+  function toast(msg) {
+    let el = document.getElementById("htz-toast");
+    if (!el) { el = document.createElement("div"); el.id = "htz-toast"; document.body.append(el); }
+    el.textContent = msg;
+    el.classList.add("on");
+    clearTimeout(toast.t);
+    toast.t = setTimeout(() => el.classList.remove("on"), 3000);
+  }
+  function showProgress() {
+    if (inflight.size) status(`翻译中 · ${inflight.size} 条`);
+    else status("");
+  }
+
+  // ---------- text replacement that can be undone ----------
+  function replaceText(node, zh) {
+    if (!replaced.has(node)) replaced.set(node, node.data);
+    const orig = replaced.get(node);
+    const lead = orig.match(/^\s*/)[0], trail = orig.match(/\s*$/)[0];
+    node.data = lead + zh + trail;
+  }
+
+  function isChannelLine(el) {
+    // cards: <h3 class="vt">title</h3><div class="sub">channel</div><div class="sub">views • date</div>
+    if (!el.classList.contains("sub") || !el.closest(".vcard, .next")) return false;
+    const prev = el.previousElementSibling;
+    return !!prev && prev.classList.contains("vt");
+  }
+
+  // Interface strings: every text node outside content elements that the dictionary knows.
+  function localizeUi(root) {
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, {
+      acceptNode(n) {
+        const p = n.parentElement;
+        if (!p || !n.data.trim()) return NodeFilter.FILTER_REJECT;
+        if (p.closest(SKIP_SEL)) return NodeFilter.FILTER_REJECT;
+        // the "▶ this video" / "link" pills inside comments are interface, though they sit in content
+        if (p.matches(".mk")) return NodeFilter.FILTER_ACCEPT;
+        if (p.closest(CONTENT_SEL) || isChannelLine(p)) return NodeFilter.FILTER_REJECT;
+        return NodeFilter.FILTER_ACCEPT;
+      },
+    });
+    const nodes = [];
+    while (walker.nextNode()) nodes.push(walker.currentNode);
+    for (const n of nodes) {
+      if (replaced.has(n)) continue;
+      const zh = UI.localize(n.data);
+      if (zh) replaceText(n, zh);
+    }
+  }
+
+  // ---------- content translation ----------
+  const ruleFor = (el) => RULES.find((r) => el.matches(r.sel));
+  const firstText = (el) => [...el.childNodes].find((n) => n.nodeType === 3 && n.data.trim());
+
+  function register(el) {
+    if (handled.has(el)) return;
+    handled.add(el);
+    const rule = ruleFor(el);
+    if (!rule) return;
+    const node = rule.kind === "inline" ? firstText(el) : null;
+    const text = T.normalize(rule.kind === "inline" ? node && node.data : el.textContent);
+    if (!text) return;
+    if (rule.dict) {
+      const zh = UI.localize(text);
+      if (zh) { const n = firstText(el); if (n) replaceText(n, zh); return; }
+    }
+    if (!T.needsTranslation(text) || T.hasCJK(text)) return;
+    el.__htz = { rule, node, text };
+    if (memo.has(text)) render(el);
+    else io.observe(el);
+  }
+
+  // Only what is on (or near) the screen gets translated: the home feed scrolls forever.
+  const io = new IntersectionObserver((entries) => {
+    for (const e of entries) {
+      if (!e.isIntersecting) continue;
+      io.unobserve(e.target);
+      enqueue(e.target);
+    }
+  }, { rootMargin: "800px 0px" });
+
+  function enqueue(el) {
+    const { text } = el.__htz;
+    if (memo.has(text)) return render(el);
+    if (!waiting.has(text)) waiting.set(text, []);
+    waiting.get(text).push(el);
+    clearTimeout(enqueue.t);
+    enqueue.t = setTimeout(flush, 60);
+  }
+
+  function flush() {
+    const texts = [...waiting.keys()].filter((t) => !inflight.has(t));
+    if (!texts.length) return;
+    for (const idx of T.chunk(texts, { maxItems: 40, maxChars: 5000 })) send(idx.map((i) => texts[i]));
+  }
+
+  async function send(texts) {
+    texts.forEach((t) => inflight.add(t));
+    showProgress();
+    const myMode = mode;
+    try {
+      const res = await R.translate(texts, { kind: "page" });
+      if (mode !== myMode) return;
+      failures = 0;
+      texts.forEach((t, i) => memo.set(t, res.translations[i]));
+      for (const t of texts) for (const el of waiting.get(t) || []) if (el.isConnected) render(el);
+      if (res.warning) status(res.warning, { error: true, ms: 6000 });
+    } catch (e) {
+      status(`翻译失败：${e.message}`, { error: true, ms: 6000 });
+      // hand the elements back to the viewport observer after a pause (longer each time, up to 30 s): whatever
+      // is still near the screen then is asked for again, so the page recovers once the network or engine does
+      const els = texts.flatMap((t) => waiting.get(t) || []);
+      setTimeout(() => {
+        if (mode === myMode) for (const el of els) if (el.isConnected) io.observe(el);
+      }, Math.min(3000 * ++failures, 30000));
+    } finally {
+      texts.forEach((t) => { inflight.delete(t); waiting.delete(t); });
+      if (!document.querySelector("#htz-status.err.on")) showProgress();
+    }
+  }
+
+  function render(el) {
+    if (mode === "off" || !el.__htz) return;
+    const { rule, node, text } = el.__htz;
+    const zh = memo.get(text);
+    if (!zh || T.normalize(zh) === text) return;
+    if (rule.kind === "inline") {
+      if (!node || !node.isConnected) return;
+      if (mode === "zh") return replaceText(node, zh);
+      if (node.parentElement && node.parentElement.classList.contains("htz-pair")) return;
+      // these labels sit in flex rows (name ... count): wrapping original + translation in one span keeps them
+      // a single flex item that flows as text, instead of two squeezed columns
+      const pair = document.createElement("span");
+      pair.className = "htz-pair";
+      const s = document.createElement("span");
+      s.className = "htz-inline";
+      s.lang = "zh-CN";
+      s.textContent = zh;
+      node.before(pair);
+      pair.append(node, s);
+      return;
+    }
+    if (el.nextElementSibling && el.nextElementSibling.classList.contains("htz-tr")) return;
+    // a copy with the same tag and classes picks up the site's own styling (title size, muted colour, clamp)
+    const tr = document.createElement(el.tagName === "LI" ? "div" : el.tagName);
+    tr.className = `${el.className} htz-tr`.trim();
+    tr.lang = "zh-CN";
+    tr.textContent = zh;
+    el.classList.add("htz-src");
+    el.after(tr);
+  }
+
+  // ---------- scanning ----------
+  function process(root) {
+    if (mode === "off" || !(root instanceof Element) || root.closest(OURS)) return;
+    const host = root.parentElement && root.parentElement.closest(CONTENT_SEL);
+    if (host) return register(host);
+    if (root.matches(CONTENT_SEL)) register(root);
+    root.querySelectorAll(CONTENT_SEL).forEach(register);
+    localizeUi(root);
+  }
+
+  const mo = new MutationObserver((muts) => {
+    if (mode === "off") return;
+    for (const m of muts) {
+      for (const n of m.addedNodes) {
+        if (n.nodeType === 1) process(n);
+        else if (n.nodeType === 3 && n.parentElement) process(n.parentElement);
+      }
+    }
+    if (replaced.size > 3000) for (const n of replaced.keys()) if (!n.isConnected) replaced.delete(n);
+  });
+
+  function revertAll() {
+    for (const [n, orig] of replaced) if (n.isConnected) n.data = orig;
+    replaced.clear();
+    document.querySelectorAll(".htz-pair").forEach((p) => p.replaceWith(...[...p.childNodes].filter((n) => n.nodeType === 3)));
+    document.querySelectorAll(".htz-tr, .htz-inline").forEach((n) => n.remove());
+    document.querySelectorAll(".htz-src").forEach((n) => n.classList.remove("htz-src"));
+    io.disconnect();
+    waiting.clear();
+    handled = new WeakSet();
+  }
+
+  function applyMode(next) {
+    revertAll();
+    mode = next;
+    document.documentElement.dataset.htzMode = mode;
+    const q = document.getElementById("q");
+    if (q) q.placeholder = mode === "off" ? "Search" : settings.searchTranslate ? "搜索（可直接输入中文）" : "搜索";
+    if (mode !== "off") process(document.body);
+    else status("");
+  }
+
+  // ---------- Chinese search: translate the query to English, then let the site search as usual ----------
+  // The site's semantic search embeds English text; a Chinese query finds little. We intercept the submit in the
+  // capture phase, swap the input's value for the English, and resubmit so the site's own handler runs.
+  let bypass = false;
+  document.addEventListener("submit", async (e) => {
+    const form = e.target;
+    if (bypass || mode === "off" || !settings.searchTranslate || !(form instanceof HTMLFormElement) || form.id !== "search") return;
+    const q = form.querySelector("#q");
+    const query = q && q.value.trim();
+    if (!query || !T.hasCJK(query)) return;
+    e.preventDefault();
+    e.stopImmediatePropagation();
+    status("正在把搜索词翻译成英文…");
+    try {
+      const res = await R.translate([query], { kind: "query", to: "en" });
+      const en = T.normalize(res.translations[0]);
+      if (en) { q.value = en; toast(`已将「${query}」译为 “${en}” 进行搜索`); }
+      status("");
+    } catch (err) {
+      status(`搜索词翻译失败，按原文搜索：${err.message}`, { error: true, ms: 5000 });
+    }
+    bypass = true;
+    try { form.requestSubmit(); } finally { bypass = false; }
+  }, true);
+
+  // ---------- start ----------
+  R.loadSettings().then((s) => {
+    settings = s;
+    applyMode(s.pageMode);
+    mo.observe(document.body, { childList: true, subtree: true });
+  });
+  R.onSettings((s) => {
+    const prev = settings;
+    settings = s;
+    const engineChanged = ["engine", "claudeModel", "openaiBaseUrl", "openaiModel"].some((k) => s[k] !== prev[k]);
+    if (engineChanged) memo.clear();
+    if (engineChanged || s.pageMode !== prev.pageMode || s.searchTranslate !== prev.searchTranslate) applyMode(s.pageMode);
+  });
+})();

package/icons/icon-small.svg

@@ -0,0 +1,35 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+  <!-- 16 / 32 px toolbar art: the same play button and puzzle piece as icon.svg, filling more of the square, with a
+       wider gap. The piece gets a second knob on the right: with only the top knob it reads as a padlock when tiny. -->
+  <defs>
+    <linearGradient id="play" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#FF6A33"/>
+      <stop offset="1" stop-color="#FC4C1B"/>
+    </linearGradient>
+    <linearGradient id="piece" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#FF961F"/>
+      <stop offset="1" stop-color="#FF7E14"/>
+    </linearGradient>
+    <mask id="gap">
+      <rect width="128" height="128" fill="#fff"/>
+      <g fill="#000" stroke="#000" stroke-width="14" stroke-linejoin="round">
+        <rect x="66" y="74" width="46" height="46" rx="7"/>
+        <circle cx="89" cy="63" r="11"/>
+        <circle cx="116" cy="97" r="9.5"/>
+      </g>
+    </mask>
+  </defs>
+
+  <g mask="url(#gap)">
+    <rect x="2" y="10" width="116" height="94" rx="28" fill="url(#play)"/>
+    <path d="M34 36 L34 74 L64 55 Z" fill="#fff" stroke="#fff" stroke-width="11" stroke-linejoin="round"/>
+  </g>
+
+  <g fill="url(#piece)">
+    <rect x="66" y="74" width="46" height="46" rx="7"/>
+    <circle cx="89" cy="63" r="11"/>
+    <rect x="83" y="63" width="12" height="12"/>
+    <circle cx="116" cy="97" r="9.5"/>
+    <rect x="110" y="91" width="7" height="12"/>
+  </g>
+</svg>

package/icons/icon.svg

@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+  <!-- HackerTube 中文插件: a video play button with a browser-extension puzzle piece, kept apart by a transparent
+       gap. Used for the 48 and 128 px icons and the README wordmark; icon-small.svg is the 16 / 32 px art. -->
+  <defs>
+    <linearGradient id="play" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#FF6A33"/>
+      <stop offset="1" stop-color="#FC4C1B"/>
+    </linearGradient>
+    <linearGradient id="piece" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#FF961F"/>
+      <stop offset="1" stop-color="#FF7E14"/>
+    </linearGradient>
+    <!-- the puzzle piece's footprint, grown by the gap, is cut out of the play button -->
+    <mask id="gap">
+      <rect width="128" height="128" fill="#fff"/>
+      <g fill="#000" stroke="#000" stroke-width="9" stroke-linejoin="round">
+        <rect x="75.5" y="71" width="44.5" height="40" rx="5"/>
+        <circle cx="99" cy="63.5" r="9.6"/>
+      </g>
+    </mask>
+    <!-- the socket on the piece's left side -->
+    <mask id="socket">
+      <rect width="128" height="128" fill="#fff"/>
+      <circle cx="76.5" cy="91" r="6.4" fill="#000"/>
+    </mask>
+  </defs>
+
+  <g mask="url(#gap)">
+    <rect x="8" y="17" width="106" height="83" rx="26" fill="url(#play)"/>
+    <path d="M49.5 43 L49.5 72 L76.5 57.5 Z" fill="#fff" stroke="#fff" stroke-width="9" stroke-linejoin="round"/>
+  </g>
+
+  <g fill="url(#piece)" mask="url(#socket)">
+    <rect x="75.5" y="71" width="44.5" height="40" rx="5"/>
+    <circle cx="99" cy="63.5" r="9.6"/>
+    <rect x="94" y="64" width="10" height="9"/>
+  </g>
+</svg>