hackertube-zh 0.0.0-stage → 0.1.2

package/lib/uidict.js

@@ -0,0 +1,105 @@
+// HackerTube's own interface strings (menus, filters, buttons, counts, dates), translated locally and instantly.
+// Content written per video (titles, summaries, comments) goes through a translation engine instead.
+(function (root, factory) {
+  const api = factory();
+  if (typeof module === "object" && module.exports) module.exports = api;
+  else (root.HTZ = root.HTZ || {}).uidict = api;
+})(globalThis, function () {
+  const EXACT = {
+    // sidebar
+    Home: "首页", Longs: "长视频", Liked: "赞过的视频", History: "历史记录", "Watch later": "稍后观看",
+    Categories: "分类", Playlists: "播放列表", Settings: "设置",
+    // filters
+    Filters: "筛选", "Upload date": "上传日期", "Past year": "过去一年", Type: "类型", Duration: "时长",
+    Features: "特色", "Sort by": "排序方式", Talk: "演讲", Lecture: "讲座", Explainer: "讲解", Tutorial: "教程",
+    Documentary: "纪录片", Interview: "访谈", Demo: "演示", Commentary: "评论", Comedy: "喜剧", Music: "音乐",
+    "Under 4 minutes": "4 分钟以内", "4–20 minutes": "4–20 分钟", "20–60 minutes": "20–60 分钟", "Over 1 hour": "1 小时以上",
+    "Hidden gems": "冷门佳作", "Evergreen only": "仅常青内容", Relevance: "相关性", "Recently recommended": "最近推荐",
+    "Oldest first": "最早优先", "View count": "观看次数", "Like ratio": "点赞率", "Most recommended": "推荐最多",
+    "Best first": "最佳优先", "Play all on YouTube": "在 YouTube 上全部播放", "All videos": "全部视频",
+    // pages and buttons
+    "Liked videos": "赞过的视频", "Browse all videos": "浏览全部视频", "Clear all watch history": "清除全部观看记录",
+    "Every video over an hour. The opposite of Shorts.": "所有超过一小时的视频。Shorts 的反面。",
+    "Start here": "从这里开始", "Deep dives": "深入专题", "Broad, essential lists for your first visit.": "首次来访的入门必看清单。",
+    "One obsession each, for when you want to go down a rabbit hole.": "每个专题一个主题，适合想深挖的时候。",
+    "Coming soon.": "即将推出。", Like: "顶", Saved: "已保存", YouTube: "YouTube", "View on HN": "在 HN 查看",
+    "Strongly recommends": "强烈推荐", Recommends: "推荐", Cites: "引用", Joke: "玩笑", Critical: "批评",
+    "▶ this video": "▶ 本视频", link: "链接", Search: "搜索",
+    "Loading…": "加载中…", "Searching…": "搜索中…", "Not found.": "未找到。", "Nothing here yet.": "这里还没有内容。",
+    "No videos match these filters.": "没有符合这些筛选条件的视频。",
+    "Lots of searches right now. Give it a minute and try again.": "当前搜索的人很多，请稍等一分钟再试。",
+    "Videos you open will show up here.": "你打开过的视频会显示在这里。",
+    "Videos you like will show up here, and shape your Home feed.": "你赞过的视频会显示在这里，并影响首页推荐。",
+    "Save videos to watch later with the clock button on a thumbnail or on a video's page.": "用缩略图或视频页上的时钟按钮，把视频存到稍后观看。",
+    // toasts and the shortcuts dialog
+    "Prompt copied": "提示词已复制", "Added to Liked": "已加入赞过的视频", "Removed from Liked": "已从赞过的视频中移除",
+    "Saved to Watch later": "已存到稍后观看", "Removed from Watch later": "已从稍后观看中移除",
+    "Keyboard shortcuts": "键盘快捷键", "Next / previous video": "下一个 / 上一个视频", "Open the selected video": "打开选中的视频",
+    "Like the selected or current video": "顶选中或当前的视频", "Watch later for the selected or current video": "将选中或当前视频存到稍后观看",
+    "Play (on a video page)": "播放（视频页）", "Show these shortcuts": "显示快捷键", "Close / leave the search box": "关闭 / 离开搜索框",
+    // about page stats
+    videos: "个视频", "HN comments read": "条 HN 评论已读", "years of HN": "年的 HN",
+  };
+
+  // Words that appear as metadata tokens (content type, shelf life), shown lowercase on the video page.
+  const TOKENS = {
+    talk: "演讲", lecture: "讲座", explainer: "讲解", tutorial: "教程", documentary: "纪录片", interview: "访谈",
+    demo: "演示", commentary: "评论", comedy: "喜剧", music: "音乐", other: "其他",
+    evergreen: "常青", dated: "有时效", timely: "时效性", news: "新闻",
+  };
+
+  function views(num, unit) {
+    const n = parseFloat(num) * ({ K: 1e3, M: 1e6, B: 1e9 }[unit] || 1);
+    if (n >= 1e8) return `${+(n / 1e8).toFixed(1)}亿次观看`;
+    if (n >= 1e4) return `${+(n / 1e4).toFixed(1)}万次观看`;
+    return `${Math.round(n)}次观看`;
+  }
+  const AGO = { year: "年", month: "个月", week: "周", day: "天" };
+  const hrmin = (s) => s.replace(/(\d+) hr/, "$1 小时").replace(/(\d+) min/, "$1 分钟");
+
+  // One metadata piece such as "196K views", "7 years ago", "lecture".
+  function piece(p) {
+    let m;
+    if ((m = /^([\d.]+)([KMB]?) views?$/.exec(p))) return views(m[1], m[2]);
+    if ((m = /^(\d+) (year|month|week|day)s? ago$/.exec(p))) return `${m[1]} ${AGO[m[2]]}前`;
+    if (p === "today") return "今天";
+    if (TOKENS[p]) return TOKENS[p];
+    if ((m = /^(\d+) videos?$/.exec(p))) return `${m[1]} 个视频`;
+    if (/^(\d+ hr)?\s*(\d+ min)?$/.test(p) && /\d/.test(p)) return hrmin(p);
+    if (p === "Curated by Claude") return "由 Claude 精选";
+    return null;
+  }
+
+  const PATTERNS = [
+    // "3 HN recommenders · recommended in 4 months, 2015–2023"
+    [/^(\d+) HN recommenders? · recommended in (\d+) months?, (.+)$/, (m) => `${m[1]} 位 HN 用户推荐 · 在 ${m[2]} 个不同月份被推荐，${m[3]}`],
+    [/^Cited (\d+)× on HN, (.+)$/, (m) => `在 HN 被引用 ${m[1]} 次，${m[2]}`],
+    [/^(\d+) comments? from Hacker News$/, (m) => `来自 Hacker News 的 ${m[1]} 条评论`],
+    [/^(\d{4}) · in “(.*)”$/, (m) => `${m[1]} · 发表于「${m[2]}」`],
+    [/^Topic match · (.+)$/, (m) => `主题匹配 · ${m[1]}`],
+    [/^topics in (\d+) areas$/, (m) => `个主题，分属 ${m[1]} 个领域`],
+    [/^No videos match “(.*)” with these filters\.$/, (m) => `没有符合筛选条件的“${m[1]}”相关视频。`],
+    [/^No strong matches for “(.*)”\. Here are the closest videos\.$/, (m) => `没有与“${m[1]}”高度匹配的视频，以下是最接近的结果。`],
+    [/^Something went wrong \((.*)\)\.$/, (m) => `出错了（${m[1]}）。`],
+  ];
+
+  // Returns the Chinese for a whole UI string, or null when the string isn't one we know.
+  function localize(text) {
+    const t = text.trim();
+    if (!t) return null;
+    if (EXACT[t]) return EXACT[t];
+    for (const [re, fn] of PATTERNS) { const m = re.exec(t); if (m) return fn(m); }
+    // metadata lines joined by " • " or " · ": translate only if every piece is known
+    const parts = t.split(/\s+([•·])\s+/);
+    const out = [];
+    for (let i = 0; i < parts.length; i++) {
+      if (i % 2) { out.push(` ${parts[i]} `); continue; }
+      const z = piece(parts[i]);
+      if (z == null) return null;
+      out.push(z);
+    }
+    return out.join("");
+  }
+
+  return { localize, EXACT };
+});

package/manifest.json

@@ -0,0 +1,60 @@
+{
+  "manifest_version": 3,
+  "name": "HackerTube 中文助手",
+  "short_name": "HackerTube 中文",
+  "version": "0.1.2",
+  "homepage_url": "https://github.com/crisxuan/hackertube-zh",
+  "description": "为 HackerTube 提供实时中文：双语界面，视频标题、简介和 HN 评论翻译，以及嵌入视频的实时中英双语字幕。",
+  "minimum_chrome_version": "116",
+  "icons": {
+    "16": "icons/icon16.png",
+    "32": "icons/icon32.png",
+    "48": "icons/icon48.png",
+    "128": "icons/icon128.png"
+  },
+  "permissions": ["storage", "unlimitedStorage", "declarativeNetRequestWithHostAccess"],
+  "host_permissions": [
+    "https://hackertube.org/*",
+    "https://www.hackertube.org/*",
+    "https://www.youtube-nocookie.com/*",
+    "https://translate.googleapis.com/*",
+    "https://api.anthropic.com/*",
+    "https://api.openai.com/*"
+  ],
+  "optional_host_permissions": ["https://*/*", "http://*/*"],
+  "background": {
+    "service_worker": "background.js",
+    "type": "module"
+  },
+  "content_scripts": [
+    {
+      "matches": ["https://hackertube.org/*", "https://www.hackertube.org/*"],
+      "js": ["lib/textutil.js", "lib/uidict.js", "lib/runtime.js", "content/site.js"],
+      "css": ["content/site.css"],
+      "run_at": "document_idle"
+    },
+    {
+      "matches": ["https://www.youtube-nocookie.com/embed/*", "https://www.youtube.com/embed/*"],
+      "js": ["content/player-main.js"],
+      "world": "MAIN",
+      "all_frames": true,
+      "run_at": "document_start"
+    },
+    {
+      "matches": ["https://www.youtube-nocookie.com/embed/*", "https://www.youtube.com/embed/*"],
+      "js": ["lib/subtitles.js", "lib/runtime.js", "content/player.js"],
+      "css": ["content/player.css"],
+      "all_frames": true,
+      "run_at": "document_start"
+    }
+  ],
+  "action": {
+    "default_title": "HackerTube 中文助手",
+    "default_popup": "popup/popup.html",
+    "default_icon": {
+      "16": "icons/icon16.png",
+      "32": "icons/icon32.png"
+    }
+  },
+  "options_page": "options/options.html"
+}

package/options/options.css

@@ -0,0 +1,30 @@
+body { background: var(--bg2); }
+main { max-width: 720px; margin: 0 auto; padding: 32px 16px 48px; }
+header { display: flex; gap: 14px; align-items: center; margin-bottom: 20px; }
+header h1 { font-size: 20px; }
+header .hint { margin: 2px 0 0; }
+.card { background: var(--bg); border-radius: 12px; padding: 18px 20px; margin-bottom: 16px; }
+.card h2 { font-size: 15px; color: var(--text); font-weight: 600; margin-bottom: 14px; }
+.field { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
+.field > span:first-child { width: 88px; flex: none; color: var(--muted); }
+.field .seg { flex: 1; max-width: 360px; }
+.field input[type=range] { flex: 1; max-width: 300px; accent-color: var(--accent); }
+.field output { width: 44px; }
+.field.check { align-items: flex-start; }
+.field.check span { width: auto; color: var(--text); }
+.field.check .hint.block { display: block; margin-top: 4px; color: var(--muted); }
+.engines { display: grid; gap: 8px; margin-bottom: 14px; }
+.engine { display: grid; grid-template-columns: 20px 1fr; column-gap: 8px; padding: 10px 12px;
+  border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
+.engine:has(input:checked) { border-color: var(--accent); }
+.engine input { grid-row: span 2; margin-top: 3px; accent-color: var(--accent); }
+.engine span { color: var(--muted); font-size: 13px; }
+.cfg { display: none; padding: 12px; background: var(--bg2); border-radius: 8px; margin-bottom: 14px; }
+.cfg.on { display: block; }
+.cfg label { display: block; margin-bottom: 10px; color: var(--muted); font-size: 13px; }
+.cfg label input, .cfg label select { margin-top: 4px; }
+.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+.actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+#msg, #cacheMsg { font-size: 13px; }
+code { background: var(--bg2); padding: 1px 4px; border-radius: 4px; font-size: 12px; }
+@media (max-width: 560px) { .two { grid-template-columns: 1fr; } .field:not(.check) { flex-wrap: wrap; } }

package/options/options.html

@@ -0,0 +1,111 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<title>HackerTube 中文助手 · 设置</title>
+<link rel="stylesheet" href="../ui/common.css">
+<link rel="stylesheet" href="options.css">
+</head>
+<body>
+<main>
+  <header>
+    <img src="../icons/icon128.png" alt="" width="40" height="40">
+    <div>
+      <h1>HackerTube 中文助手</h1>
+      <p class="hint">为 hackertube.org 提供双语界面、标题/简介/评论翻译和实时中文字幕。</p>
+    </div>
+  </header>
+
+  <section class="card">
+    <h2>显示</h2>
+    <div class="field">
+      <span>网页翻译</span>
+      <div class="seg" data-key="pageMode">
+        <button value="bilingual">双语对照</button><button value="zh">仅中文</button><button value="off">关闭</button>
+      </div>
+    </div>
+    <div class="field">
+      <span>视频字幕</span>
+      <div class="seg" data-key="subMode">
+        <button value="bilingual">中英双语</button><button value="zh">仅中文</button><button value="off">关闭</button>
+      </div>
+    </div>
+    <label class="field"><span>字幕大小</span>
+      <input type="range" id="subScale" min="0.7" max="1.8" step="0.1"><output id="subScaleOut"></output></label>
+    <div class="field">
+      <span>字幕样式</span>
+      <div class="seg" data-key="subStyle">
+        <button value="outline">描边（不挡画面）</button><button value="box">半透明底框（白底幻灯片更清楚）</button>
+      </div>
+    </div>
+    <label class="field"><span>字幕离底部</span>
+      <input type="range" id="subBottom" min="2" max="30" step="1"><output id="subBottomOut"></output></label>
+    <label class="field check"><input type="checkbox" id="searchTranslate">
+      <span>搜索框输入中文时，先翻译成英文再搜索（HackerTube 的搜索只理解英文）</span></label>
+  </section>
+
+  <section class="card">
+    <h2>播放</h2>
+    <label class="field check"><input type="checkbox" id="embedLogin">
+      <span>用我的 YouTube 登录状态播放
+        <span class="hint block">HackerTube 用 youtube-nocookie.com 嵌入视频，这个域名读不到你的 YouTube 登录，网络环境被 YouTube 怀疑时（常见于代理 / VPN 节点）就会一直提示 “Sign in to confirm you're not a bot”。
+          打开后，HackerTube 里的视频改由 youtube.com 播放，能用上你已登录的账号，中文字幕照常显示。
+          代价：观看会计入你的 YouTube 历史记录。需要 Chrome 允许第三方 Cookie（无痕窗口默认不允许）。开启后刷新视频页生效。</span></span></label>
+  </section>
+
+  <section class="card">
+    <h2>翻译引擎</h2>
+    <div class="engines">
+      <label class="engine"><input type="radio" name="engine" value="google">
+        <b>Google 翻译</b><span>免费、无需配置、速度快。需要能访问 translate.googleapis.com。</span></label>
+      <label class="engine"><input type="radio" name="engine" value="claude">
+        <b>Claude</b><span>理解上下文，字幕和评论翻得更自然。按 Anthropic API 用量计费。</span></label>
+      <label class="engine"><input type="radio" name="engine" value="openai">
+        <b>OpenAI 兼容接口</b><span>OpenAI、DeepSeek、通义千问、Moonshot、本地 Ollama 等任何 /chat/completions 接口。</span></label>
+    </div>
+
+    <div class="cfg" data-for="claude">
+      <label>Claude API Key<input type="password" id="claudeKey" placeholder="sk-ant-…" autocomplete="off"></label>
+      <div class="two">
+        <label>模型<input type="text" id="claudeModel" list="claudeModels"></label>
+        <label>思考力度（effort）
+          <select id="claudeEffort">
+            <option value="low">low（推荐，翻译够用且最快）</option>
+            <option value="medium">medium</option>
+            <option value="high">high</option>
+            <option value="">模型默认</option>
+          </select></label>
+      </div>
+      <datalist id="claudeModels">
+        <option value="claude-opus-5-5"><option value="claude-sonnet-5-5"><option value="claude-haiku-5-5">
+      </datalist>
+      <p class="hint">Key 只保存在本机（chrome.storage.local），不会同步，也只发送给 api.anthropic.com。</p>
+    </div>
+
+    <div class="cfg" data-for="openai">
+      <label>接口地址（Base URL）<input type="url" id="openaiBaseUrl" placeholder="https://api.openai.com/v1"></label>
+      <div class="two">
+        <label>模型<input type="text" id="openaiModel" placeholder="例如 deepseek-chat"></label>
+        <label>API Key<input type="password" id="openaiKey" placeholder="本地 Ollama 可留空" autocomplete="off"></label>
+      </div>
+      <p class="hint">示例：DeepSeek <code>https://api.deepseek.com/v1</code> + <code>deepseek-chat</code>；
+        Ollama <code>http://localhost:11434/v1</code> + 本地模型名。保存时浏览器会请求访问该地址的权限。</p>
+    </div>
+
+    <div class="actions">
+      <button class="primary" id="save">保存</button>
+      <button class="plain" id="test">测试当前引擎</button>
+      <span id="msg"></span>
+    </div>
+  </section>
+
+  <section class="card">
+    <h2>缓存</h2>
+    <p>已缓存 <b id="cacheCount">…</b> 条译文。看过的视频和页面再次打开时直接使用缓存，不再请求翻译。</p>
+    <div class="actions"><button class="plain" id="clearCache">清空缓存</button><span id="cacheMsg"></span></div>
+  </section>
+</main>
+<script src="../lib/runtime.js"></script>
+<script src="options.js"></script>
+</body>
+</html>

package/options/options.js

@@ -0,0 +1,99 @@
+const R = globalThis.HTZ.runtime;
+const $ = (s) => document.querySelector(s);
+const send = (msg) => new Promise((resolve) => chrome.runtime.sendMessage(msg, resolve));
+
+function setMsg(el, text, cls = "") { el.textContent = text; el.className = cls; }
+
+function paintSegs(s) {
+  for (const seg of document.querySelectorAll(".seg")) {
+    for (const b of seg.querySelectorAll("button")) b.classList.toggle("on", b.value === s[seg.dataset.key]);
+  }
+}
+
+function paint(s, secrets) {
+  paintSegs(s);
+  $("#subScale").value = s.subScale;
+  $("#subScaleOut").textContent = `${Math.round(s.subScale * 100)}%`;
+  $("#subBottom").value = s.subBottom;
+  $("#subBottomOut").textContent = `${s.subBottom}%`;
+  $("#searchTranslate").checked = s.searchTranslate;
+  $("#embedLogin").checked = s.embedLogin;
+  const radio = document.querySelector(`input[name=engine][value="${s.engine}"]`);
+  if (radio) radio.checked = true;
+  showCfg(s.engine);
+  $("#claudeModel").value = s.claudeModel;
+  $("#claudeEffort").value = s.claudeEffort;
+  $("#openaiBaseUrl").value = s.openaiBaseUrl;
+  $("#openaiModel").value = s.openaiModel;
+  if (secrets) {
+    $("#claudeKey").value = secrets.claudeKey || "";
+    $("#openaiKey").value = secrets.openaiKey || "";
+  }
+}
+
+const showCfg = (engine) => document.querySelectorAll(".cfg").forEach((c) => c.classList.toggle("on", c.dataset.for === engine));
+const selectedEngine = () => document.querySelector("input[name=engine]:checked")?.value || "google";
+
+async function refreshCache() {
+  const r = await send({ type: "cacheStats" });
+  $("#cacheCount").textContent = r && r.ok ? r.entries.toLocaleString("zh-CN") : "?";
+}
+
+// Display settings apply immediately; engine settings wait for 保存 because they need keys and permissions.
+for (const seg of document.querySelectorAll(".seg")) {
+  seg.addEventListener("click", async (e) => {
+    const b = e.target.closest("button");
+    if (b) paintSegs(await R.saveSettings({ [seg.dataset.key]: b.value }));
+  });
+}
+for (const [id, fmt] of [["subScale", (v) => `${Math.round(v * 100)}%`], ["subBottom", (v) => `${v}%`]]) {
+  $(`#${id}`).addEventListener("input", (e) => { $(`#${id}Out`).textContent = fmt(+e.target.value); });
+  $(`#${id}`).addEventListener("change", (e) => R.saveSettings({ [id]: +e.target.value }));
+}
+$("#searchTranslate").addEventListener("change", (e) => R.saveSettings({ searchTranslate: e.target.checked }));
+$("#embedLogin").addEventListener("change", (e) => R.saveSettings({ embedLogin: e.target.checked }));
+document.querySelectorAll("input[name=engine]").forEach((r) => r.addEventListener("change", () => showCfg(selectedEngine())));
+
+async function save() {
+  const msg = $("#msg");
+  const engine = selectedEngine();
+  const patch = {
+    engine,
+    claudeModel: $("#claudeModel").value.trim() || R.DEFAULTS.claudeModel,
+    claudeEffort: $("#claudeEffort").value,
+    openaiBaseUrl: $("#openaiBaseUrl").value.trim().replace(/\/+$/, ""),
+    openaiModel: $("#openaiModel").value.trim(),
+  };
+  if (engine === "claude" && !$("#claudeKey").value.trim()) return setMsg(msg, "请填写 Claude API Key", "err"), false;
+  if (engine === "openai") {
+    let url;
+    try { url = new URL(patch.openaiBaseUrl); } catch { return setMsg(msg, "接口地址不是有效的网址", "err"), false; }
+    if (!patch.openaiModel) return setMsg(msg, "请填写模型名", "err"), false;
+    // the service worker can only reach hosts the user has granted; ask for exactly this one
+    const origin = `${url.protocol}//${url.hostname}/*`;
+    const granted = await chrome.permissions.request({ origins: [origin] }).catch(() => false);
+    if (!granted) return setMsg(msg, `需要授权访问 ${url.hostname} 才能使用该接口`, "err"), false;
+  }
+  await R.saveSecrets({ claudeKey: $("#claudeKey").value.trim(), openaiKey: $("#openaiKey").value.trim() });
+  await R.saveSettings(patch);
+  setMsg(msg, "已保存", "ok");
+  return true;
+}
+
+$("#save").addEventListener("click", save);
+$("#test").addEventListener("click", async () => {
+  const msg = $("#msg");
+  if (!(await save())) return;
+  setMsg(msg, "测试中…");
+  const r = await send({ type: "testEngine" });
+  if (r && r.ok) setMsg(msg, `${r.engine} 可用（${r.ms} ms）：${r.translations.join(" / ")}`, "ok");
+  else setMsg(msg, `失败：${r ? r.error : "无响应"}`, "err");
+});
+$("#clearCache").addEventListener("click", async () => {
+  const r = await send({ type: "clearCache" });
+  setMsg($("#cacheMsg"), r && r.ok ? `已清除 ${r.removed} 条` : "清除失败", r && r.ok ? "ok" : "err");
+  refreshCache();
+});
+
+Promise.all([R.loadSettings(), R.loadSecrets()]).then(([s, secrets]) => paint(s, secrets));
+refreshCache();

package/package.json

@@ -1,6 +1,42 @@
 {
   "name": "hackertube-zh",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.2",
+  "description": "HackerTube 中文助手 Chrome 扩展：双语界面、标题评论翻译、实时中文字幕。npx hackertube-zh 一行安装。",
+  "keywords": ["hackertube", "chrome-extension", "translation", "subtitles", "chinese"],
+  "author": "crisxuan",
+  "license": "MIT",
+  "homepage": "https://github.com/crisxuan/hackertube-zh#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/crisxuan/hackertube-zh.git"
+  },
+  "bugs": {
+    "url": "https://github.com/crisxuan/hackertube-zh/issues"
+  },
+  "bin": {
+    "hackertube-zh": "bin/install.js"
+  },
+  "files": [
+    "bin",
+    "manifest.json",
+    "background.js",
+    "lib",
+    "content",
+    "popup",
+    "options",
+    "ui",
+    "icons"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "test": "node --test \"tests/*.test.js\"",
+    "check": "node scripts/check.js",
+    "icons": "node scripts/render-icons.js",
+    "zip": "node scripts/check.js && rm -f dist/hackertube-zh.zip && mkdir -p dist && zip -r dist/hackertube-zh.zip manifest.json background.js lib content popup options ui icons"
+  }
+}

package/popup/popup.css

@@ -0,0 +1,11 @@
+body { width: 320px; padding: 14px 16px 12px; }
+header { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
+section { margin-bottom: 14px; }
+.row { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--muted); font-size: 13px; }
+.row input { flex: 1; accent-color: var(--accent); }
+.row output { width: 34px; text-align: right; color: var(--text); }
+.row .seg { flex: 1; font-size: 13px; }
+.row .seg button { padding: 4px; }
+.toggle { display: flex; align-items: center; gap: 8px; margin-top: 12px; cursor: pointer; }
+.toggle input { accent-color: var(--accent); margin: 0; }
+footer { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 10px; font-size: 13px; }

package/popup/popup.html

@@ -0,0 +1,55 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<title>HackerTube 中文助手</title>
+<link rel="stylesheet" href="../ui/common.css">
+<link rel="stylesheet" href="popup.css">
+</head>
+<body>
+  <header>
+    <img src="../icons/icon48.png" alt="" width="24" height="24">
+    <h1>HackerTube 中文助手</h1>
+  </header>
+
+  <section>
+    <h2>网页翻译</h2>
+    <div class="seg" data-key="pageMode">
+      <button value="bilingual">双语对照</button><button value="zh">仅中文</button><button value="off">关闭</button>
+    </div>
+  </section>
+
+  <section>
+    <h2>视频字幕</h2>
+    <div class="seg" data-key="subMode">
+      <button value="bilingual">中英双语</button><button value="zh">仅中文</button><button value="off">关闭</button>
+    </div>
+    <label class="row">字幕大小
+      <input type="range" id="subScale" min="0.7" max="1.8" step="0.1">
+      <output id="subScaleOut"></output>
+    </label>
+    <div class="row">字幕样式
+      <div class="seg" data-key="subStyle"><button value="outline">描边</button><button value="box">半透明底框</button></div>
+    </div>
+    <label class="toggle"><input type="checkbox" id="embedLogin"><span>用我的 YouTube 登录状态播放</span></label>
+    <p class="hint">播放器提示 “Sign in to confirm you're not a bot” 时打开。观看会计入你的 YouTube 历史记录，开启后刷新视频页生效。</p>
+  </section>
+
+  <section>
+    <h2>翻译引擎</h2>
+    <select id="engine">
+      <option value="google">Google 翻译（免费，无需配置）</option>
+      <option value="claude">Claude（需 API Key）</option>
+      <option value="openai">OpenAI 兼容接口（DeepSeek / 通义 / Ollama…）</option>
+    </select>
+    <p class="hint" id="engineHint"></p>
+  </section>
+
+  <footer>
+    <a href="#" id="openOptions">更多设置</a>
+    <a href="https://hackertube.org" target="_blank" rel="noopener">打开 HackerTube</a>
+  </footer>
+  <script src="../lib/runtime.js"></script>
+  <script src="popup.js"></script>
+</body>
+</html>

package/popup/popup.js

@@ -0,0 +1,43 @@
+const R = globalThis.HTZ.runtime;
+const $ = (s) => document.querySelector(s);
+
+async function engineHint(s) {
+  const secrets = await R.loadSecrets();
+  const el = $("#engineHint");
+  el.className = "hint";
+  if (s.engine === "google") el.textContent = "免费可用。需要能访问 translate.googleapis.com 的网络。";
+  else if (s.engine === "claude") {
+    el.textContent = secrets.claudeKey ? `模型：${s.claudeModel}` : "还没有填写 Claude API Key，请到“更多设置”中填写。";
+    if (!secrets.claudeKey) el.classList.add("err");
+  } else {
+    const ready = s.openaiBaseUrl && s.openaiModel;
+    el.textContent = ready ? `${s.openaiModel} @ ${new URL(s.openaiBaseUrl).host}` : "还没有配置接口地址和模型，请到“更多设置”中填写。";
+    if (!ready) el.classList.add("err");
+  }
+}
+
+function paint(s) {
+  for (const seg of document.querySelectorAll(".seg")) {
+    for (const b of seg.querySelectorAll("button")) b.classList.toggle("on", b.value === s[seg.dataset.key]);
+  }
+  $("#subScale").value = s.subScale;
+  $("#subScaleOut").textContent = `${Math.round(s.subScale * 100)}%`;
+  $("#engine").value = s.engine;
+  $("#embedLogin").checked = s.embedLogin;
+  engineHint(s);
+}
+
+R.loadSettings().then(paint);
+
+for (const seg of document.querySelectorAll(".seg")) {
+  seg.addEventListener("click", async (e) => {
+    const b = e.target.closest("button");
+    if (b) paint(await R.saveSettings({ [seg.dataset.key]: b.value }));
+  });
+}
+// label follows the drag; the setting is written once on release (storage.sync limits writes per minute)
+$("#subScale").addEventListener("input", (e) => { $("#subScaleOut").textContent = `${Math.round(e.target.value * 100)}%`; });
+$("#subScale").addEventListener("change", async (e) => paint(await R.saveSettings({ subScale: +e.target.value })));
+$("#engine").addEventListener("change", async (e) => paint(await R.saveSettings({ engine: e.target.value })));
+$("#embedLogin").addEventListener("change", async (e) => paint(await R.saveSettings({ embedLogin: e.target.checked })));
+$("#openOptions").addEventListener("click", (e) => { e.preventDefault(); chrome.runtime.openOptionsPage(); });

package/ui/common.css

@@ -0,0 +1,41 @@
+:root {
+  --bg: #ffffff; --bg2: #f2f2f2; --text: #0f0f0f; --muted: #606060; --line: #e5e5e5;
+  --accent: #ff6600; --on: #0f0f0f; --on-text: #ffffff; --err: #c62828; --ok: #2e7d32;
+  color-scheme: light dark;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #181818; --bg2: #272727; --text: #f1f1f1; --muted: #aaaaaa; --line: #333333;
+    --on: #f1f1f1; --on-text: #0f0f0f; --err: #ef5350; --ok: #66bb6a;
+  }
+}
+* { box-sizing: border-box; }
+body {
+  margin: 0; background: var(--bg); color: var(--text);
+  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
+}
+h1 { font-size: 16px; margin: 0; font-weight: 600; }
+h2 { font-size: 13px; margin: 0 0 8px; color: var(--muted); font-weight: 500; }
+a { color: var(--accent); text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+.seg { display: flex; background: var(--bg2); border-radius: 8px; padding: 3px; gap: 3px; }
+.seg button {
+  flex: 1; border: 0; background: transparent; color: var(--text); padding: 6px 4px; border-radius: 6px;
+  font: inherit; cursor: pointer;
+}
+.seg button:hover { background: rgba(127,127,127,.15); }
+.seg button.on { background: var(--on); color: var(--on-text); }
+
+select, input[type=text], input[type=password], input[type=url] {
+  width: 100%; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px;
+  background: var(--bg); color: var(--text); font: inherit;
+}
+button.primary, button.plain {
+  border: 1px solid var(--line); border-radius: 6px; padding: 6px 14px; font: inherit; cursor: pointer;
+  background: var(--bg2); color: var(--text);
+}
+button.primary { background: var(--on); color: var(--on-text); border-color: var(--on); }
+.hint { color: var(--muted); font-size: 12px; margin: 6px 0 0; }
+.err { color: var(--err); }
+.ok { color: var(--ok); }