简悦 SimpRead 沉浸式阅读扩展全解析：从安装、阅读模式到知识管理生产链

本文以简悦（SimpRead）官方 README（README.md）为骨架，结合本仓库源码（src/ 目录）逐项拆解：如何安装这款「让你瞬间进入沉浸式阅读」的浏览器扩展，阅读模式 / 聚焦模式 / 标注 / 稍后读四大核心功能怎么用，以及它如何通过「阅读模式 + 剪藏 + 标注 + 稍后读」成为知识管理粘合剂。读完你不仅能开箱即用地完成第一次阅读，还能从源码层面理解其站点适配、控制栏快捷键、主题切换与导出链路的底层实现。

项目定位：还原阅读本质的浏览器扩展

简悦（SimpRead）是一款开源的浏览器扩展，官方定位是「让你瞬间进入沉浸式阅读的扩展，还原阅读的本质，提升你的阅读体验」。为了达到「完美的阅读模式」这个小目标，它逐一适配了数百种类型的网站，并在此基础上演进出 2.0 版本的核心能力：

阅读模式 + 剪藏 + 标注 + 稍后读 = 做你的知识管理粘合剂

从仓库结构可以印证这一演进：扩展本体（src/manifest.json）声明为 manifest_version 2 的 Chrome 扩展，图标、页面资源分别位于 src/assets/images 与 src/assets/css；src/read/、src/focus/ 分别承载阅读模式与聚焦模式的实现，src/module/ 则是选项页各配置面板（阅读、聚焦、站点、插件、标注等）的 React 组件。仓库中的 package.json 将其命名为 simpread_project_workflow，用于 SimpRead 的 develop / deploy 工作流。

马上使用：四种安装渠道与适用前提

README 的「马上使用」一节给出了四种安装方式，各有适用平台与前提：

安装渠道	适用平台	说明
Chrome 应用商店	Chrome 桌面版	最主流的安装方式，安装后以扩展形式常驻浏览器
离线 CRX 包	Chrome 系浏览器	适合无法访问商店的环境，手动拖入 chrome://extensions 加载
UserScript（油猴脚本）	支持 UserScript 的浏览器：Apple Safari、Microsoft Edge、Opera、Dolphin	轻阅版，通过脚本管理器运行
JSBox / Android 版	iPhone / iPad、Android	移动端使用方式

需要注意：移动端（JSBox / Android）版本与桌面扩展并非同一代码库，功能与体验存在差异，详见 README 的「简悦各平台版本之间的差异」一节。

开箱即用：四种核心模式的使用方法

README 明确强调简悦「支持开箱即用」，新手只需要掌握两种操作（阅读模式、聚焦模式），再加上标注与稍后读共四种模式。

阅读模式：自动检测 + 三种启动方式

简悦会自动检测当前页面是否已适配：若已适配，浏览器右上角会显示红色图标。启动阅读模式有三种方式：

1. 点击浏览器右上角红色图标；
2. 右键菜单：选择 简悦 - SimpRead → 阅读模式；
3. 快捷键：默认为双击 A；
4. 附加能力：自动进入阅读模式（URL 带 ?simpread_mode=read 参数时也会触发）。

从源码看，这三种启动方式最终汇聚到同一入口。右键菜单由 src/service/menu.js 通过 browser.contextMenus.create 创建，菜单项（聚焦模式、阅读模式、使用阅读模式打开此链接、打开稍后读、将当前页面加入稍后读、白名单 / 排除列表 / 黑名单 / 延迟加载）均可通过 storage.option.menu 逐项开关；后台在 src/background.js 监听 contextMenus.onClicked，将 read 等菜单动作转发给页面脚本。快捷键绑定则位于 src/contentscripts.js：kbd.Bind(<a href="https://link.gitcode.com/i/884230c793a3142b6c8da91808d0f914" target="_blank">storage.read.shortcuts.toLowerCase()], readMode)，其中 read.shortcuts 的默认值就是 "A A"（见 [src/service/storage.js）。

页面脚本收到消息后的处理链路在 src/contentscripts.js：先做 entry 互斥检查（聚焦模式存在时提示先退出），再进入 readMode()，最终调用 src/read/read.jsx 的 Render() 完成阅读页渲染。渲染时会按 theme、fontfamily、fontsize、layout、站点自定义 CSS 依次应用样式，并自动生成目录（toc.Render）。

聚焦模式：不动结构，只做高亮

聚焦模式不改变当前页面的结构，仅仅高亮需要阅读的部分，适合「临时阅读」或「未适配阅读模式」的网站：

• 在需要高亮的区域右键选择 简悦 - SimpRead → 聚焦模式；
• 快捷键：默认为 A S。

其实现位于 src/focus/focus.js：对目标元素套用 simpread-focus-highlight 样式（z-index: 2147483646; position: relative），逐级向上给祖先节点加 simpread-focus-mask 蒙层，再向 body 追加半透明背景层、向 html 追加控制栏，形成「当前段落高亮 + 其余区域压暗」的沉浸效果；点击蒙层即可退出。聚焦模式的背景色、是否显示控制栏、是否显示蒙层、高亮开关、透明度等均可配置，默认背景色为 rgba(235, 235, 235, 0.9)（src/service/storage.js）。

标注模式：鼠标划选即可标注

在阅读模式下，通过鼠标「按下 → 移动」的方式即可产生一条标注。标注系统是简悦 2.0 最重要的功能，README 列举了它的核心特性：

• 五种标注颜色、四种标注样式；
• 自动识别文字 / 图片 / 代码段；
• 无限层级的标签系统，每个标签均支持备注；
• 连续标注、浮动标注栏、标注侧栏；
• 可结合发送到生产力工具，将当前标注发送到各种工具。

仓库中 src/service/highlight.js 提供了框选高亮的底层实现（simpread-highlight-selector 与 simpread-highlight 控件），src/module/ 下对应有标注相关配置面板。

稍后读：ZK 笔记法启发下的信息整合

稍后读 2.0 是简悦 2.0 启用的全新版本，README 称其借鉴了 ZK（Zettelkasten）笔记法的一些特点，专门针对信息整合增加了：

• 双向链接与知识图谱；
• Mindmap 脑图；
• 多种信息展示布局：Evergreen、Workflowy、Kanban；
• 支持读取本地 HTML。

使用方式：在任意界面使用标注模式产生一条标注，或用快捷键（默认为 D D）将当前页面加入稍后读。从 src/service/menu.js 可以看到右键菜单中「打开稍后读」「将当前页面加入稍后读」两个入口；src/background.js 中点击「打开稍后读」会直接创建新标签页打开 options/options.html#later 稍后读界面。

阅读体验的核心：站点适配与中文阅读优化

数百种站点适配与智能感知

阅读模式是简悦「原创」功能，核心价值在于逐一适配数百种类型网站，自动提取标题、描述、正文、媒体资源（图片 / 视频），生成符合中文阅读的页面。站点适配清单以 src/website_list.json（本地默认）与远程 website_list_v4.json（线上更新）形式维护，storage.Read 在后台启动时加载（src/service/storage.js），远程站点列表通过 src/background.js 的 storage.GetRemote("remote", ...) 拉取并增量写入。

正文提取的引擎是 vendored 的 src/vender/puread（PureRead）：src/contentscripts.js 中 new PureRead(storage.sites) 完成初始化，读取站点规则后即可判断当前页面属于「已适配（adapter）」「临时（temp）」还是「未适配」状态。阅读模式还支持：

• 自动生成目录（src/read/toc.jsx，由 read.toc 开关控制，默认开启）；
• 论坛类页面及分页（知乎、百度贴吧等，见 src/read/special.jsx 的 Multiple / Paging 组件）；
• 代码段高亮；
• 本地 HTML、TXT 阅读器、LaTeX 解析、Markdown 阅读器；
• 适配常见科研期刊类网站。

更符合中文阅读习惯的设置

阅读模式针对中文阅读习惯提供了丰富调节项，选项页对应组件为 src/module/read.jsx，每个滑块都直接写入配置并即时生效：

设置项	默认值	取值范围（源码滑块）	说明
主题色	github	9 套内置主题	见下文「主题系统」
字体类型	default	5 档	default / PingFang SC / Hiragino Sans GB / Microsoft Yahei / Source Han Sans CN
字体大小	62.5%	45% ~ 100%	滑块 min=45 max=100
版面宽度	20% 边距	70% ~ 100% 内容宽度	滑块换算 100 - value
字间距	0	0 ~ 10	单位 px
行间距	0	0 ~ 5	单位倍数
单词间距	0	0 ~ 10	单位 px
首行缩进	0	0 ~ 30	单位 px

其中字体大小 / 版面宽度 / 字间距等样式通过 src/service/stylesheet.js 的 FontFamily、FontSize、Layout、Custom 动态注入 CSS；字间距、行间距、单词间距、首行缩进属于自定义样式（custom.art），一旦启用自定义样式，设定中部分选项可能无效——控制栏会给出明确提示（src/read/controlbar.jsx 的 ss.VerifyCustom 校验）。

主题系统与快捷键

主题定义在 src/service/theme.js：内置 9 套主题 github / newsprint / gothic / engwrite / octopress / pixyii / monospace / night / dark，每套主题对应 theme_*.css 样式文件（见 src/assets/css 下的 theme_github.css、theme_dark.css 等），并附带各自的背景色值。控制栏上通过「更换为后一个 / 前一个主题」循环切换（src/read/controlbar.jsx）。

阅读模式控制栏的所有操作都有对应快捷键配置，定义于 src/service/config.js，按分组整理如下（kbd 为键入的快捷键组合）：

• 导出类：md（Markdown）、om（离线 Markdown）、pg（PNG）、pf（PDF）、ep（epub）、hm（HTML）、oh（离线 HTML）、tm（临时页面）、cp（截图）；
• 外观类：ff（字体样式 1~5）、fs（字体大小 1~3）、la（版面布局 1~3）、th → / th ←（前后主题）；
• 生产力工具类：yx（印象笔记）、er（Evernote）、db（Dropbox）、on（OneNote）、gr（Google 云端硬盘）、nt（Notion）、jg（坚果云）、yq（语雀）、wz（为知笔记）、kd（Kindle）、ln（Linnk）、pt（Pocket）、ip（Instapaper）、rl（稍后读）、br（Bear）、ul（Ulysses）；
• 无障碍类：ts（开始朗读）、tt（停止朗读）；
• 设定类：fu（全屏）、st（设定对话框）、se（站点编辑器）、hl（重新选择高亮）、cl（隐藏任意元素）、tr（提交临时阅读模式）。

快捷键本身可在选项页自定义，校验规则是只能包含 ctrl / shift / alt / 数字 / 字母，支持 <a href="https://link.gitcode.com/i/3624ee7c3c75556e847da3f7acc9767d" target="_blank">a b]、[shift a] 等组合形式（见 [src/module/common/shortcuts.jsx）。

导出与发送：阅读模式的「生产力外延」

README 用较大篇幅介绍了丰富的导出功能，核心观点是：借助于简悦的阅读模式优化整理，导入到各种生产力工具会比其原生剪辑工具更具优势。

文件导出格式

• Markdown · HTML · PNG · PDF · Epub · 离线 HTML · 复制 Markdown 到剪切板 · Textbundle · Markdeep，甚至任意格式均可导出（定制化导出）；
• 支持 Webhooks；
• 将多种行为整合在一起的自动化方案（可理解为简悦的 IFTTT）。

对应实现集中在 src/service/export.js：PNG 通过 domtoimage 将阅读页 DOM 转成 Blob 后用 FileSaver.saveAs 保存（第 22-31 行）；Markdown 通过 Turndown 服务把 HTML 转 Markdown，并挂载了 GFM、表格、删除线、高亮代码块等插件规则，同时对 <pre> 自定义为围栏代码块（第 47-67 行）；PDF 直接调用 window.print()（第 36-38 行）；Epub 则基于 EpubPress 把阅读页 HTML 打包为电子书（第 69-80 行）。此外还支持 Textbundle 等扩展格式。

发送到外部服务

• 发送到 Kindle（需按文档中心配置）；
• 导出到 Pocket / Instapaper（含当前页面链接）；
• 导出到生产力工具：语雀、坚果云、flomo、有道云笔记、专注笔记、为知笔记、Joplin、Dropbox、Github、Notion、OneNote、Google Drive、印象笔记 / Evernote；
• 定制化导出可方便导入 Obsidian、Roam Research、Logseq 等双链笔记。

仓库中这些服务的授权与发送逻辑分散在 src/service/ 与 src/vender：例如 src/vender/webdav.js 提供 WebDAV 客户端能力（坚果云等 WebDAV 服务复用），src/background.js 中「坚果云（jianguo）」消息会创建 WebDAV.Fs(url, user, password) 实例并支持目录创建；message.js 中定义了各服务对应的 MESSAGE_ACTION 消息类型，由页面脚本通过 browser.runtime.sendMessage 与后台协作完成跨域请求。

白名单 / 排除列表 / 黑名单 / 延迟加载：站点级精细控制

右键菜单中除了进入模式，还有四个站点级控制入口（src/service/menu.js），它们分别写入不同的配置列表：

菜单项	写入配置	作用
将当前页面加入到白名单	read.whitelist	该页面强制可进入阅读模式（自动打开判定条件之一）
将当前页面加入到排除列表	read.exclusion	该页面不自动进入阅读模式（autoOpen 会检查）
将当前页面加入到黑名单	option.blacklist	该页面完全禁用简悦（内容脚本检测到后直接清理样式并返回）
将当前页面加入到延迟加载	option.lazyload	页面仅在切换到该标签时才激活简悦

对应处理逻辑在 src/contentscripts.js：消息到达后 menuSrv 将当前 URL 压入对应列表并写入存储；而黑名单在页面脚本加载的最早期就执行判定（src/contentscripts.js），命中后会把页面内残留的 simpread 相关 <style> 全部移除，实现「完全隐身」；autoOpen 的判定条件是 suffix || whitelist || (auto && exclusion == false)（第 253-255 行），即 URL 参数、白名单、或「开启自动进入且不在排除列表」三者任一满足即自动进入阅读模式，且对知乎、掘金、看云、少数派等站点做了差异化延时处理（第 256-275 行）。

同步助手与插件系统：2.1 时代的能力扩展

简悦 · 同步助手

同步助手是随简悦 2.1.0 发布的全新 Desktop App（桌面应用），用于对扩展已知功能的补充，并持续提供更多可玩性：

1. 自动同步；
2. 小书签；
3. 导出到文件本地的任意位置；
4. 原生 PDF / Epub 导出；
5. 直接发送到 Kindle；
6. 内置解析；
7. 邮件发送。

同步助手的 Logo 由社区用户 Shawn 设计。

插件系统

插件系统使用 JavaScript 编写，基于简悦的插件可访问 插件中心。仓库层面 src/vender/puread 的 puplugin 模块提供了插件注册机制，阅读模式的渲染生命周期中会触发 read_start / read_complete / read_end 等插件事件（src/read/read.jsx 中的 loadPlugins 调用），src/module/plugins.jsx 则是选项页中的插件管理面板。

项目源码结构与开发构建

README 的「协作开发」一节说明：贡献者请务必从 develop 分支开始提交 Pull Request（非 develop 分支的 PR 不会被合并）。本仓库的工程化信息如下：

• 构建工具：Webpack（见 webpack.config.js），通过 ProvidePlugin 全局注入 React / ReactDOM / Notify，用 CommonsChunkPlugin 拆出 vendors 与 common 公共包；生产构建时会清理 publish 目录，并把 manifest.json、help_tips.json、website_list.json、ga.js、各 options/*.html、图片与 _locales 多语言文件拷贝到发布目录（webpack.config.js）。
• 脚本命令（package.json）：npm run develop（开发构建 + 监听）、npm run publish（生产构建）、ext_dev / ext_pub（扩展专用构建配置 webpack.config.ext.js）、server（热更新开发服务器）。适用前提：Node 版本需满足 >= 0.10.0（该仓库依赖 Webpack 1.x 时代工具链）。
• 多语言：扩展名称与描述通过 src/_locales 下的 zh_CN、zh_TW、en 三份 messages.json 提供，manifest.json 中 default_locale 为 en，name / description 引用 __MSG_extension_name__ / __MSG_extension_desc__ 占位符。

版本与许可说明

README 的「许可」一节给出明确说明：简悦 1.x（截至 1.1.4.6205）是开源版本，2.x 为闭源版本，且仅闭源了「标注」与「稍后读」相关功能。本仓库对应的是开源部分，package.json 中 license 字段标注为 MIT，README 底部的 badge 链接则指向 GPL 协议说明，二者针对不同版本产物，阅读时需注意区分。仓库内扩展的 manifest.json 版本号为 1.1.4.6025，属于 1.x 开源线。

总结

简悦 SimpRead 的技术路线可以概括为一条完整的「阅读 → 剪藏 → 标注 → 稍后读 → 导出」生产链：以数百种站点的适配规则（src/website_list.json + 远程站点列表）和 PureRead 词法分析引擎支撑阅读模式，以聚焦模式覆盖未适配页面，以标注系统沉淀知识，以稍后读 2.0 的双向链接、知识图谱与多种布局完成信息整合，最终通过 src/service/export.js 与 WebDAV / Webhook 等通道输出到 Obsidian、Notion、语雀等生产力工具。无论你是想「开箱即用」地改善阅读体验，还是想基于其插件系统与构建脚本做二次开发，都可以从本文梳理的源码路径入手，快速定位到对应的实现模块。