yihan：一款面向连续网页学习的智能侧边栏插件

在日常学习、论文调研、技术资料查阅和项目研究过程中，我们经常会遇到一个问题：网页看得越来越多，但真正沉淀下来的知识却很少。

比如，当我们学习 RSA 算法、Web 安全、机器学习、数学建模或某个专业知识点时，往往需要连续访问大量网站。我们可能会打开很多标签页，临时复制一些内容到文档里，手动保存链接，或者依赖浏览器书签收藏页面。但时间一长，问题就会出现：

看过的网页找不到了；

当时的理解和笔记没有保存；

收藏夹越来越乱；

网页重点内容无法标注；

想复习时不知道从哪里继续；

AI 工具和网页阅读流程是割裂的。

为了解决这些问题，笔者设计并实现了一款浏览器插件：yihan。

yihan 是一款面向连续网页学习场景的浏览器侧边栏插件，支持 Google Chrome、Microsoft Edge 和 Firefox。它可以帮助用户在浏览网页时完成笔记记录、文字标注、学习书签管理、网页保存、AI 页面分析以及网页搜索整理等操作，从而形成一个更加连贯的学习工作流。

本文已经更迭到V1.3，已经在gitcode等平台开源，也在申请Edge浏览器插件市场的上架。

下载：yihan连续学习助手插件

一、为什么要做 yihan？

传统浏览器插件通常以弹窗形式展示。用户点击插件图标后，弹窗会出现；但只要点击网页其他地方，弹窗就会关闭。这种交互方式对于简单工具来说可以接受，但对于"学习"来说并不友好。

学习是一个连续过程。用户需要一边阅读网页，一边记录笔记、标注重点、整理资料。如果插件频繁关闭，用户就需要不断重新打开，学习体验会被打断。

因此，yihan 的核心设计思路是：

不做临时弹窗工具，而是做一个可以常驻网页右侧的学习侧边栏。

当用户打开 yihan 后，它会以侧边栏的形式显示在网页右侧。用户可以继续浏览网页，同时在侧边栏中记录笔记、查看书签、调用 AI 分析、整理搜索结果。这种方式更接近一个"网页学习工作台"。

二、插件定位

yihan 的定位是：

一款服务于连续访问大量网站进行学习、研究和资料整理的本地化智能学习助手插件。

它不是单纯的书签插件，也不是单纯的网页高亮工具，而是将以下能力整合到了一起：

• 网页笔记；
• 网页标注；
• 学习书签；
• 网页保存；
• AI 页面分析；
• AI 网页搜索整理；
• 学习目录；
• 本地数据管理。

对于学生、研究人员、技术学习者、CTF/安全学习者、论文写作者和项目调研人员来说，这类工具可以显著提升网页学习过程中的信息沉淀效率。

三、核心功能介绍

1. 侧边栏式学习界面

yihan 采用网页右侧侧边栏作为主要交互界面。

相比传统插件弹窗，侧边栏具有明显优势：

不会因为点击网页而消失；

可以和当前网页同时显示；
适合边读边记；
适合长时间学习；

更符合连续学习场景。

用户点击插件图标后，即可打开或关闭 yihan 侧边栏。在阅读网页时，侧边栏会持续显示，用户可以随时切换笔记、标注、AI、书签和目录等功能模块。

完全不影响平时使用，如果不小心叉掉一些网页还可以迅速找回。

2. 网页笔记功能

yihan 支持针对当前网页记录学习笔记。

用户在某个网页中输入笔记后，插件会自动将笔记保存到浏览器本地。当用户以后再次打开这个网页时，之前的笔记会自动加载出来。

这一点非常适合技术文档、论文资料、教程页面和博客文章的阅读场景。

例如，当用户阅读一篇 RSA 算法讲解文章时，可以在侧边栏中记录：

这篇文章主要讲 RSA 的密钥生成流程：

1. 选择两个大素数 p 和 q
2. 计算 n = pq
3. 计算 φ(n)
4. 选择公钥指数 e
5. 计算私钥指数 d

下次再次访问该网页时，笔记仍然存在，用户可以继续补充和复习。

3. 笔记目录功能

为了支持长期学习，yihan 增加了"笔记目录"功能。

传统笔记插件往往只关注当前网页，而 yihan 会自动汇总用户在不同网页中记录过的笔记，形成一个本地学习目录。

用户可以在目录中看到：

哪些网页记录过笔记； 网页标题； 网页地址； 最近更新时间； 笔记内容摘要。

这样，yihan 不只是记录当前网页，而是帮助用户逐渐建立自己的网页知识库。

例如，用户连续学习 RSA 时，可能访问过：

RSA 基础原理；

RSA 密钥生成；

RSA 加密解密过程；

小 e 攻击；

Wiener 攻击；

OAEP 填充机制；

CTF 中的RSA 题型。

这些页面如果都记录了笔记，就会自动出现在 yihan 的笔记目录中，形成一条清晰的学习路径。

4. 网页文字标注

yihan 支持在网页中直接标注重点文字。

用户选中网页中的一段文字后，可以通过侧边栏或右键菜单进行标注。被标注的文字会高亮显示，用户还可以为标注内容添加备注。

这个功能适合以下场景：

• 标记技术文档中的关键参数；
• 标记论文中的重要结论；
• 标记教程中的核心步骤；
• 标记安全分析文章中的攻击链；
• 标记数学建模资料中的公式和方法。

例如，在阅读 RSA 文章时，用户可以标注：

RSA 的安全性依赖于大整数分解问题的困难性。

并添加备注：

这是 RSA 安全性的核心假设，后续学习攻击方法时要重点关注。

5. 学习书签管理

浏览器自带书签功能虽然方便，但在大量学习资料管理时容易变得混乱。

yihan 的书签功能更偏向"学习队列"。

用户可以将当前网页加入 yihan 的本地学习书签中，并在侧边栏中统一查看、打开和移除。

与普通浏览器书签不同，yihan 的书签更强调学习上下文：

当前网页是否有笔记；

是否被访问过多次；

是否已经做过 AI 分析；

是否属于某个连续学习主题。

这样，用户可以把 yihan 当作自己的"学习资料池"。

6. 网页保存功能

yihan 支持将当前网页保存为本地 HTML 文件。

这个功能适合资料归档场景。例如，一些网页可能会被删除、修改或失效。用户可以在阅读时将重要页面保存下来，便于离线查看。

网页保存功能可用于：

保存技术博客；

保存课程资料；

保存题解文章；

保存项目文档；

保存研究资料。

对于经常查阅大量网站的用户来说，本地归档能力非常重要。

7. AI 页面分析

yihan 支持接入 AI 模型，对当前网页进行智能分析。

用户可以让 AI 对当前网页内容进行：

页面摘要；

关键词提取；

知识点整理；

学习大纲生成；

复习问题生成；

重点内容归纳。

例如，当用户打开一篇关于 RSA 的网页后，可以点击 AI 分析，让插件自动生成类似结果：

本文主要介绍 RSA 公钥密码体制，包括密钥生成、加密过程、解密过程和安全性基础。

核心知识点：

1. 大素数生成
2. 模数 n = p × q
3. 欧拉函数 φ(n)
4. 公钥 e
5. 私钥 d
6. 模幂运算
7. 大整数分解困难性

这可以帮助用户快速理解网页内容，尤其适合阅读长文章、技术文档和论文资料。

四、AI 接口设置

yihan 提供了独立的设置界面，用户可以根据自己的环境配置 AI 接口。

支持配置内容包括：

• AI Provider；
• AI Endpoint；
• 模型名称；
• API Key；
• 搜索接口；
• 搜索 API Key；
• 连接测试。

yihan 默认可以对接本地 Ollama，也支持 OpenAI 兼容接口。

例如，本地 Ollama 配置可以是：

接口地址：http://127.0.0.1:11434/api/generate

模型名称：qwen2.5:7b

如果用户有自己的远程大模型接口，也可以在设置界面中填写对应 Endpoint 和 API Key。

这样的设计可以让 yihan 保持开放性，不绑定某一个固定模型或服务。

五、AI 网页搜索整理功能（可能被安全策略拦截）

除了分析当前网页，yihan 还加入了 AI 网页搜索整理功能。

用户可以在侧边栏 AI 页面输入一个学习需求，例如：

请找到有关 RSA 的知识，并整理成学习路线。

插件会根据用户输入进行网页搜索，并将搜索结果整理成结构化学习资料。

这个功能的目标类似于一个轻量级学习 Agent：

用户提出学习主题；

插件搜索相关网页；

提取搜索结果；

调用 AI 总结；

输出学习路线或资料摘要；

用户可以把有价值的来源加入书签。

例如，用户输入：

请帮我搜索小 e 攻击的 RSA CTF 题型，并整理解题思路。

yihan 可以整理出：

RSA 小 e 攻击主要适用于：

1. e 较小；
2. 明文 m 较小；
3. m^e < n；
4. 或者同一明文被多个不同模数加密。

常见方法：

1. 直接开 e 次方；
2. 广播攻击；
3. 中国剩余定理；
4. Hastad Broadcast Attack。

这类功能可以帮助用户从"到处搜资料"转变为"围绕主题自动整理资料"。

V1.3版本可能会遇到被 CORS、接口限制或缺少 host 权限拦截的问题

六、搜索失败问题与修复

在开发过程中，网页搜索功能遇到过一个典型问题：

网页搜索失败：Failed to fetch

这个问题通常不是 AI 模型本身导致的，而是浏览器扩展直接请求某些搜索接口时，可能被以下因素拦截：

CORS 跨域限制；

搜索接口不允许浏览器扩展直接访问；

网络代理限制；

搜索接口需要 API Key；

host 权限不足。

为了解决这个问题，yihan 后续版本可能将搜索请求统一改为通过 background service worker 发起，并加入搜索兜底机制。

当默认搜索源不可用时，插件不会直接崩溃，而是提示用户更换搜索源或配置稳定的搜索 API，例如：

Tavily；

Brave Search API；

SearXNG；

自定义搜索代理。

这让 AI 搜索整理功能更加稳定。

七、本地化数据存储

yihan 的一个重要设计原则是：学习数据默认保存在本地。

插件使用浏览器扩展的本地存储能力保存：

• 网页笔记；
• 标注内容；
• 学习书签；
• 最近学习记录；
• AI 分析结果；
• 用户配置项；
• 搜索整理历史。

这意味着用户的学习资料不会默认上传到开发者服务器。

只有在用户主动使用 AI 分析或网页搜索整理功能时，插件才会根据用户配置，把必要的网页文本或搜索需求发送到用户指定的 AI 接口。

如果用户使用本地 Ollama，则数据可以尽可能保留在本机环境中。

八、适用场景

yihan 适合多种学习和研究场景。

1. 技术学习

比如学习：

RSA 算法；

Web 安全；

逆向工程；

数学建模；

机器学习；

深度学习；

操作系统；

数据库；

网络协议。

用户可以连续访问大量教程、博客和文档，用 yihan 记录笔记和标注重点。

2. 论文调研

在论文写作前期，用户通常需要查阅大量文献网页、项目主页、数据集介绍和相关博客。

yihan 可以帮助用户：

保存重要网页；

记录阅读摘要；

标注核心观点；

用 AI 生成文献阅读笔记；

整理资料目录。

3. 举例：CTF 与安全研究

对于 CTF 和安全学习者来说，经常需要阅读大量题解、漏洞分析和工具文档。

yihan 可以用于：

• 记录题解思路；
• 标注 payload 关键点；
• 保存漏洞复现文章；
• 整理攻击链；
• 生成复盘笔记。

4. 课程学习

学生在学习课程时，经常需要同时查阅教材、博客、视频文档和在线资料。

yihan 可以把分散的网页学习内容集中管理，形成个人学习资料库。

九、插件结构设计

yihan 采用 WebExtension 技术实现，整体结构可以分为以下几个部分：

yihan-extension/
├─ manifest.json
├─ src/
│  ├─ background.js
│  ├─ content.js
│  ├─ sidebar.js
│  ├─ options.js
│  ├─ api.js
│  └─ styles.css
└─ README.md

各部分作用如下：

manifest.json

用于声明插件名称、权限、脚本、图标和浏览器兼容信息。

background.js

负责后台逻辑，例如右键菜单、AI 请求、网页搜索请求和下载任务。

content.js

负责注入网页，实现侧边栏、文字标注、网页文本提取等功能。

sidebar.js

负责侧边栏界面逻辑，包括笔记、书签、AI、目录等模块。

options.js

负责设置页面，包括 AI 接口、API Key、搜索接口等配置。

api.js

负责封装 Chrome、Edge、Firefox 的扩展 API 差异。

styles.css

负责插件界面样式。

十、权限说明

yihan 需要使用一些浏览器扩展权限，但这些权限都服务于核心功能。

常见权限包括：

storage

用于保存笔记、标注、书签和设置。

activeTab

用于在用户主动操作时获取当前网页信息。

scripting

用于向网页注入侧边栏和标注脚本。

contextMenus

用于添加右键菜单，例如打开侧边栏、保存网页、标注文字。

downloads

用于保存网页到本地。

host_permissions

用于读取当前网页文本，支持笔记、标注和 AI 分析。

插件不会主动读取用户账号密码，不会采集浏览器 Cookie，不会进行广告追踪，也不会将用户数据上传到开发者服务器。

十一、yihan 的设计特点

总结来看，yihan 有几个明显特点。

1. 以侧边栏为核心

它不是传统弹窗插件，而是一个常驻网页右侧的学习面板。

2. 面向连续学习

它关注的不是单次网页操作，而是长期、多网页、多主题的学习过程。

3. 本地优先

用户的笔记、标注、书签和学习记录默认保存在本地。

4. AI 可配置

用户可以自由选择本地模型或远程模型，不绑定固定服务。

5. 搜索与整理结合

它不仅能分析当前网页，还能根据用户需求搜索资料并整理成学习内容。

十二、未来优化方向

yihan 目前已经具备基础的网页学习助手能力，后续还可以继续优化：

• 更稳定的标注定位算法
  当前网页内容变化后，标注恢复可能不够精确。后续可以引入 Text Quote Selector 或 Text Position Selector。
• 标签分类系统
  为笔记、书签和网页增加主题标签，例如"密码学""数学建模""Web 安全"。
• 学习路线图生成
  根据用户收藏和笔记，自动生成某个主题的学习路线。
• 知识卡片功能
  将 AI 总结结果转化为可复习的知识卡片。
• 导出 Markdown
  支持将某个主题下的所有笔记导出为 Markdown 文档。
• 多设备同步
  在保证隐私的前提下，支持用户自行配置同步方式。
• 更强的搜索 Agent
  增强搜索、筛选、去重、来源可信度判断和多网页综合总结能力。

十三、总结

yihan 是一款围绕"连续网页学习"设计的浏览器侧边栏插件。

它解决的问题并不是简单地"收藏网页"或"记录笔记"，而是试图把用户在网页学习过程中的多个动作串联起来：

搜索资料 → 阅读网页 → 标注重点 → 记录笔记 → AI 总结 → 保存书签 → 形成目录 → 后续复习

对于经常访问大量网站进行学习和研究的用户来说，yihan 可以成为一个轻量但实用的本地学习助手。

它让网页不再只是一次性浏览内容，而是可以被持续整理、复盘和沉淀为个人知识资产。

下载使用方法

解压后在浏览器中点击管理扩展。

打开开发者模型。

加载解压缩的扩展。

即可使用。