简介Super Highlight 是一款面向浏览器用户的文本高亮插件可视为 Multi-highlight 的升级版本主要解决长文档、文献与网页信息中重点内容难以快速定位的问题适合学术研究、资料整理及日常阅读场景。资源包共 13 个文件约 131KB以 6 个 js 脚本为核心承载高亮算法与交互逻辑另含 1 个 html 弹窗界面、1 个 json 配置文件、1 个 css 样式表及 4 个 png 图标资源结构紧凑、便于直接加载调试。插件在输入布局上做了优化并支持关键词分类固定颜色与分类独立开关用户可按人名、日期、概念等类别分别设定颜色并单独控制各类高亮显示从而提升信息筛选效率。目前已有 393 人学习下载适合希望研究浏览器扩展实现方式或需要高效标注网页重点的读者参考。1. 从 Multi-highlight 到 Super Highlight一个高亮插件的二次改造如果你经常在浏览器里读长文、翻文档、查资料大概率装过那种“输入关键词就给你标黄”的高亮插件。Multi-highlight 就是这类工具里比较早的一个逻辑简单直接你输入一串词它把页面上所有匹配项都刷成同一个颜色。问题是当关键词一多所有词都变成同一种黄等于没高亮——你依然要在一堆黄色里找哪个是哪个。Super Highlight 这个压缩包就是针对这个痛点做的二次改造。它把“关键词分类固定颜色”和“对应分类独立开关”两个功能塞了进去让不同类别的词各占一种颜色还能按类别单独开关。适合谁适合每天要处理大量文本、需要快速区分信息类型的人比如做文献综述、竞品分析、或者单纯想在一篇长文里把“人名”“日期”“结论”分开标色的从业者。这不是什么大厂出品就是一个结构清晰、能直接加载的浏览器扩展源码包拆开看逻辑不复杂改起来也方便。2. 拆包看结构manifest、popup 与 content script 的分工2.1 从 manifest.json 看扩展的权限与注入方式拿到一个扩展压缩包我第一件事永远是先看 manifest.json。这个文件决定了扩展能干什么、在哪些页面生效、以什么方式注入脚本。Super Highlight 的 manifest 里关键字段是 content_scripts 和 permissions。content_scripts 决定了 highlighter.js 和 content-action.js 会在页面加载时自动注入这是高亮能实时生效的前提。permissions 里通常会有 storage用来存你设置的关键词分类和颜色方案如果还带了 tabs 或 activeTab说明 popup 里可能有“在当前标签页执行”之类的操作。常见做法是manifest 版本用 v2 还是 v3 会直接影响 background 的写法。这个包里同时有 background.js 和 popup.js说明它把一部分状态管理放在了后台页。如果你打算自己改先确认 manifest 里的 manifest_version 是 2 还是 3v3 的 background 要改成 service worker写法差别不小。{ manifest_version: 2, name: Super Highlight, version: 1.0, permissions: [storage, activeTab], content_scripts: [ { matches: [all_urls], js: [js/jquery.js, js/highlighter.js, js/content-action.js], css: [css/highlight.css] } ], browser_action: { default_popup: popup.html, default_icon: img/48x48.png }, background: { scripts: [js/background.js] } }上面这段是我根据包内文件结构还原的典型配置不是原文件逐字拷贝。逻辑说明content_scripts 里把 jquery.js 放在最前面因为后面的 highlighter.js 依赖 jQuery 做 DOM 操作css/highlight.css 负责高亮样式比如背景色、边框、圆角。参数说明matches 里的all_urls表示对所有页面生效如果你只想在特定站点用改成https://*/*或具体域名能减少性能开销。browser_action 指定了 popup.html 作为点击图标后的弹窗界面img 目录下的 48x48.png 是工具栏图标128x128.png 通常用于扩展管理页19x19.png 可能是旧版 favicon 尺寸100x100.png 用在 popup 内部。2.2 popup.html 与 popup.js关键词分类和颜色绑定的入口popup.html 是用户唯一能直接看到的界面。从包内文件看它引用了 popup.js 和 popup-Old.js后者大概率是 Multi-highlight 时期的遗留版本用来对比或者回滚。popup.js 的核心逻辑是读取 storage 里已保存的分类列表渲染成一行行“分类名 颜色选择器 开关”用户修改后写回 storage同时通知 content script 重新执行高亮。我一般会这样组织 popup 里的数据结构// popup.js 里保存分类配置的典型写法 function saveCategories(categories) { // categories 是一个数组每项包含 name、color、enabled chrome.storage.local.set({ highlightCategories: categories }, function() { // 保存后向当前标签页发送消息触发重新高亮 chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) { chrome.tabs.sendMessage(tabs[0].id, { action: refreshHighlight, categories: categories }); }); }); } // 从 storage 读取如果没有则给默认分类 function loadCategories(callback) { chrome.storage.local.get(highlightCategories, function(result) { var categories result.highlightCategories || [ { name: 人名, color: #ffeb3b, enabled: true }, { name: 日期, color: #8bc34a, enabled: true }, { name: 概念, color: #03a9f4, enabled: false } ]; callback(categories); }); }逻辑说明saveCategories 把分类数组写进 chrome.storage.local然后通过 chrome.tabs.sendMessage 通知当前标签页的 content script。参数说明categories 里每个对象的 name 是分类名color 是十六进制色值enabled 控制该类是否参与高亮。注意这里用的是 storage.local 而不是 sync因为 sync 有配额限制分类多了容易写失败。popup-Old.js 如果你不打算兼容旧版可以直接删掉但留着能对比 Multi-highlight 的原始逻辑看它当初是怎么把所有词都塞进一个输入框的。2.3 highlighter.js 与 content-action.js页面内高亮的实际执行者content script 才是真正在页面上干活的部分。highlighter.js 负责核心的高亮算法遍历文本节点匹配关键词包裹 span 并加上对应颜色。content-action.js 更像是控制器监听来自 popup 的消息决定什么时候重新高亮、什么时候清除。一个容易翻车的地方是直接对 innerHTML 做替换会破坏页面原有的事件绑定和 DOM 结构。常见做法是走 TreeWalker 遍历文本节点只对文本节点做替换。下面是我会用的简化版逻辑// highlighter.js 里遍历文本节点并高亮的典型实现 function highlightTextNodes(root, categories) { var walker document.createTreeWalker( root, NodeFilter.SHOW_TEXT, null, false ); var textNodes []; var node; while (node walker.nextNode()) { // 跳过 script、style、textarea 里的文本 var tag node.parentNode.nodeName.toLowerCase(); if (tag script || tag style || tag textarea) continue; textNodes.push(node); } textNodes.forEach(function(textNode) { var text textNode.nodeValue; var replaced false; categories.forEach(function(cat) { if (!cat.enabled) return; // 简单字符串匹配实际可以用正则做大小写不敏感 if (text.indexOf(cat.name) ! -1) { replaced true; } }); if (replaced) { var span document.createElement(span); span.className super-highlight; // 这里简化处理实际要按分类分别包裹 span.style.backgroundColor categories[0].color; span.textContent text; textNode.parentNode.replaceChild(span, textNode); } }); }逻辑说明TreeWalker 只取文本节点避免动到标签结构。参数说明root 一般是 document.bodycategories 从 storage 传来。注意上面这段是简化版真正要按不同分类分别上色需要在遍历每个文本节点时对每个启用的分类做一次匹配然后决定用哪个颜色包裹。如果多个分类命中同一个文本节点常见做法是优先匹配更长的关键词或者按分类顺序取第一个命中的。content-action.js 里则监听 chrome.runtime.onMessage收到 refreshHighlight 后先清除旧的高亮 span再重新执行。3. 本地加载与调试把 zip 变成能跑的扩展3.1 加载未打包扩展的步骤与常见报错拿到 zip 后先解压到一个固定目录比如D:\extensions\super-highlight。然后打开浏览器扩展管理页开启“开发者模式”点“加载已解压的扩展程序”选中解压后的根目录。如果 manifest.json 在根目录扩展会立刻出现在列表里。常见报错有三种一是 manifest 解析失败多半是 JSON 里多了逗号或者注释二是 content script 注入失败看控制台有没有“Cannot read property of undefined”通常是 jquery.js 没放在最前面三是 popup 点开空白检查 popup.html 里引用的 js 路径是否和实际文件大小写一致Linux 和 Windows 对大小写敏感度不同。提示加载后如果页面没有高亮先打开扩展的 background 页看有没有报错再在目标页面按 F12 看 console 里 content script 的输出。3.2 用 storage 做配置持久化分类、颜色与开关的读写Super Highlight 的分类配置存在 chrome.storage.local 里键名通常是 highlightCategories。你可以在扩展管理页的“检查视图”里找到 background 页然后在 console 里执行chrome.storage.local.get(console.log)看当前存了什么。如果想手动改直接chrome.storage.local.set({highlightCategories: [...]})就行。注意storage.local 的数据在扩展重新加载后依然保留但如果你换了浏览器配置文件或者清了扩展数据配置会丢。常见做法是加一个“导出配置”按钮把 JSON 复制到剪贴板换机器时再导入。3.3 高亮样式的 CSS 控制颜色、边框与性能取舍css/highlight.css 里定义的是高亮 span 的样式。默认可能只设了 background-color但如果你想让高亮更显眼可以加 border-bottom 或 box-shadow。不过要注意给大量 span 加复杂样式会拖慢长页面的渲染。我一般会限制在background-color和border-radius两个属性避免用box-shadow这种触发重绘的。另外如果页面本身有深色模式高亮色要选对比度够的否则标了等于没标。/* highlight.css 里我通常会保留的最小样式集 */ .super-highlight { background-color: #ffeb3b; border-radius: 2px; padding: 0 1px; } /* 如果分类多可以用 data 属性区分颜色 */ .super-highlight[data-cat人名] { background-color: #ffeb3b; } .super-highlight[data-cat日期] { background-color: #8bc34a; } .super-highlight[data-cat概念] { background-color: #03a9f4; }逻辑说明用 style="width:16px;margin-left:4px;vertical-align:text-bottom;cursor:text;" />