hackertube-zh 0.0.0-stage → 0.1.0

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,105 @@
+<!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>
+    <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,32 @@
 {
   "name": "hackertube-zh",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "HackerTube 中文助手 Chrome 扩展：双语界面、标题评论翻译、实时中文字幕。npx hackertube-zh 一行安装。",
+  "keywords": ["hackertube", "chrome-extension", "translation", "subtitles", "chinese"],
+  "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": "python3 scripts/make_icons.py",
+    "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,9 @@
+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); }
+.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,52 @@
+<!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>
+    <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); }