企业官网建设流程全解析

一篇文章搞懂 Highlighter：让网页高亮在刷新、重启、三个月后都还在

【免费下载链接】highlighterA Chrome extension to highlight text and keep it all saved项目地址: https://gitcode.com/gh_mirrors/hig/highlighter

这篇文章介绍 Chrome 扩展 Highlighter 如何用本地存储实现网页文本的永久保存高亮。无论你是学生、研究者还是产品经理，只需 3 分钟就能掌握右键、快捷键与高亮笔三种标记方式，并学会用颜色给信息分类、在页面改版后找回丢失的标记，让每一次阅读都变成可复用的笔记。

深夜读一份行业报告，看到关键数据顺手用系统自带工具标了黄色。第二天打开同一篇文章，标记全没了，只能从头再读一遍——这个场景你大概率不陌生。问题不在你，而在"临时标记"这件事本身：浏览器根本不记得你画过什么。

Highlighter 正是为这个痛点而生的 Chrome 扩展，它的核心能力就一句话：永久保存网页高亮。标记一次，存在本地，下次打开页面自动恢复。本文不堆功能清单，只带你走一遍真实使用流程，顺便看看它凭什么能做到"刷新不丢"。

一次刷新让 40 分钟白费：临时标记的三宗罪

先给"临时标记"算笔账。浏览器自带的查找高亮、某些阅读插件的高亮，本质上都是"会话级"的：

• 刷新即失：页面一重载，高亮跟着 DOM 一起消失；
• 无差别：所有内容用一种颜色，看不出主次；
• 不可管理：标完就完，既不能导出，也不能检索。

于是你反复做同一件事：读文章、找重点、标记、丢、再找。这像用铅笔在玻璃上写字——写的时候很认真，玻璃一擦就什么都没有了。

把"永久保存网页高亮"拆开看：Highlighter 在背后做了什么

Highlighter 的思路很朴素：别把标记画在页面上，而是画在页面外面。

选中一段文字，它记录的不是一张截图，而是一组"坐标"：文字内容、它所在的位置（通过一套稳定的 DOM 路径）、选择的起止点、颜色、时间戳。这些数据被写进浏览器的chrome.storage.local，也就是扩展自己的"保险柜"里。

等你重新打开网页，扩展按 URL 找到这一页的笔记，拿着坐标重新把颜色涂回原处。对用户来说效果就是：三个月前标的内容，今天打开原样躺在那里。整个项目构建在 Manifest V3 标准之上，代码结构清晰，核心逻辑在src/contentScripts/（页面侧处理）与src/background/（后台服务）两个目录中，想深入研究的读者可以从这两处入手。

三种标记姿势：找到你最顺手的那一种

Highlighter 的操作没有学习成本，因为通道足够多，选一个顺手的就行。

右键菜单：选中文字，右键，挑一个颜色，完成。适合低频、谨慎的标记。

快捷键 Alt+H：选中文字直接按Alt+H，立刻以当前颜色高亮，全程不离开键盘。默认快捷键是Alt+H，与别的扩展冲突时，可在扩展管理页的"快捷键"设置里重新分配，弹窗里也有直达入口。

高亮笔模式：点击扩展图标，再点 "Toggle cursor"，鼠标变成一支笔的形状。之后像荧光笔一样划过文字，松手即标记，连续读长文时最省事。

三种方式指向同一个结果：文字被染上颜色，并且立刻存入本地。习惯之后，从"读到重点"到"完成标记"不超过两秒。

悬停即管理：复制、改色、删除，一次鼠标悬停全搞定

标记做完只是开始，Highlighter 把"管理"也做进了页面里。鼠标悬停在任何一处高亮上，上方会浮出一个小工具条：

• 复制：把这段高亮文本送进剪贴板，方便粘进笔记；
• 换色：不改文字内容，直接调整这条标记的颜色，用于临时改变分类；
• 删除：移除这条高亮，同步清理存储。

想要更大范围的操作，点开扩展弹窗：这里有当前页面所有高亮的列表，点任意一条即可跳回页面对应位置；"Copy all" 一键导出整页标记；"Delete all" 则清空当前页。整套逻辑像给网页配了一个小型的"笔记管理器"，而不只是给文字涂色。

页面改版后标记还在吗：如何找回"丢失的高亮"

这是网页高亮最常翻车的地方：文章改版、分页加载、动态渲染，都可能让当初记录的位置对不上号。Highlighter 对此有专门设计——它会把"没找到对应位置的标记"单独归为一类，在弹窗里列为"丢失的高亮"，显示原文文字，并允许你一键删除清理。

换句话说，即使页面变了，你的文字内容依然被保存着，不会无声无息地蒸发。读长文章遇到动态加载时，这也是值得留意的特性：等页面完整渲染后再标记，成功率更高。

颜色不只是好看：把五种颜色变成你的分类系统

默认提供黄、绿、蓝、粉、深色五种高亮色，分别对应yellow、green、blue、pink、dark。别小看这五个色块，它们其实是给信息分层的抓手：

• 黄色 → 核心观点
• 绿色 → 行动项与待办
• 蓝色 → 数据与事实
• 粉色 → 存疑或待查
• 深色 → 需要深读的段落

更进阶的是自定义：在弹窗里点颜色方块，可以修改任意颜色的色值，配置通过chrome.storage.sync保存，会跟随你的 Chrome 账号同步。换句话说，颜色规则定一次，换电脑也照样生效。五色不够，就自己定义五色。

数据存哪、会不会泄露：把存储机制一次讲清

很多用户对"永久保存"有天然疑虑：我的笔记会不会被上传？Highlighter 的答案比较干脆——数据默认只存在你自己的浏览器里。

chrome.storage.local意味着高亮记录绑定在当前设备，扩展不上传任何内容到外部服务器；自定义颜色的配置走chrome.storage.sync，也只是同步到你自己的 Chrome 账号。没有账号体系、没有云端、没有追踪，隐私面收得很干净。它的代价是：换设备或清理浏览器数据时，高亮不会跟着走，所以重要内容记得定期用 "Copy all" 导出留底。

一个练习：从今天开始，把高亮变成你的阅读习惯

Highlighter 解决的核心问题，是让"标注"从一次性动作变成可累积的资产。它不复杂，也不需要你改变工作流——只是让标记这件事，从此不再白做。

如果你想立刻上手，试试这个五分钟小练习：

1. 安装扩展，打开你常读的新闻或技术文章；
2. 选一段你觉得重要的文字，按Alt+H标记；
3. 再选一段数据类内容，切到蓝色再标一次；
4. 刷新页面，确认两处高亮自动恢复；
5. 打开弹窗，点 "Copy all"，把标记内容粘进你的笔记工具。

一周后你回头看，这五次操作积累下来的，就是一页属于你自己的、随时可复用的阅读摘要。高亮不再只是"看过"的证据，而是"想记住"的开始。

【免费下载链接】highlighterA Chrome extension to highlight text and keep it all saved项目地址: https://gitcode.com/gh_mirrors/hig/highlighter