☰

highlight-keywords

高亮关键词,可设置关键词的样式,支持正则匹配

如何安裝

您需要先安裝使用者腳本管理器擴展，如 Tampermonkey、Greasemonkey 或 Violentmonkey 之後才能安裝該腳本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安裝使用者腳本管理器擴充功能，如 Tampermonkey或 Violentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能，如 Tampermonkey或 Userscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展，比如 Tampermonkey，才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

（我已經安裝了使用者腳本管理器，讓我安裝！）

如何安裝

你需要先安裝一款使用者樣式管理器擴展，比如 Stylus，才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展，比如 Stylus，才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展，比如 Stylus，才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

（我已經安裝了使用者樣式管理器，讓我安裝！）

作者
mudssky
今日安裝
0
安裝總數
105
評價
1 0 0
版本
3.2.3
建立日期
2023-03-08
更新日期
2025-11-22
尺寸
489.1 KB
授權條款
MIT
腳本執行於
所有網站

highlight-keywords

一个功能强大的关键词高亮油猴脚本，支持自定义样式、智能导航、调试功能和多站点配置。

功能特性

  • 🎯 智能高亮：支持多关键词同时高亮，自动匹配网站规则
  • 🎨 自定义样式：提供多种预设主题，支持自定义高亮样式和实时预览
  • 🧭 便捷导航：右侧悬浮面板，快速跳转到上一个/下一个匹配项
  • 🐛 调试功能：内置调试面板，实时查看脚本运行状态和性能信息
  • ⚙️ 灵活配置：JSON 格式配置，支持正则表达式匹配网站
  • 💾 本地存储：配置信息保存在浏览器本地，跨页面保持
  • 🌙 主题切换：支持明暗主题切换，适应不同使用环境
  • 🔧 现代技术栈：基于 Vue 3 + TypeScript + Tailwind CSS + 组合式 API 开发

安装方法

方法一：从脚本发布页安装（推荐）

访问 Greasy Fork 发布页 直接安装

方法二：本地构建安装

# 安装依赖
pnpm i
# 打包脚本
pnpm build

构建完成后，将 dist/highlight-keywords.user.js 文件拖拽到 Tampermonkey 扩展中安装。

使用方法

基本使用

  1. 安装脚本：按照上述安装方法安装脚本
  2. 打开配置：在任意网页上，点击 Tampermonkey 图标，选择「高亮配置面板」
  3. 配置规则：在配置面板中设置关键词和匹配网站
  4. 保存配置：点击「更新配置」按钮保存设置
  5. 查看效果：刷新页面，匹配的关键词将被高亮显示

配置格式

配置文件使用 JSON 格式，支持多个规则配置：

[
  {
    "keywords": ["Vue", "React", "Angular"],
    "matchUrl": "github.com"
  },
  {
    "keywords": ["JavaScript", "TypeScript"],
    "matchUrl": "stackoverflow.com"
  },
  {
    "keywords": ["前端", "后端"],
    "matchUrl": "juejin.cn|zhihu.com"
  }
]

配置说明

  • keywords：要高亮的关键词数组，支持中英文
  • matchUrl：匹配的网站规则，支持正则表达式
    • 简单匹配："github.com" 匹配包含 github.com 的网址
    • 多站点："site1.com|site2.com" 使用 | 分隔多个站点
    • 正则表达式：".*\.com$" 匹配所有 .com 域名

样式自定义

脚本提供了多种预设主题：

  • 默认主题：黄色背景，黑色文字
  • 深色主题：深色背景，白色文字
  • 现代主题：渐变背景，圆角边框
  • 简约主题：淡色背景，下划线强调

也可以自定义 CSS 样式：

/* 高亮样式 */
background: linear-gradient(135deg, #667eea, #764ba2); 
color: white; 
border-radius: 3px; 
padding: 1px 3px;

/* 当前选中样式 */
background: orange; 
color: white; 
outline: 2px solid #ff5722;

导航功能

当页面中存在匹配的关键词时，右侧会出现导航面板：

  • 悬浮显示：鼠标悬停在右侧边缘触发区域时展开面板
  • 固定面板：点击📍图标可以固定面板，避免自动收起
  • 快速导航：使用⬆️⬇️按钮在匹配项之间跳转
  • 清除高亮：点击🗑️按钮清除所有高亮效果
  • 主题切换：点击🌙图标切换明暗主题
  • 调试模式：点击🐛图标打开调试面板
  • 关闭面板：点击✕按钮关闭面板1小时

调试功能

脚本内置了强大的调试功能，帮助开发者和用户了解脚本运行状态：

  • 性能监控：显示脚本初始化时间、高亮处理时间等性能指标
  • 状态信息：实时显示高亮状态、匹配规则、关键词等信息
  • 日志记录：记录脚本运行过程中的详细日志信息
  • 配置导出：支持导出当前配置和调试信息为 JSON 文件
  • 一键刷新：快速刷新调试信息，获取最新状态