最近一段时间，我一直在迭代一个自己用的 Chrome 阅读模式插件：Reader Mode。
最开始做它，是因为我每天都会读很多网页文章：产品文章、技术文章、行业分析、AI 相关资料、英文博客、公众号网页、长篇访谈。内容本身常常很好，但网页环境并不总是适合阅读。广告、导航、弹窗、侧边栏、推荐流、评论区、各种浮动按钮，会不停把注意力从正文里拉走。
所以 Reader Mode 一开始只是想解决一个很朴素的问题：能不能点一下按钮，就把网页变成一个安静、清爽、适合长时间阅读的地方？
后来做着做着，它慢慢从一个阅读模式插件，变成了一个围绕网页长文的完整工作流：先让文章变得好读，再用 AI 帮助理解，然后把有价值的内容保存下来，甚至把文章变成可以听的音频。
插件介绍页：https://star.y3pm.com/reader/
一、先把网页文章变得适合阅读
阅读模式的核心，是从网页里提取真正的正文内容，去掉和文章无关的干扰元素。
Reader Mode 使用 Readability.js 做正文提取。进入阅读模式后，会尽量保留标题、正文、图片、表格、引用、代码块等真正和文章有关的内容，同时去掉广告、导航、侧边栏、弹窗和其他杂乱元素。
在这个基础上，我又加了很多阅读体验相关的设置：
- 调整阅读区宽度。
- 调整字体大小、行间距、段落间距。
- 支持深色和浅色主题。
- 支持不同背景色。
- 支持中文字体和系统字体。
- 支持中英文自动加空格。
- 支持中文段落缩进。
- 支持代码块语法高亮和 FiraCode 字体。
这些功能看起来都很小，但长时间阅读时很重要。阅读工具不应该抢戏，它应该让人忘记工具本身，只留下文字。
二、长文需要结构：大纲、进度和读图
很多文章不是短消息，而是几千字甚至上万字的长文。只把正文提取出来还不够，还需要让读者知道自己在哪里。
所以插件会自动生成文章大纲，并在阅读时高亮当前章节。顶部也有阅读进度，方便知道自己读到了哪。
读图也是一个很实际的需求。很多文章里的图片、图表、截图都很关键，尤其是产品、设计、技术教程类文章。点击图片后可以进入读图模式，支持缩放和切换上下张图片。
这些功能的目标都很明确：不要让读者迷路。
三、AI 总结：不是替你读，而是帮你更快进入文章
后来我开始接入 AI。最早只是做一键总结：配置 DeepSeek 或 OpenAI 的 API Key 后，点击按钮生成摘要。
但真正用了一段时间后，我发现「总结」这个词太粗了。不同场景下，我需要的不是同一种输出。
有时候我想快速判断文章值不值得细读；有时候我已经读完了，需要提炼结构；有时候我只想摘出几句值得收藏的观点；有时候则想让 AI 用轻松一点的方式帮我重新看一遍。
所以现在 AI 面板拆成了几个标签：
- 深度：完整梳理文章内容。
- 纲要：提取文章结构和层级。
- 金句：摘出值得回看的句子。
- 瞎扯：偏轻松的解读和吐槽。
这里我学到的一个很重要的东西是：AI 产品不能只把「调用模型」当成功能。真正有用的是把模型能力拆进具体场景里，让它在正确的时间，以正确的形式出现。
总结不是目的，帮助人理解才是目的。
四、AI 对话：围绕当前文章继续追问
摘要之后，我又加了 AI 对话。
原因很简单：读文章时的问题往往不是在读完之后才出现，而是在阅读过程中出现的。
比如：
- 这篇文章的核心论点是什么？
- 作者这个判断靠谱吗？
- 这一段能不能用更简单的话解释？
- 这篇文章对产品经理有什么启发？
- 能不能帮我整理成行动清单？
如果每次都复制全文到聊天工具里，会打断阅读流程。现在可以直接围绕当前文章继续问，阅读上下文还留在当前页面里。
这个功能让我对 AI 的理解也变了：AI 不只是一个生成答案的工具，它更像是阅读过程中的临时搭档。它可以帮你复述、质疑、归纳、扩展，但最后怎么理解，仍然应该由人自己决定。
五、把文章变成可以听的内容
最近加的一个功能是「聆听」。
如果配置了 OpenAI API Key，可以把当前文章生成音频。目前有两种模式：
- 朗读：直接把文章读出来。
- 播客：生成主持人和嘉宾式的双人讨论。
这个功能还在 Beta，但我自己很喜欢。很多文章并不一定非要坐在电脑前读完。通勤、散步、做家务时先听一遍，也能大概判断它值不值得回头精读。
做这个功能时，我对 AI 的感受更强烈：同一篇文章，文字、摘要、对话、音频，其实是不同的信息形态。AI 的价值不只是生成新内容，也可以把已有内容转换成更适合当前场景的形式。
六、阅读之后，要能留下来
只读完一篇文章还不够。很多时候，真正有价值的是读完之后还能不能再次找到它、引用它、整理它。
所以 Reader Mode 现在支持：
- 星标收藏文章。
- 多色记号笔高亮。
- 收藏文章里的图片。
- 收藏夹统一查看文章、摘录和图片。
- 数据导入导出。
- 自动备份。
我做这个功能的原因很个人：经常遇到一篇文章当时觉得很好，过几天只记得「好像在哪看过」。现在至少可以把标题、链接、摘录和图片留住。
这也是我越来越在意的一个方向：阅读工具不应该只负责「读」，还应该帮助内容进入自己的知识系统。
七、划词工具和翻译
阅读中最常见的动作之一，是选中一段文字。
所以插件里做了划词气泡：选中文字后，可以复制、搜索、打开链接、翻译，也可以直接用记号笔高亮。这个气泡在阅读模式里能用，在原网页中也能用，并且会尽量避让网页自带的划词工具。
翻译方面，除了全文翻译和划词翻译，也加入了一些中文阅读细节：
- AI 划词翻译会结合上下文，减少单句翻译断章取义。
- 支持本地简繁自动转换，基于 opencc-js，不需要调用翻译 API。
- 支持 Chrome 原生翻译能力。
- 支持 DeepSeek / OpenAI 等模型能力。
这里的体会是：AI 翻译不能只看一句话。语言经常依赖上下文，尤其是技术文章、观点文章、产品分析文章。上下文给得越好，输出越可靠。
八、自动化要克制
做工具时很容易陷入一个冲动：既然可以自动化，那就都自动化。
但阅读工具如果太主动，就会变成新的干扰源。所以我给 Reader Mode 做了一些克制的设计：
- 页面可进入阅读模式时，只做轻提示。
- 可以对当前站点关闭提醒。
- 常用网站可以自动进入阅读模式。
- 自动进入前会判断内容质量，避免误进错误页、登录页、空页面。
- 设置、白名单、收藏和高亮支持导入导出。
好的工具应该像一盏台灯：需要时亮起来，不需要时安静待着。
九、开发插件的过程，也是学习 AI 的过程
这个插件对我来说，不只是一个浏览器工具，也是一个学习 AI 的过程。
最开始接入 AI 总结时，我关心的是「怎么调通接口」。后来才发现，接口只是最简单的一层。
更难的是这些问题：
- 怎样让 AI 输出稳定的结构化内容？
- 怎样处理流式输出？
- 怎样在生成过程中逐步渲染，而不是让用户一直等？
- 怎样设计提示词，让摘要、纲要、金句、对话各有边界？
- 怎样在翻译时加入上下文？
- 怎样让 AI 功能不打断原本的阅读体验？
- 怎样处理用户自己的 API Key 和隐私边界？
- 怎样让 AI 音频生成这种重任务有合理的进度反馈？
以前我会把 AI 看成一个单独的聊天窗口。现在我更愿意把它看成一种可以嵌入具体流程的能力。它不一定要占据中心位置，也不一定每次都要显得很聪明。很多时候，它只需要在用户需要的那个小节点上，帮人少走一步。
做 Reader Mode 的过程，让我更清楚地意识到：AI 产品的关键，不是把模型摆出来，而是把模型放进人的真实动作里。
十、现在它大概能做什么
目前 Reader Mode 支持这些能力：
- 一键进入阅读模式，去掉广告、导航、侧边栏和弹窗。
- 自定义字体、字号、宽度、行距、段落间距、深浅色主题。
- 自动生成文章大纲和阅读进度。
- 读图模式，支持缩放和上下切换。
- 划词复制、搜索、翻译、打开链接、高亮。
- 全文沉浸式翻译。
- 本地简繁转换。
- AI 深度总结、纲要、金句、文章对话。
- OpenAI 朗读和播客音频。
- 星标文章、收藏图片、多色高亮摘录。
- 收藏夹统一回顾文章、摘录和图片。
- Markdown 和 PDF 导出。
- 常用网站自动进入阅读模式。
- 设置、白名单、收藏和高亮支持备份。
十一、隐私说明
核心阅读模式是在本地提取正文，不需要登录。
但 AI 总结、翻译、对话、音频这些功能，如果启用并配置 API Key，文章内容会发送给你配置的模型服务。API Key 保存在本地，模型服务用哪个、是否开启，都由你自己决定。
最后
Reader Mode 最初只是我给自己做的一个小工具。做着做着，它变成了一个我每天都会用的阅读入口，也变成了我理解 AI 产品的一块试验田。
如果你经常阅读长文、外文资料、技术文章，或者希望把网页文章变成可以整理和回看的知识资料，可以试试看。