# ai-web-summarizer **Repository Path**: yaoxingjin/ai-web-summarizer ## Basic Information - **Project Name**: ai-web-summarizer - **Description**: 基于 Chrome Extension MV3 + Side Panel 的网页 AI 摘要与问答插件。在浏览器侧边栏中一键提取当前页正文，调用 DeepSeek / OpenAI 流式生成摘要、关键词或基于页面内容的问答，并支持多格式导出与本地历史记录。 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-07-06 - **Last Updated**: 2026-07-06 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # PageQuill > AI 网页摘要助手 · AI-powered Chrome extension for web summarization & Q&A 基于 Chrome Extension MV3 + Side Panel 的网页 AI 摘要与问答插件。在浏览器侧边栏中一键提取当前页正文，调用 DeepSeek / OpenAI 流式生成摘要、关键词或基于页面内容的问答，并支持多格式导出与本地历史记录。 **当前版本：v1.0.0** · 更新日期：2026-07-06 ## 当前版本（v1.0.0） 本版本为可日常使用的完整基线，主要能力如下： | 类别 | 已支持 | | --- | ---------------------------------------------------- | | 交互 | Side Panel 主界面；摘要 / 关键词 / 问答三模式 | | AI | DeepSeek、OpenAI（gpt-4o-mini）；Port 流式输出；多语言摘要 | | 页面 | Readability 正文提取；知乎推荐/热榜等列表页专用策略；板块识别；标题清理 | | 导出 | Markdown / TXT / Word；列表页专用排版；元数据（标题、URL、板块、类型） | | 展示 | 摘要区 Markdown 渲染（面板内不显示 `*`*，导出保留语法） | | 存储 | 本地历史（IndexedDB）；API Key 仅存 `chrome.storage.local` | | 工程 | Vite + TypeScript 构建；图标自动生成；Word 静态打包（避免 chunk 加载失败） | ### 已知限制 - `chrome://`、应用商店、部分 PDF 等受限页面无法提取正文 - 知乎等 SPA 在「推荐 / 热榜」间切换时 URL 可能不变，需手动重新生成 - `contextMenus` 权限已声明，右键菜单功能尚未实现 - 切换浏览器标签页时，Side Panel 上下文可能不会自动刷新 ## 功能 ### 核心能力 - **摘要 / 关键词 / 智能问答** 三模式切换 - 一键提取当前页正文（Mozilla Readability + 站点适配策略） - **多模型**：DeepSeek / OpenAI（gpt-4o-mini），设置页切换 - **多语言摘要**：中文 / English / 日本語 - Port 长连接流式输出，生成过程实时展示 - 问答支持多轮对话（基于当前页正文上下文） - 本地历史记录（IndexedDB），可回溯查看 ### 页面识别 - 自动识别页面板块（如 `知乎 - 推荐`、`知乎 - 热榜`） - 清理浏览器通知前缀等干扰标题（如「(4 封私信) 首页 - 知乎」） - **列表页专用提取**：针对推荐流、热榜等按 DOM 顺序提取多条内容，摘要时保持原有顺序 ### 导出 - 支持 **Markdown / TXT / Word** 三种格式 - 导出内容含页面标题、URL、板块、页面类型等元数据 - 列表页使用专用排版（总述 + `**标题**：要点`，无人工序号） - 面板内摘要区渲染 Markdown 样式（加粗、段落），导出文件保留原始 MD 语法 ## 环境要求 - Node.js 18+ - Chrome 114+（支持 Side Panel API） ## 快速开始 ```bash cd ai-web-summarizer npm install # 自动执行 npm run icons 生成扩展图标 npm run build ``` ### 加载扩展 1. 打开 Chrome → `chrome://extensions` 2. 开启「开发者模式」 3. 点击「加载已解压的扩展程序」 4. 选择 `**ai-web-summarizer` 项目根目录**（含 `manifest.json` 的目录） ### 配置 1. 右键扩展图标 → **选项**，或在 Side Panel 内跳转设置页 2. 选择 AI 模型（DeepSeek / OpenAI） 3. 填入对应 API Key 并保存 - [DeepSeek API Key](https://platform.deepseek.com/) - [OpenAI API Key](https://platform.openai.com/) 4. 可选：调整摘要长度、是否保存历史 ### 使用 1. 打开普通网页（文章、资讯列表等） 2. 点击扩展图标 → 打开 **Side Panel** 3. 选择模式： - **摘要**：选择输出语言 → 点击「生成摘要」 - **关键词**：点击「提取关键词」 - **问答**：输入问题，基于当前页内容多轮对话 4. 生成完成后可 **复制** 或 **导出 MD / TXT / Word** ## 开发 ```bash npm run dev # watch 模式，修改后需到 chrome://extensions 点刷新 npm run build # 生产构建（含 HTML 路径修正） npm run icons # 从 logo 源图重新生成扩展图标 npm run zip # 打包到 release/pagequill.zip ``` ### 更换扩展图标 ```bash # 1. 替换品牌源图（手动维护，勿直接改 icon*.png） cp your-logo.png assets/brand/logo.png # 2. 重新生成 icon16 / icon48 / icon128 npm run icons # 3. 到 chrome://extensions 刷新扩展 ``` | 文件 | 用途 | | ---------------------------------- | ------------------------------------- | | `assets/brand/logo.png` | **Logo 源文件**（README 展示、图标生成输入） | | `assets/icons/icon{16,48,128}.png` | Chrome 扩展图标（`npm run icons` 自动生成，勿手改） | 图标生成脚本会自动识别纯图标与带标题文字的 Logo，并做裁切、放大与锐化处理。Side Panel 头部使用文字「摘」标识，与扩展图标独立。 ## 项目结构 ``` ai-web-summarizer/ # 项目目录（PageQuill） ├── manifest.json # 扩展配置（加载入口） ├── assets/ │ ├── brand/logo.png # Logo 源文件（README + 图标生成） │ └── icons/ # 扩展图标（自动生成） │ ├── icon16.png │ ├── icon48.png │ └── icon128.png ├── scripts/ │ ├── generate-icons.mjs # 图标生成 │ ├── postbuild.mjs # 构建后 HTML 路径修正 │ └── zip.mjs # 打包脚本 ├── docs/ │ └── 后续优化清单.md # 迭代路线图 ├── src/ │ ├── background/ # Service Worker（流式通信、API 调用） │ ├── content/ # 正文提取、列表页策略、板块识别 │ ├── sidepanel/ # 主 UI │ ├── popup/ # 轻量入口 │ ├── options/ # 设置页 │ └── shared/ # API 抽象、存储、导出、工具函数 └── dist/ # 构建产物 ``` ## 技术栈 - Vite 5 + TypeScript 5 - Chrome Extension MV3（Side Panel、Port 流式通信、Content Script） - @mozilla/readability — 正文提取 - docx — Word 导出 - sharp — 图标生成 - DeepSeek API / OpenAI API ## 注意事项 - 网页正文会发送至您配置的 AI 服务商，首次使用有隐私提示 - API Key 仅存于本机 `chrome.storage.local`，不会同步或上传 ## 版本规划 > 完整迭代清单见 `[docs/后续优化清单.md](docs/后续优化清单.md)` ### v1.1 抛光（下一步） | 项 | 说明 | | ------------------- | --------------------------------------------- | | Tab / SPA 切换感知 | 切换标签或知乎内板块变化时，更新标题并提示重新生成 | | 权限对齐 | 实现右键菜单（摘要当前页 / 选中文字），或移除未用的 `contextMenus` 权限 | | CHANGELOG | 建立版本迭代记录 | | Content Script 按需注入 | 减少全站自动注入，降低干扰、便于商店审核 | ### v1.2 体验增强 | 项 | 说明 | | --------------- | ----------------------- | | 问答区 Markdown 渲染 | 与摘要区展示体验统一 | | 历史记录增强 | 搜索、按 URL / 板块筛选 | | 快捷键 | 如 `Ctrl+Shift+S` 一键生成摘要 | | API 失败重试 | 超时、429 等场景友好提示与重试 | | 单元测试 + CI | 覆盖导出格式、标题清理等纯函数模块 | ### v2.0 功能扩展（按需） | 项 | 说明 | | ----------- | ----------------------------------- | | 划词摘要 | 选中文字后右键或浮动按钮摘要 | | 更多模型 | Claude、Gemini、Ollama / 自定义 Base URL | | 导出 PDF | 基于现有 MD / Word 扩展 | | Chrome 商店上架 | Privacy Policy、截图、权限说明等材料 | ### 路线图概览 ``` v1.0（当前）→ v1.1 抛光 → v1.2 体验 → v2.0 扩展 ├ Tab 感知 ├ 权限/右键菜单 └ CHANGELOG ├ 问答 MD 渲染 ├ 历史搜索 └ 测试 + CI ├ 划词摘要 ├ 更多模型 └ 商店上架 ```