关键词高亮器（Keyword Highlighter）

手动输入关键词，在网页中像划线一样把重点内容高亮标记出来。阅读长文、查资料、盯特定名词时的效率小工具。

语言 / Language: 🇨🇳 中文 · 🇺🇸 English

---

一、这是什么

一个轻量浏览器扩展（Chrome / Edge / Firefox 均可用），核心能力只有一件：

你在弹窗里输入关键词 → 当前网页里所有匹配的文字立刻被「荧光笔」划上颜色。

• 不依赖任何后端、不上传任何数据，关键词只存在你本地浏览器
• 每个网站独立记忆关键词，互不干扰
• 支持多关键词、多颜色区分、大小写/整词匹配

---

二、功能特性

功能	说明
手动输入关键词	弹窗输入框，回车或逗号（中/英文逗号均可）分隔，一次加多个
像划线一样高亮	用 <mark> 包裹匹配文本，视觉等同荧光笔标注
按站点记忆	关键词按域名分别保存，刷新不丢；A 站的关键词不会影响 B 站
多色区分	默认给不同关键词分配不同颜色，一眼区分多个关注点
单色模式	可关掉多色，统一用你自选的颜色
区分大小写	可选「区分大小写」开关（对英文有效）
仅整词	可选「仅整词」匹配（对英文/拉丁词有效，中文不适用）
启用开关	随时一键开/关高亮，不删关键词
清空	支持「清空本站」和「清空全部」
动态页面适配	对 SPA（如新闻流、后台系统）新增内容会自动补高亮

---

三、安装方法

方式一：Chrome / Edge（推荐，免打包）

1. 打开扩展管理页
   • Chrome：地址栏输入 chrome://extensions
   • Edge：地址栏输入 edge://extensions
2. 右上角打开 「开发者模式」（Developer mode）
3. 点左上角 「加载已解压的扩展程序」（Load unpacked）
4. 选中本项目的 keyword-highlighter 文件夹（不是里面的单个文件）
5. 工具栏出现拼图图标 🧩 → 里面即可看到「关键词高亮器」

首次加载后，若改了代码：回到扩展页点该插件卡片上的 刷新 ↻，再刷新网页即可生效。

方式二：Firefox（临时加载）

1. 地址栏输入 about:debugging#/runtime/this-firefox
2. 点 「临时载入附加组件」
3. 选择 keyword-highlighter/manifest.json

⚠️ Firefox 临时加载重启浏览器后失效，需重新载入。若要常驻，需签名上架（个人日常用推荐 Chrome/Edge）。

---

四、使用规则 / 操作步骤

1. 打开任意一个普通网页（如一篇新闻、一个后台列表）
2. 点击工具栏拼图图标 → 选择「关键词高亮」
3. 在输入框里输入关键词，例如 公司，按 回车（或点「添加」）
   • 想一次加多个：苹果, 华为, 小米（逗号分隔，中英文逗号都行）
4. 网页中匹配到的文字立即被高亮
5. 想去掉某个词：点该词右侧的 ✕
6. 想停止高亮但保留词：取消勾选「启用高亮」
7. 想换颜色：勾选「多色区分」用彩虹色，或取消后点「单色」挑一个颜色

配置项说明

选项	默认	作用
启用高亮	开	总开关，关掉后页面恢复原样但词还在
多色区分	开	不同关键词不同颜色；关掉则用「单色」
区分大小写	关	打开后 Apple 不会匹配 apple
仅整词	关	打开后只匹配独立单词，不匹配词内片段
单色	#FFD54F	「多色区分」关闭时使用的统一颜色

---

五、数据存储与隐私

• 关键词与设置保存在浏览器本地 chrome.storage.local，key 为 kw_state
• 结构：

  {
    "settings": { "enabled": true, "caseSensitive": false, "wholeWord": false, "rainbow": true, "singleColor": "#FFD54F" },
    "keywordsByHost": { "example.com": ["公司", "采购"] }
  }

• 不上传、不联网、不收集任何个人信息，纯本地运行
• 卸载扩展后，本地存储随扩展一起清除

---

六、常见问题（FAQ）

Q：为什么我加了关键词，页面没高亮？ A：多半是扩展没在该网站生效。请确认：

1. chrome://extensions 里本插件为「已启用」
2. 点插件卡片 刷新 ↻ 后，再刷新网页
3. 部分浏览器需在插件「网站访问权限 / Site access」里设为「在所有网站上」

Q：Chrome 自带页面（chrome:// 开头）怎么不高亮？ A：浏览器禁止扩展在自身内部页注入脚本，属正常限制，普通网站不受影响。

Q：「仅整词」对中文没反应？ A：正则 \b 边界对中文不生效，该选项主要服务英文/拉丁词。中文建议直接关掉它。

Q：页面内容很多，高亮会卡吗？ A：对超长页面（数万节点）首次渲染可能略有延迟；动态页面采用 400ms 防抖重绘，一般不会卡。

---

七、目录结构

keyword-highlighter/
├─ manifest.json        # 扩展配置（Manifest V3）
├─ content.js           # 网页内高亮引擎（注入页面执行）
├─ popup.html           # 弹窗界面
├─ popup.css            # 弹窗样式
├─ popup.js             # 弹窗逻辑（输入/存储/开关）
├─ icons/               # 图标（PNG）
│  ├─ icon16.png
│  ├─ icon48.png
│  ├─ icon128.png
│  └─ make_icons.py     # 图标生成脚本（开发用，可忽略）
├─ README.md            # 本文件（中文）
└─ README.en.md         # 英文版

八、技术实现要点

• Manifest V3：内容脚本通过 content_scripts 自动注入；host_permissions: ["<all_urls>"] 保证在所有网站可运行
• 高亮引擎：document.createTreeWalker 遍历文本节点 → 正则匹配 → 用 <mark> 包裹，避免改动原始结构
• 撤销：把 <mark> 还原为文本节点并 normalize() 合并，页面可完整复原
• 动态适配：MutationObserver 监听 DOM 变化，防抖后增量重绘（并跳过自身造成的变更，避免自循环）
• 持久化：chrome.storage.local 按 hostname 存关键词，开关与配色全局共享

---

九、许可证

MIT License —— 可自由使用、修改、分发。