📖 详细介绍
页面关键词高亮助手 是一款轻量、安全、免费的浏览器扩展。无论你是阅读长文、分析数据报表，还是检索内部知识库，只需输入一组关键词，它就会立刻将所有匹配文字标上醒目的黄色背景，让关键信息一目了然。
Page Keyword Highlighter is a lightweight, secure, and free browser extension. Whether you are reading long articles, analyzing reports, or searching internal knowledge bases, simply enter a set of keywords and it will instantly highlight all matching text with a prominent yellow background, making key information clear at a glance.
- 🔍多词同步高亮：支持同时高亮多个关键词，一次性标记所有目标。
- ⚡去符号替换：智能忽略标点符号，输入 AB 即可匹配 A,B、A B 等，且不会误把汉字当成符号。
- 🎯通配符 | 匹配：用 | 匹配同一行内的任意字符，如「移动|开发」匹配「移动端开发」。
- 🛡️白名单过滤：设置不希望高亮的词汇，精准排除干扰。
- 🌐跨标签高亮：即使文字被加粗、换行、斜体等打断，也能完整高亮整个词组。
- ⇅配置导入/导出：可将关键词、白名单和所有设置导出为 JSON 文件，方便备份或迁移。
- 🔒隐私第一：所有数据仅保存在本地，无任何网络请求，绝不收集隐私。
- 🔍Multi-keyword highlighting: Highlight multiple keywords at once.
- ⚡Symbol removal: Intelligently ignore punctuation marks. Enter "AB" to match "A,B", "A B", etc.
- 🎯Wildcard | matching: Use | to match any characters within the same line.
- 🛡️Whitelist filtering: Set words you do not want highlighted.
- 🌐Cross-element highlighting: Highlight across bold, line breaks, italics, etc.
- ⇅Import/Export config: Export keywords, whitelist, and all settings as JSON.
- 🔒Privacy first: All data stored locally. No network requests, no privacy collection.
💬 开发者的心路历程
从 v1.0.16 到 v1.0.32，这个小小的关键词高亮助手几乎被重写了一大半。回想起来，整个过程充满了「按下葫芦浮起瓢」的焦灼和最终啃下硬骨头的欣慰。
最初，我只是想让插件支持词组高亮，比如能高亮「machine learning」这样含空格的术语。本以为加个引号解析、改改正则就完事，但很快就被现实教育了：有用户反馈内部系统里带空格的词完全不高亮，而百度首页却正常。我一查，发现高安全网站有严格的 CSP 策略，内联 style 被直接干掉；还有一些页面把文本藏在 Shadow DOM 里，传统的 TreeWalker 根本进不去。更离谱的是，有些企业系统里 <b>A</b>BCD 这样的写法随处可见，旧引擎只能高亮 A 或 BCD，整个 ABCD 就是死活标不上。
于是，我只能把最核心的文本遍历逻辑全部推倒重来：用深度优先递归收集所有文本节点，拼成一整个全局文本，记录每个节点的偏移映射，正则匹配后再倒推回各个节点中切出高亮范围。光这一块就迭代了四五个版本，每一次都离「正确跨节点匹配」更近一步，但也每次都在边缘 case 上翻车。
更大的坑是「去符号替换」。早期为了兼容任意符号分隔的词组，我简单用了 [\W_]* 来匹配字符间的任意非单词符号。这在英文页面里工作完美，但一放到纯中文内部系统上，整个操作台全黄了——因为汉字在正则里根本不是 \w，全被当成了符号。用户反馈说「内幕」和「作业」两个词把屏幕染成了一片黄色，那一刻我真的头皮发麻。后来我专门整理了一份中英文标点与空白的 Unicode 范围，替换掉宽泛的 \W，才终于让插件既能忽略真正的标点，又不会误伤汉字。这个改动也让我对 Unicode 字符类有了更深的敬畏。
白名单、通配符开关、高级设置折叠、导入导出、弹窗重设计……这些功能其实都是和用户「对话」出来的。有人希望在某些词上例外，有人觉得开关太多需要藏起来，还有人担心自己会误输入。每一次反馈，都是一次「还能更好」的鞭策。
v1.0.32 的弹窗重设计，是另一个让我纠结了很久的决定。旧弹窗把所有说明文字都内联显示，结果一个开关就占三行，整个弹窗高得超出屏幕。我尝试过缩短文案、加 tooltip、改用 details 折叠……最终发现最干净的方案是用 JS 动态创建 tooltip 元素配 position: fixed——因为 Chrome 弹窗窗口本身会裁剪超出边界的 CSS tooltip，必须绕开。最终效果：弹窗高度从 700px 降到 570px，展开高级设置后一屏装下，眼睛不用上下扫。
最终，当我把所有高级开关收进「⚙️ 高级设置」、让界面重回简洁，并且确认内部系统、英文博客、Shadow DOM 页面、CSP 严格站点全部能稳稳当当高亮时，那种「终于拿下了」的感觉，真的比什么都踏实。
这个插件的代码量不大，但每一行几乎都经历过挣扎和推敲。我很感激那些积极反馈 bug 和使用场景的用户，是你们让这个免费小工具一点点长成了真正耐用的模样。v1.0.32 是一个里程碑，但肯定不会是终点。如果还有什么让你抓狂的问题，请一定告诉我，我们继续打磨。
From v1.0.16 to v1.0.32, this little keyword highlighter was almost half rewritten. Looking back, the whole process was filled with the frustration of "putting out fires" and the satisfaction of finally cracking the tough nuts.
Initially, I just wanted the extension to support phrase highlighting, like highlighting "machine learning" with spaces. I thought adding quote parsing and tweaking regex would be enough, but reality quickly set in: users reported that words with spaces in internal systems weren't highlighted at all, while Baidu's homepage worked fine. I found that high-security sites have strict CSP policies that kill inline styles; some pages hide text in Shadow DOM, unreachable by traditional TreeWalker. Even worse, in some enterprise systems, things like <b>A</b>BCD were everywhere, and the old engine could only highlight A or BCD, the whole ABCD just wouldn't light up.
So, I had to completely rewrite the core text traversal: recursively collect all text nodes, assemble them into a global text, record offset mappings, then after regex matching, trace back to split each node's highlight range. I iterated four or five versions on this alone, each getting closer to "correct cross-node matching" but always stumbling on edge cases.
The bigger pit was "symbol removal". Early on, to match phrases separated by arbitrary symbols, I simply used [\W_]* to match any non-word characters between words. It worked perfectly on English pages, but on a pure Chinese internal system, the entire dashboard turned yellow—because Chinese characters aren't \w in regex, they were all treated as symbols. A user reported that the words "内幕" and "作业" dyed the screen yellow, and I felt my scalp tingle. Later, I meticulously compiled a Unicode range list of Chinese and English punctuation and whitespace, replacing the broad \W, finally allowing the extension to ignore real punctuation without harming Chinese characters.
The v1.0.32 popup redesign was another decision that纠结了很久. The old popup displayed all descriptions inline, making each switch occupy three lines and the entire popup exceed the screen height. I tried shortening text, adding tooltips, using details collapse... eventually found the cleanest solution: use JS to dynamically create tooltip elements with position: fixed—because Chrome's popup window itself clips CSS tooltips that exceed boundaries, you must work around it. Final result: popup height reduced from 700px to 570px, fits in one screen with advanced settings expanded.
Whitelist, wildcard toggle, collapsing advanced settings, import/export, popup redesign... these features were all born from "conversations" with users. Some wanted exceptions for certain words, some thought there were too many switches and wanted them hidden, others worried about accidental input. Every feedback was a spur to "do better".
This plugin's code isn't huge, but almost every line has been through struggle and refinement. I'm deeply grateful to the users who actively reported bugs and use cases; you made this free little tool grow into something genuinely durable. v1.0.32 is a milestone, but definitely not the end. If there's anything still driving you crazy, please tell me, and we'll keep polishing.