highlight-keywords

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

安裝腳本 ?

瀏覽作者的技術支援網站、發表問題、評論、或檢舉該腳本。

作者: mudssky
今日安裝: 0
安裝總數: 101
評價: 1 0 0
版本: 3.2.1
建立日期: 2023-03-08
更新日期: 2025-07-27
尺寸: 536.4 KB
授權條款: MIT
腳本執行於: 所有網站

highlight-keywords

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

功能特性

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

安装方法

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

访问 Greasy Fork镜像发布页直接安装

方法二：本地构建安装

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

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

使用方法

基本使用

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

配置格式

配置文件使用 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 文件
一键刷新：快速刷新调试信息，获取最新状态

highlight-keywords

功能特性

安装方法

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

方法二：本地构建安装

使用方法

基本使用

配置格式

配置说明

样式自定义

导航功能

调试功能

欢迎访问Greasy Fork镜像