Skip to content

Avocado-Smooth/Contextify

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Contextify(语镜)

基于上下文的 AI 外语阅读助手 Chrome 插件

Contextify 帮助中文母语用户阅读英文网页时,直接在当前页面选中单词、短语、句子或段落,结合前后文获得更贴合语境的中文解释,并可保存为本地学习笔记。

当前状态:个人开源学习项目;V0.1 本地 MVP 已完成,V0.2 正在迭代产品体验。暂未上架 Chrome Web Store。


项目亮点

  • 嵌入阅读流:用户不需要复制文本、切换窗口、手写 prompt,直接在当前网页选中并解释。
  • 上下文解释:解释不只翻译选中文本,而是结合前后文判断当前语境下的含义。
  • 模式化输出:支持普通、简洁、科研、文学 4 种解释模式,面向不同阅读场景。
  • 本地优先:配置和笔记保存在浏览器本地,不依赖项目自建后端。
  • 低复杂度技术栈:使用 Manifest V3 + 原生 HTML/CSS/JS,避免在 MVP 阶段引入不必要的框架和构建系统。

Demo 截图

截图目录已预留在 docs/assets/。后续可补充:

docs/assets/
  screenshot-explain-panel.png
  screenshot-notes-page.png
  screenshot-options-page.png

核心功能

已完成

功能 说明
选中解释 在网页中选中文本后,通过页面按钮触发解释
上下文感知 提取选中文本前后约 500 字符上下文
页面浮窗 在当前网页内展示加载状态、解释结果和错误提示
解释模式 支持普通、简洁、科研、文学 4 种解释模式
模型配置 用户自行填写 API Key、Base URL、Model
本地笔记 保存解释记录,并在笔记页搜索、查看、删除和批量管理

V0.2 规划中

  • Base URL 预设与 API 连通性测试
  • 深入解释与继续追问
  • 首次使用引导
  • 解释内容一键复制
  • 错误提示与失败恢复
  • 加载状态优化与可取消请求
  • UI 整体优化与 Logo

技术栈

  • Chrome Extension Manifest V3
  • 原生 HTML / CSS / JavaScript
  • Shadow DOM(页面按钮和浮窗样式隔离)
  • chrome.storage.local
  • OpenAI-compatible API

项目当前不引入 React、TypeScript、Vite、Webpack、后端、数据库或账号系统。


技术决策

决策 原因
LLM 请求由 background service worker 发起 避免 content script 直接请求外部 API,减少宿主网页 CSP 影响
页面按钮和浮窗使用 Shadow DOM 隔离宿主网页样式,降低 UI 被污染的概率
Prompt 逻辑集中在 src/shared/promptTemplates.js 便于维护解释模式和输出结构
存储逻辑集中在 src/shared/storage.js 避免各模块散落调用 chrome.storage.local
初期不引入框架和构建工具 降低本地 MVP 复杂度,保持插件目录可直接加载

本地加载方式

  1. 打开 Chrome,地址栏输入 chrome://extensions/
  2. 右上角开启「开发者模式」
  3. 点击「加载已解压的扩展程序」
  4. 选择本项目根目录(含 manifest.json 的这一层)
  5. 打开插件 Options 页,填写 API Key、Base URL 和 Model
  6. 在英文网页中选中文本,点击页面上的解释按钮

配置说明

Contextify 使用用户自己的 OpenAI-compatible API 配置。

配置项 说明
API Key 用户自己的模型服务密钥
Base URL 兼容 OpenAI Chat Completions 的接口地址
Model 要调用的模型名称

API Key 仅保存在本地浏览器的 chrome.storage.local 中。本项目不包含后端服务,也不会把配置同步到云端。

更多说明见 PRIVACY.md


项目结构

manifest.json
src/
  background.js
  content.js
  popup/
  options/
  notes/
  shared/
docs/
  assets/
  v0.1/
  v0.2/

文档入口

文档 用途
docs/v0.2/README.md V0.2 文档入口与当前方向
docs/v0.2/requirements.md V0.2 需求列表、优先级和状态
docs/v0.2/prd/ V0.2 单项需求 spec
docs/v0.1/prd/v0.1/prd_v0.1.md V0.1 产品范围存档
docs/v0.1/TECH_PLAN.md V0.1 技术方案存档
AGENTS.md 多 agent 协作规则
CLAUDE.md Claude Code 主开发规则
PRIVACY.md 隐私与数据处理说明

TEMP_PROMPT.md、个人面试材料、本地 agent 运行文件等不属于正式项目内容,已通过 .gitignore 排除。


我的角色

这是一个独立产品与开发项目。我负责:

  • 产品定位、用户场景、MVP 边界设计
  • V0.2 需求拆分、优先级管理和 spec 编写
  • Chrome 插件架构设计与功能实现协作
  • Prompt 输出结构设计与解释模式验收
  • README、PRD、handoff、测试清单等项目文档维护

当前限制

  • 暂未上架 Chrome Web Store
  • 暂无后端、账号、云同步
  • 暂未支持 PDF / EPUB
  • 暂无自动化测试体系

License

This project is open-sourced under the MIT License.

Releases

Packages

Contributors

Languages