Summa 治好了我的信息饥渴症

[silvon]

我想我是有什么病的，暂且叫间歇性信息饥渴症吧。

发作时会疯狂订阅 RSS 源、关注 Medium 博主、加入 Reddit 版块......

后遗症是一段时间后就会积累很多待读文章或帖子，多到不敢打开这些网站。

当鼓足勇气打开这些网站后，通常我会快速浏览，遇到感兴趣的内容再细读，但这存在两个问题：

1. 快速浏览可能会错过重要信息或文章；
2. 如果是英文文章，无法快速判断是否值得细读；

为了解决这两个问题，我开发了 Summa 插件，旨在帮助用户(我自己)快速浏览大量文章。

功能介绍

Summa 是一款 Chrome 扩展，利用 AI 对网页内容进行总结。无论是博客文章还是论坛帖子，只需点击扩展图标，即可获得当前页面核心内容，包括摘要、主要内容和关键结论。

• 总结微信公众号文章

• 总结 Hacker News 长贴

• 总结 Medium 博客文章

使用说明

1. 适用于任意网站: 包括但不限于 Medium 、Reddit 、Hacker News 、知乎、CSDN......甚至 V2EX 。
2. API Key 配置: 需要自行配置 API key 。我使用的是 openRouter 提供的 API ，该平台目前支持免费使用 gemini-2.0-flash 模型。
3. 模型建议: Gemini 模型非常适合内容总结，可能是因为上下文窗口更大，Gemini 模型相比 OpenAI 和 Claude 的模型，能够在总结中保留更多细节。
4. Prompt 可自定义: 内置 prompt 适合总结技术类文章，也支持自定义，以适应不同类型文章。
5. 安装地址: https://chromewebstore.google.com/detail/summa/ifpcledicmpicocmaggfkegiighkdeog

技术栈

• 网页内容提取: 使用 mozilla/readability 库准确提取正文内容。
• 格式转换: 使用 Turndown 将 HTML 内容转换为 Markdown 格式，方便 LLM 处理。
• 摘要渲染: 使用 marked 和 github-markdown-css 渲染生成的摘要。
• 前端开发: 使用 Shadow DOM 、TypeScript 和 CSS 实现总结面板，使用 React 和 Shadcn 实现配置页。
• LLM 接入: 通过 Vercel AI SDK 接入 OpenAI 、Anthropic 、openRouter 、LMStudio 、Ollama 等多个 LLM 服务商。
• 开源地址： https://github.com/silvonli/Summa.git

开发说明

1. 大部分代码由 cursor 生成，我的主要工作是做技术选型，感觉这可能是 AI 时代的开发新模式。
2. 由于没有设计师，界面效果全靠 cursor 发挥，因此 UI/UX 存在不一致和不完善的地方。

[9420JackT]

https://telegraph-image-92x.pages.devundefined

[9420JackT]

https://telegraph-image-92x.pages.dev/file/f00ebd827a3c1bd96f55f-f3b32df0695936d982.png

[VchentozV]

deepseek 花这么点钱就能训练出 4o 一样的模型, 我不知道老美是傻还是技术不行, 还是国内太内卷了.

[lasuar]

没有一个 key 是免费的。。

[DamonXPlus]

很不错的项目~

[falcon05]

有一个刚需，把 V2EX 收藏的帖子总结并汇总成电子书。已经收藏了接近 1500 多个了，从来没看过。

[falcon05]

还有 GitHub 的 star ，很多只是躺在那里，一个个点进页面还是不方便，希望可以批量处理。

[silvon]

@falcon05 一样一样的，我也在 GitHub 上 Star 了很多项目，但很少真正点进去看。可能就是因为总觉得看一个项目太费时间，需要花很多精力。现在如果项目页面太长，我会先用 Summa 把页面总结一下，先对 README.md 有个大概的了解，再决定要不要细看，这样效率提高了不少。

[silvon]

@DamonXPlus 感谢认可。虽然大部分代码是用 Cursor 写的，但其实我自己也没少费脑筋，中间还走了不少弯路。尤其是在前期选择如何提取页面正文时，踩了不少坑。一开始尝试用 firecrawl ，但这个框架会把页面中的其他内容也抓取下来，比如导航栏、侧边栏之类的。后来尝试自己写代码从页面提取正文，但发现只能适配少数网站，实用性很差。最后偶然发现了 Mozilla 的 readability 库，这个库专门用来从网页中提取主要的可读内容，过滤掉广告、导航和其他无关元素，正好符合需求。

[ColoThor]

支持 firefox 吗

[silvon]

@ColoThor 现在只支持 chrome 。

[Ma4cus]

想问下开发 chrome 插件有什么脚手架吗？

[Ma4cus]

提个建议，回答改成流式输出的，不然回答完成前要等待好久

[silvon]

@Ma4cus 我是基于 https://github.com/lxieyang/chrome-extension-boilerplate-react 这个 chrome 插件模板开发的，该模板搭建好了 React + Webpack 的开发脚手架。

也有使用 React + Vite 的开发脚手架，比如这个项目： https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite 。
人气高(start 2.7k ），且更新频繁很活跃。

[silvon]

@Ma4cus 感谢建议。我居然没想到过改为流式，认为等那么久是合理的😓。