写了一个 Chrome 插件，用 AI 帮我“降维打击”英文技术文档（开源）

Coder_阿qi
60 阅读3分钟

前言

作为一个经常需要翻阅英文文档（MDN, StackOverflow, GitHub Issues）的开发者，我经常遇到两个痛点：

  1. “单词都认识，连起来不懂” ：特别是那些充满倒装、从句的 Technical Writing 长难句，读起来非常费脑子。
  2. “查词中断心流” ：遇到生词 -> 划词翻译 -> 看弹窗 -> 回到原文。这个过程一旦频繁，阅读思路就被打断了。

虽然市面上有很多划词翻译插件，但它们大多只是单纯的“英译中”。对于想要提升英语水平，或者想要“像读代码一样读英语”的人来说，还不够极致。

于是，我利用业余时间开发了 FlowReader (心流阅读) 。

✨ FlowReader 是什么？

FlowReader 是一个开源的浏览器扩展，它利用大模型（LLM）的能力，将被动阅读转化为主动学习体验。

核心理念：  不直接给你扔一坨中文翻译，而是通过简化句子和语法分析，帮你“读懂”原文。

👉 GitHub 仓库地址 (求 Star 🌟)

🔥 核心功能演示

1. 长难句智能简化 (Simplification)

遇到看不懂的复杂句？选中它，AI 会自动将其重写为 A1-A2 级别的简单英语，同时保留技术术语。

image.png

2. 语法结构可视化 (Grammar Highlighting)

这可能是对程序员最友好的功能。插件会自动分析句子的成分，并像 IDE 代码高亮一样：

  • 🔵 蓝色：主语 (Subject)
  • 🟡 黄色：谓语 (Predicate)
  • 🟣 紫色：宾语 (Object)

一眼看穿句子骨架，逻辑瞬间清晰。

3. 个性化生词过滤

支持设置你的词汇量等级（例如 2000词/大学水平）。AI 会自动过滤掉简单的 hello, world，只解释你真正可能不懂的 deprecated, asynchronous。

image.png

🛠 技术实现细节

本项目是纯前端开发，没有后端服务，保护用户隐私。

  • 技术栈：Vue 3 + Tailwind CSS + CRXJS (Vite)
  • 隔离方案：使用了 Shadow DOM，确保插件样式绝对不会污染宿主网页（这在开发插件时非常重要）。
  • 流式响应：利用 fetch 的 ReadableStream 处理 LLM 的 SSE (Server-Sent Events)，实现打字机效果。
  • Prompt Engineering：经过多次迭代的 Prompt，确保 AI 输出的 JSON 格式稳定，且语法分析准确。

核心 Prompt 片段分享：

You are an expert English teacher for absolute beginners. Your task is to rewrite complex English sentences into simple, easy-to-understand English.

## Context Information
- Page URL: {pageUrl}
- Page Title: {pageTitle}
- Page Description: {pageDescription}

## Guidelines

### For Technical/Documentation Content:
If the URL or title indicates this is technical documentation, tutorial, or code-related content:
- **KEEP technical terms unchanged**: Vue, React, component, props, API, repository, framework, etc.
- Only simplify sentence structure and non-technical vocabulary
- Break complex sentences into 2-3 shorter simple sentences
- Use active voice, avoid passive voice

### For General Content:
- Use ONLY the most common 1,000-2,000 English words
- Replace advanced vocabulary with basic alternatives (e.g., "utilize" → "use", "examine" → "look at")
- Break complex sentences into 2-3 shorter simple sentences if needed
- Use active voice, avoid passive voice
- Avoid idioms, phrasal verbs, and complex grammar
- Target reading level: 3rd-5th grade (A1-A2 CEFR level)

## Universal Rules:
- Keep the same meaning as the original
- If any uncommon words remain in the simplified sentence, annotate them with Chinese translation in parentheses, e.g., "The repository (仓库) is old"
- Output ONLY the simplified English sentence(s). No explanations.

🔒 关于隐私与模型

FlowReader 采用 BYOK (Bring Your Own Key)  模式。

  • 你需要填入自己的 API Key。
  • 支持 智谱 AI (GLM-4.7) （国内直连，推荐）、OpenAI、以及任何兼容 OpenAI 格式的接口（如 DeepSeek、阿里千问、本地 Ollama）。
  • Key 仅存储在 chrome.storage.local，绝不上传。

image.png

📥 如何安装？

目前插件已提交 Edge 商店, 直接搜索就能安装。
更推荐大家直接下载离线安装包体验：

  1. 访问 GitHub Releases 下载最新 zip。
  2. 打开 Chrome 扩展管理 chrome://extensions/。
  3. 开启右上角“开发者模式”。
  4. 拖入解压后的文件夹即可。

👋 结语

这个项目目前还是 MVP 阶段，功能可能还不够完美。
如果你也对 AI + 语言学习 感兴趣，或者在使用中遇到 Bug，欢迎提 Issue 或 PR！

觉得好用的话，希望能给个 Star ⭐️ 支持一下独立开发者！

avatar
文章
阅读
粉丝