企业官网建设流程全解析

Summarize 浏览器扩展开发与部署指南：Chrome Side Panel 与 Firefox Sidebar 的构建、安装与运行时架构

【免费下载链接】summarizePoint at any URL/YouTube/Podcast or file. Get the gist. CLI and Chrome Extension.项目地址: https://gitcode.com/GitHub_Trending/summarize/summarize

本文以apps/chrome-extension/README.md为核心骨架，系统讲解 Summarize 浏览器扩展在 Chrome 与 Firefox 两大平台上的构建、加载、AI 运行时选择、Daemon 本地伴生进程配对、可选网站自动化以及摘要长度预设等完整实战流程。读者读完本篇后，将能够从零构建并加载扩展、打通 Direct/Browser 免守护进程模式或 Daemon 本地模式，并理解各运行时之间的数据边界与权限模型。

关联文档：apps/chrome-extension/README.md；扩展源码目录：apps/chrome-extension/src；架构总览：docs/chrome-extension.md。

扩展概览与支持平台

Summarize 是一款面向 Chrome 与 Firefox 的浏览器扩展，将 AI 摘要能力直接以流式渲染的方式带入浏览器的侧边栏（Side Panel / Sidebar）中。用户打开任意文章、YouTube 视频、播客或本地文件页面，即可在侧栏获得提炼后的要点（gist）。

原文档明确了两个平台的基线要求：

这些基线在扩展的清单生成配置中有直接对应：Chrome 构建声明minimum_chrome_version: "120"并使用side_panel清单字段，Firefox 构建声明strict_min_version: "140.0"并使用sidebar_action清单字段，见 apps/chrome-extension/wxt.config.ts。Firefox 的快捷键通过 manifest 中的commands._execute_sidebar_action注册，默认值为 Windows/Linux 的Ctrl+Shift+U与 Mac 的Command+Shift+U，用户可在 Firefox 的扩展快捷键管理页中自定义。

扩展还内置了多语言支持：输出摘要的语言设置接受tr/Turkish（土耳其语）作为目标语言；扩展自身的界面语言则可在Options → UI中设置为 Automatic（跟随浏览器）、English 或 Turkish。

从源码构建扩展

仓库使用 pnpm workspace 管理，扩展构建基于 WXT 框架（wxt0.21.x）。所有构建命令都需要在仓库根目录执行，或通过pnpm -C apps/chrome-extension指定包目录。完整命令清单如下（见 apps/chrome-extension/package.json）：

从构建配置（apps/chrome-extension/wxt.config.ts）可以看出几个关键实现细节：

• 多浏览器由环境变量驱动：BROWSER=firefox时产出 Firefox 目标，否则默认为 Chrome；两平台均使用 Manifest V3。
• 版本号与 git hash 注入：构建时读取仓库根目录package.json的version与git rev-parse --short HEAD，通过 Vitedefine注入__SUMMARIZE_VERSION__与__SUMMARIZE_GIT_HASH__。
• React 兼容层：UI 使用 Preact 渲染，并通过 Vite alias 将react/react-dom映射到preact/compat，以减小打包体积。
• 本地 Whisper 运行时资源：Chrome 构建会把 ONNX Runtime WebAssembly 资源（如ort-wasm-simd-threaded.asyncify.wasm）作为静态资产随包输出，供本地端侧转录使用。
• 权限差异：Firefox 清单不包含 Chrome 特有的sidePanel、offscreen、webRequest权限；nativeMessaging与userScripts在两侧都被声明为可选权限（optional_permissions）。

在 Chrome 中安装（Unpacked 加载）

Chrome 不要求签名即可通过“加载已解压的扩展程序”安装本地构建产物，步骤如下：

1. 构建扩展：pnpm -C apps/chrome-extension build
2. 打开 Chrome，访问chrome://extensions（或通过 Chrome 菜单 → 扩展程序 → 管理扩展程序）
3. 打开右上角的开发者模式开关
4. 点击加载已解压的扩展程序
5. 选择构建输出目录：apps/chrome-extension/.output/chrome-mv3
6. 扩展列表中应出现 “Summarize”
7. （可选）将扩展固定到工具栏（拼图图标 → 固定），然后点击图标即可打开 Side Panel

注意：加载未打包扩展必须开启开发者模式，这是 Chrome 的硬性要求。

在 Firefox 中安装（临时附加组件）

Firefox 通过about:debugging加载临时附加组件，无需签名：

1. 构建 Firefox 版本：pnpm -C apps/chrome-extension build:firefox
2. 打开 Firefox，访问about:debugging#/runtime/this-firefox（或 Firefox 菜单 → 更多工具 → “此 Firefox”）
3. 点击加载临时附加组件
4. 选择清单文件：apps/chrome-extension/.output/firefox-mv3/manifest.json
5. 扩展列表中应出现 “Summarize”
6. 通过以下任一方式打开侧边栏：
   • 点击 Summarize 工具栏图标（开/关侧边栏）
   • 键盘快捷键：Ctrl+Shift+U（Windows/Linux）或Cmd+Shift+U（Mac）
   • 菜单：视图 → 侧边栏 → Summarize

自定义快捷键（可选）：访问about:addons→ 扩展 → 齿轮图标 → 管理扩展快捷键，找到 “Summarize” 并点击当前快捷键即可修改。

重要限制：临时附加组件在 Firefox 重启后会被移除。若需永久安装，扩展必须通过 AMO（Firefox Add-ons）签名。Chrome 与 Firefox 在侧栏交互细节上的差异（如 Firefox Sidebar 为常驻侧边栏而非滑入面板、sidebarAction.toggle()替代setPanelBehavior）可参考 apps/chrome-extension/docs/firefox.md。

AI 与媒体运行时：Direct / Daemon × Browser / Daemon

扩展将AI 连接方式与媒体/幻灯片提取方式两条链路解耦，这是理解整个扩展架构的核心：

• AI 连接
  • Direct（直连）：开箱即用。Auto模式优先使用 Chrome 内置的 Gemini Nano Summarizer API，并带 extractive（抽取式）回退；也可以直接调用已配置的 OpenAI、OpenRouter、Anthropic、Gemini、xAI、Z.AI、NVIDIA、MiniMax、GitHub Models、Ollama 或自定义兼容端点。Gemini Nano 也可被显式选中。基于 provider 的聊天（chat）、自动化（automation）与悬停摘要（hover summaries）无需 daemon 即可工作。API 密钥保存在chrome.storage.local中，只发送给所选 provider。
  • Daemon（本地守护进程）：使用本地 Summarize daemon 及其配置的 provider、CLI 回退、缓存与诊断能力。即使显式选择 Gemini Nano，摘要仍在设备端完成，daemon-only 能力依然可用。
• 媒体/幻灯片运行时：可独立选择Browser或Daemon。
  • Browser 媒体：使用 MediaBunny + 原生 WebCodecs 处理可 fetch 的视频幻灯片（上限 128 MB），每张幻灯片用 Gemini Nano 单独总结；对无字幕的 YouTube 视频用本地多语言 Whisper 转写。AI 模型在首次使用时下载并被 Chrome 缓存。
  • Daemon 媒体：额外提供原生工具、可配置的转写 provider、OCR、更广泛的媒体支持，以及 Firefox 媒体支持。

从设置模型看（apps/chrome-extension/src/lib/settings-types.ts），SummaryRuntime的取值为"direct" | "daemon"，SlideRuntime为"browser" | "daemon"；DirectProvider枚举恰为上述十种 provider 类型。也就是说，用户可以在 Options → Runtime 中为 AI 和媒体分别设定运行时，互不干扰。

可选 Daemon：本地伴生进程与配对流程

Daemon 模式的核心是浏览器扩展与本地 HTTP 服务之间的安全配对。完整流程如下：

1. 安装 summarize CLI（任选其一）：
   • npm i -g @steipete/summarize（需要 Node.js 24+）
   • brew install summarize（macOS、Linux）
2. 在Options → Runtime → Daemon中点击Enable local companion，批准 Chrome 的可选“与协作型本地应用通信”权限。将任一运行时切换到Daemon也会触发该显式授权流程。侧边栏的Connectdaemon 提示会直接打开此 Runtime 设置视图。
3. 将 AI 连接或媒体运行时切换到Daemon，然后从扩展复制配对令牌（token）与安装命令。
4. 打开终端：
   • macOS：应用程序 → 实用工具 → 终端
   • Windows：开始菜单 → 终端（或 PowerShell）——务必右键 → 以管理员身份运行
   • Linux：使用你的终端应用
5. 粘贴 Setup 屏幕上的命令并回车：
   • 已安装二进制：summarize daemon install --token <TOKEN> --port 8787
   • 仓库/开发检出：pnpm summarize daemon install --token <TOKEN> --port 8787 --dev --extension-id <UNPACKED_ID>
   • 安装会为精确的 Web Store 扩展 ID注册原生主机com.steipete.summarize。
   • 若使用非默认端口：替换8787，并在Options → Runtime → Daemon → Port中输入相同端口。
6. 回到浏览器，daemon 运行起来后 Daemon runtime 设置界面应自动消失。
7. 验证/排障：
   • summarize daemon status
   • summarize daemon restart

安全与权限边界：Chrome 只通过可选的 native host 与 daemon 通信。manifest 保留了面向已配置 Direct 本地 provider 的 loopback 访问权，但那些请求绝不会进入 daemon 桥接。npm 安装的 Windows CLI 在打包出原生主机.exe之前尚不能在 Daemon 模式下工作（Direct 与 Browser 模式不受影响）。

从架构文档（docs/chrome-extension.md）可进一步确认实现细节：daemon 是监听127.0.0.1（默认端口8787）的 HTTP 服务，提供 token 鉴权的 API 并通过 SSE 流式返回 token；原生主机com.steipete.summarize仅代理/health与/v1/*到配置的 daemon 端口，并保持 SSE 与二进制响应。配对 token 由侧边栏生成（随机 32+ 字节），daemon 侧存储在~/.summarize/daemon.json，扩展侧存储在chrome.storage.local。macOS 以 LaunchAgent 自启、Linux 以 systemd user unit 自启、Windows 以计划任务（Scheduled Task）自启。

企业管控：管理员可以保留 Direct 与 Browser 模式，同时通过 Chrome 策略完全封禁 daemon 访问，具体策略（ExtensionSettings.blocked_permissions: ["nativeMessaging"]、NativeMessagingBlocklist、runtime_blocked_hosts以及daemonAllowed=false的应用层策略）见 docs/chrome-enterprise.md。

可选网站自动化（userScripts 与 debugger）

摘要、聊天与浏览器媒体不需要Chrome 的userScripts或debugger权限。网站自动化默认关闭：

• 在Options → Enable automation permissions中，通过一次显式用户点击请求可选的userScripts权限，从而允许用户主动请求的browserjs()/ REPL 代码在页面上下文中运行。立即执行browserjs()需要 Chrome 135+，而扩展的安装基线仍为 Chrome 120+。
• Chrome 不允许把debugger声明为可选权限。因此标准 Chrome 构建不包含debugger并隐藏 debugger 工具；pnpm -C apps/chrome-extension build:automation会生成一个独立的启用 debugger 的构建，用于原生 click/type/key 输入与显式 debugger 工具。该构建将debugger声明为必需权限，只在执行 debugger-backed 命令期间附加（attach），执行完毕后立即分离（detach）。

这一设计在清单生成逻辑中可见：wxt.config.ts仅在process.env.SUMMARIZE_EXTENSION_DEBUGGER === "1"（即build:automation脚本）时向 Chrome 清单加入debugger权限。

长度预设（Length Presets）

扩展的长度选项与 CLI 完全一致，取值为short|medium|long|xl|xxl，也支持自定义字符目标（如20k）。下拉选项的 tooltip 会展示目标字符数、可接受范围与段落数建议。长度的唯一事实来源是 packages/core/src/prompts/summary-lengths.ts，其中为每个预设定义了完整的规格：

这些规格不仅驱动 tooltip 文案（formatPresetLengthGuidance），还通过SUMMARY_LENGTH_TO_TOKENS等导出映射直接影响请求的maxTokens预算，扩展与 daemon 共用同一份实现，保证两端长度语义一致。

运行时设置速览与延伸阅读

从 apps/chrome-extension/src/lib/settings-types.ts 与 docs/chrome-extension.md 可以梳理出完整的可配置项：

• 模型预设：auto| Gemini Nano（browser/gemini-nano）|free| 自定义字符串（如openai/gpt-5-mini、openrouter/...）。Options 与侧边栏共享模型发现与选择状态（apps/chrome-extension/src/lib/model-presets.ts），daemon 连接后还会通过/v1/models动态刷新可用模型列表到下拉框中。
• 长度：short|medium|long|xl|xxl或字符目标（如20k）。
• 语言：auto（跟随源内容）或语言标签（如en、de、pt-BR），也支持自由文本（如 “German”）。
• 高级覆盖（Options → Advanced）：聊天开关、摘要时间戳[mm:ss]链接、幻灯片并行、OCR 文本、扩展日志、悬停摘要 prompt、pipeline 模式（page|url）、Firecrawl（off|auto|always）、Markdown 模式（readability|llm|auto|off）、预处理（off|auto|always）、YouTube 模式（no-auto|yt-dlp|web|apify）、超时（如90s、2m）、重试次数与最大输出 tokens（如2k）。
• 进程管理器：实时列出 daemon 派生的工具进程（ffmpeg、yt-dlp、tesseract 等）及其日志。

扩展会把当前设置随请求一起发送，daemon 将它们视同 CLI 参数（--model、--length、--language、--prompt）处理。若在部署或排障中遇到 daemon 不可达、Windows 计划任务权限、macOS launchd 错误、字幕缺失等典型问题，可直接查阅 docs/chrome-extension.md 的 Troubleshooting 章节，其中包含summarize daemon status、~/.summarize/logs/daemon.err.log日志定位、extension.log面板事件追踪等具体手段。

综上，Summarize 扩展通过“Direct 直连优先、Daemon 本地增强”的双运行时设计，在隐私（密钥留在本机）、开箱即用（内置 Gemini Nano）与扩展能力（OCR、原生工具、CLI 回退）之间取得了清晰平衡；配合 WXT 的多浏览器构建管线，同一套代码即可产出 Chrome Side Panel 与 Firefox Sidebar 两套体验一致的产物。

【免费下载链接】summarizePoint at any URL/YouTube/Podcast or file. Get the gist. CLI and Chrome Extension.项目地址: https://gitcode.com/GitHub_Trending/summarize/summarize