轻量级浏览器摘记工具：随手摘录网页文字与截图，全部数据保存在本地，支持中文 / English。
A lightweight browser note-clipping extension. Capture text and screenshots from any webpage; all data stays local.
- 文字摘记：选中文字后右键「添加到摘记本」，或选中后点击浮动「摘记」按钮。自动记录来源 URL、页面标题、保存时间；原样保留换行与缩进格式。
- 截图摘记：面板中点击「截图摘记」，在页面空白处右键「截图摘记」，或使用快捷键
Alt+Shift+S，框选当前标签页任意区域保存为图片摘记。保存后自动关闭裁剪页，支持手动关闭。 - 图片摘记：在网页图片上右键「保存图片到摘记本」。对于图片上有遮罩、或站点屏蔽原生右键菜单的页面（如小红书、抖音），右键时会自动出现浮动「摘记此图」按钮，点击即可保存。
- 图片兜底下载：后台保存失败（如
blob:图片、防盗链）时，自动转入页面上下文抓取并回传，大幅提高社交网站图片保存成功率；防盗链图床（如微博sinaimg.cn）会通过临时declarativeNetRequest会话规则改写 Referer 后重试（规则仅对图片域名生效，抓取完立即删除）；失败会记录到错误报告。
- 列表视图：面板（Chrome/Edge 侧边栏 / Firefox 弹窗）中倒序展示；较长摘记默认折叠，点击「展开」查看全部；显示来源标题（可点击回原文）、相对时间、来源域名；单击图片摘记可在新标签页中查看大图。
- 搜索与筛选：按关键词实时搜索摘记内容、标题和批注；按「文字 / 图片」类型、星标、标签快速筛选。
- 批注：为任意摘记添加自由文本批注，自动保存。
- 反馈提示：摘记录入 / 删除时在列表上方弹出轻量 toast 提示，显示内容摘要（前 10 字）。
- 标签系统：自定义标签，支持为摘记批量打标签；面板标签栏一键筛选；标签可在设置页统一新增 / 重命名 / 删除。
- 星标收藏：为重要摘记加星标，配合筛选快速定位。
- 删除确认：点击删除后原位显示「确认删除 / 取消」，确认后 toast 提示已删除内容摘要。
- 深色模式：跟随系统 / 强制浅色 / 强制深色；Edge 风格暗色面板。
- 主题色：可自定义强调色（accent color），实时生效，面板与内容脚本浮动按钮同步跟随。
- 浮动按钮开关：设置页「摘记」分区可关闭内容脚本浮动按钮（含浮动摘图按钮），实时生效，无需刷新。
- 自动保存下载图片：可选关闭 / 所有网站 / 仅指定网站（域名列表）；浏览器下载图片时自动保存一份图片摘记到摘记本。
- 数据备份：备份为 ZIP 压缩包（
data.json+images/图片文件夹，体积更小），支持按当前筛选导出、轻量备份（不含图片）；另支持单文件网页 HTML 导出（图片内嵌，双击浏览器即可查看，可直接分享）；导入前显示预览（条目数、图片数、重复数），支持跳过重复内容（按内容指纹识别，两台设备摘的同一条不会重复入库），导入过程逐条容错并报告「成功 / 跳过 / 失败」统计。 - 备份提醒：可开启定期备份提醒（每周 / 每两周 / 每月），通过浏览器通知提醒（点击通知直达设置页）。
- 快捷键：
Alt+Shift+N打开摘记本面板（Chrome/Edge 打开侧边栏，Firefox 打开弹窗），Alt+Shift+S开始截图摘记；均可在浏览器快捷键设置页修改。 - 错误报告：设置页可查看摘记失败记录（时间、来源、网址、错误摘要，最多 100 条），支持一键清空，便于排查防盗链等站点问题。
面板右上角 ⚙ 进入，包含：
- 外观：主题模式（跟随系统 / 浅色 / 深色）、强调色选择器（预设色板 + 自定义颜色）。
- 摘记：浮动摘记按钮开关。
- 数据备份：导出 / 导入按钮，上次备份时间显示。
- 标签管理：新增标签、重命名（直接编辑）、删除（原位确认）。
- 快捷键：当前快捷键展示，可跳转浏览器设置页修改。
- 备份提醒：开启 / 关闭、频率选择。
说明：截图仅捕获当前标签页的可见区域，无法截取浏览器内置 PDF 阅读器、页面未滚动显示的部分或浏览器外区域。
- 所有摘记、批注、标签、图片及错误报告均保存在浏览器本地的 IndexedDB 中，关闭浏览器或重启电脑后不丢失。
- 插件不联网、不上传任何数据；请求
<all_urls>权限仅用于在任意网页读取选中文字与页面标题、下载图片摘记，所有操作均由用户主动触发。
- 构建工具：WXT（基于 Vite 的浏览器扩展框架）
- 语言：TypeScript
- 数据库：Dexie.js（IndexedDB 封装）
- ZIP 导出：fflate
- 图标：
@wxt-dev/auto-icons（从 SVG 自动生成各尺寸图标）
| 浏览器 | 面板形式 | 说明 |
|---|---|---|
| Chrome | 侧边栏（Side Panel） | 原生 sidePanel API |
| Edge | 侧边栏（Side Panel） | 同 Chrome |
| Firefox | 工具栏弹窗（Popup） | manifest 中排除 sidePanel |
- 新增：单文件网页 HTML 导出——图片内嵌、样式自带，双击浏览器即可查看，可直接分享或导入其他笔记软件
- 改进：文字摘记「复制」升级为富文本（含来源链接与时间），粘贴到印象笔记 / OneNote / 有道云等编辑器直接成笔记
- 修复：英文环境下截图页标题、查看页空态、面板初始标题、Markdown 导出内容等多处仍显示中文的国际化问题
- 变更：备份格式升级为 ZIP（
data.json+images/图片文件夹），体积更小、解析更快；旧版单文件 JSON 备份不再支持导入 - 新增：导入预览——显示文件包含的条目数、图片数与重复数
- 新增：「跳过重复内容」选项，按内容指纹识别跨设备重复摘记
- 新增：轻量备份选项（不含图片，仅导出文字摘记）
- 改进：导入逐条容错——单条损坏不再导致整包失败，完成后报告「成功 / 跳过 / 失败」统计
- 改进：导出与导入增加进度显示，大文件操作不再像卡死
- 改进：备份导出改用 Blob 直出下载，避免 base64 转换的额外内存开销
- 新增：卡片「复制」按钮——文字一键复制文本，图片一键复制图像到剪贴板
- 新增：列表滚动分页加载，摘记数量多时依然流畅
- 新增：搜索关键词高亮显示
- 新增：批量多选模式——批量删除、批量添加标签
- 新增：导出可按当前筛选结果导出（JSON / Markdown ZIP）
- 新增：点击文字摘记的来源链接，自动跳转原文并高亮对应位置
- 新增：设置页显示摘记数量与存储占用统计
- 改进：备份提醒通知点击直达设置页
- 改进：错误报告支持一键复制单条详情，便于反馈问题
- 改进：工具栏重排——筛选一行、操作一行，标签随行换行不再溢出
- 改进：星标五角星金色显示，筛选栏星标改为金色星星
- 改进：标签输入失焦自动保存、阻止重复添加；多选加标签弹窗支持点选已有标签
- 改进：设置页标签管理改为平铺 chips（点击重命名、原位确认删除）
- 变更：扩展名称调整为「摘记本 - 网页摘录·截图·图片剪藏」，侧边栏与工具栏悬停显示短名「摘记本」
- 变更：浏览器内术语统一为「摘记」
- 修复：补充 Firefox
data_collection_permissionsmanifest 声明
- 新增：截图摘记快捷键
Alt+Shift+S - 新增：右键浮动「摘记此图」按钮，支持小红书、抖音等有遮罩或自定义右键菜单的页面
- 新增：图片查看页——列表中单击图片摘记，在新标签页查看大图
- 新增：设置页错误报告，记录摘记失败的时间、来源与网址
- 改进：图片保存增强——页面上下文兜底抓取、防盗链图床自动改写 Referer 重试（微博等）
- 新增：导出 Markdown ZIP（
notes.md+images/图片文件夹） - 新增：摘记列表「文字 / 图片」类型筛选
- 改进：截图保存成功后倒计时自动关闭
- 变更：暂时停用「自动保存下载图片」功能
环境要求：Node.js ≥ 22。
npm install # 安装依赖
npm run dev # 开发模式（Chrome）
npm run dev:firefox # 开发模式（Firefox）
npm run build # 构建 Chrome 产物
npm run build:firefox # 构建 Firefox 产物
npm run test # 数据层单元测试（vitest，17 项）
npm run compile # TypeScript 类型检查（无输出即通过）
npm run zip # 生成 Chrome + Firefox 发布用 zip 包构建产物位于 .output/。
- Chrome / Edge：打开
chrome://extensions（或edge://extensions）→ 开启「开发者模式」→ 「加载已解压的扩展程序」→ 选择.output/chrome-mv3/。 - Firefox：打开
about:debugging#/runtime/this-firefox→ 「临时载入附加组件」→ 选择.output/firefox-mv3/manifest.json。
安装时会请求以下权限：
| 权限 | 用途 |
|---|---|
<all_urls> |
在任意网页显示浮动摘记按钮、读取选中文字与页面标题、下载右键图片与自动保存下载的图片；摘记操作均由用户主动触发。 |
storage |
本地保存摘记数据与设置（chrome.storage.local）。 |
contextMenus |
右键菜单（添加到摘记本 / 截图摘记 / 保存图片）。 |
downloads |
导出备份文件下载；监听图片下载以支持「自动保存下载图片」功能。 |
declarativeNetRequest |
仅使用临时会话规则：抓取防盗链图片时改写 Referer（单域名、即用即删），无静态规则、不拦截请求。 |
alarms |
备份提醒定时任务。 |
notifications |
备份提醒系统通知。 |
sidePanel（Chrome/Edge） |
侧边栏面板。 |
- 截图仅捕获当前标签页的可见区域，无法截取浏览器内置 PDF 阅读器、页面未滚动显示的部分或浏览器外区域。
- 个别强防盗链网站的图片保存仍可能失败，失败会记录在设置页「错误报告」中。
- 浏览器内置 PDF 阅读器不允许注入脚本，无法在其上直接摘记文字。
- 侧边栏截图框选裁剪页无法在 Firefox 弹窗中使用（弹窗关闭后裁剪页状态可能丢失）。
src/
├─ entrypoints/
│ ├─ background.ts # 后台服务：右键菜单、消息路由、快捷键、备份提醒、自动保存下载图片、stale capture 清理
│ ├─ content/ # 内容脚本：浮动摘记按钮、浮动摘图按钮（页面上下文兜底抓图）、setting 实时跟随
│ ├─ sidepanel/ # Chrome/Edge 侧边栏入口
│ ├─ popup/ # Firefox 弹窗入口
│ ├─ options/ # 设置页（完整设置面板 + 错误报告）
│ ├─ viewer/ # 图片查看页（列表单击图片在新标签页打开大图）
│ └─ capture/ # 截图框选裁剪页（captureVisibleTab + Canvas 裁剪 + 倒计时自动关闭）
├─ panel/ # 面板共享 UI（列表、搜索、类型筛选、批注、标签、导入导出、展开/收起、toast 反馈）
├─ settings/ # 设置模型（Settings 接口）、存取、主题应用（accent + color-mix）
├─ bg/ # 后台逻辑模块
│ ├─ menus.ts # 右键菜单注册与点击处理
│ ├─ messages.ts # runtime.onMessage（saveText / saveImage / startCapture）、图片抓取重试矩阵 + DNR Referer 改写 + 页面兜底
│ ├─ commands.ts # 快捷键（open-panel / start-capture）
│ ├─ capture.ts # 截图 captureVisibleTab → pendingCaptures 表
│ ├─ autoSave.ts # downloads.onCreated → 按设置自动保存下载的图片
│ ├─ sidepanel.ts # sidePanel.setPanelBehavior（Chromium only）
│ └─ reminder.ts # chrome.alarms + notifications 备份提醒
├─ db/ # Dexie 数据层（snippets / tags / pendingCaptures / errorLogs 表）+ 导入导出 + Markdown ZIP
├─ utils/ # i18n（_locales/zh_CN + en）、格式化（esc / relTime / fullTime / domainOf）
├─ assets/ # icon.svg（auto-icons 源）
└─ types.ts # Snippet / Tag / PendingCapture / ErrorLog / ExportFile / BgMessage 类型
public/
└─ _locales/ # 中文 + 英文国际化
tests/
├─ setup.ts # fake-indexeddb + fake-browser + FileReader polyfill
└─ db.test.ts # 17 项数据层单元测试（含错误日志、类型筛选、Markdown 导出）