UTags 快捷导航 (UTags Shortcuts)

UTags 快捷导航 是一款功能强大的用户脚本，提供悬浮球或侧边栏形式的快捷导航面板。它支持按站点分组、自定义图标以及执行 JS 脚本，帮助你高效管理常用链接，提升浏览体验。

English Version

screenshot

核心功能

按站点智能分组：根据当前访问的网站自动显示相关的导航组。你可以配置特定分组仅在特定的域名或 URL 模式下显示。
双重显示模式：
- 悬浮模式 (Floating)：默认以边缘触条或悬浮球形式存在，鼠标悬停即展，不占用屏幕空间。
- 侧边栏模式 (Sidebar)：固定在屏幕左侧或右侧，内容常驻可见，适合宽屏用户。
多种项目类型：
- 链接 (URL)：添加网页跳转链接，支持基于当前页面的相对路径。
- 脚本 (JS)：直接在菜单中运行简短的 JavaScript 代码片段，实现页面自动化。
个性化定制：
- 图标支持：自动获取网站 Favicon，也支持自定义图标链接。
- 主题跟随：完美适配系统或网站的深色/浅色模式 (Dark/Light Mode)。
便捷管理：
- 快速添加：一键将当前浏览的页面添加到指定分组。
- 可视化编辑：提供图形化界面，支持拖拽排序、分组管理和属性编辑。
快捷键支持：默认使用 Alt+Shift+K 快速显示/隐藏面板。

安装方法

需要安装油猴脚本管理器：
不兼容：
- Stay
安装地址： GitHub · Greasy Fork · ScriptCat

使用指南

打开面板：
- 鼠标悬停在屏幕边缘的“触条”（默认位于屏幕右侧上部）。
- 或者直接按下快捷键 Alt+Shift+K。
添加链接：
- 打开面板后，点击底部的 + 按钮，即可将当前页面添加到导航中。
- 你可以选择添加到现有分组或创建新分组。
管理配置：
- 右键点击悬浮图标，或在面板中点击 设置 (Settings) 按钮，打开配置中心。
- 在这里你可以：
  - 新建、编辑、删除分组。
  - 添加或修改具体的导航项（链接或脚本）。
  - 设置分组的匹配规则（决定分组在哪些网站显示）。
  - 切换显示模式（悬浮/侧边栏）及调整侧边栏位置。

Discourse 侧边栏集成

在支持自定义侧边栏的 Discourse 论坛（如 Linux.do）上：

进入侧边栏自定义页面。
点击 添加链接 或编辑现有板块。
你会看到三个新按钮：
- 从 UTags Shortcuts 导入：将现有的 UTags Shortcuts 分组链接导入到当前板块。
- 从 JSON 文件导入：从 JSON 文件导入链接到当前板块。
- 导出为 JSON 文件：将当前板块的链接导出为 UTags Shortcuts 兼容的 JSON 文件。

应用场景

站点专属导航：创建一个仅在 github.com 显示的“GitHub”分组，包含跳转到 Issues、Pull Requests 或特定仓库的快捷方式。
通用工具箱：创建一个在所有网站 (*) 都显示的“常用工具”分组，放置翻译、JSON 格式化、图床等常用工具链接。
阅读辅助：在小说或文档网站，配置“上一章”、“下一章”的快捷跳转（支持相对路径）。
开发调试：配置一些 JS 脚本，用于快速填充表单、获取 Token 或切换测试环境。

个性化设置

进入设置面板，你可以自定义：

布局模式：切换悬浮或侧边栏模式。
侧边栏位置：设置在屏幕左侧或右侧。
打开方式：设置点击链接时是在当前标签页打开还是新标签页打开。
外观样式：调整边缘触条的大小、透明度和颜色。
快捷键：自定义唤起面板的快捷键。

支持的变量

你可以在链接（URL）字段中使用以下变量，它们会被自动替换为当前页面的对应值：

{hostname}: 当前主机名（例如 www.baidu.com）。
{hostname_without_www}: 去除 www. 的主机名（例如 baidu.com）。
{hostname_top_level}: 从当前 URL 提取的顶级域名（例如 baidu.com, bbc.co.uk）。
{current_url}: 当前页面的完整 URL。
{current_url_encoded}: 经过 URL 编码的完整 URL。
{current_title}: 当前页面的标题。
{query}: 从 URL 参数中提取的搜索关键词（自动检测 q, query, kw, wd, keyword, p, s, term）。
{selected}: 页面上当前选中的文本。
{q:param}: 指定查询参数的值（例如 {q:id} 获取 ?id=123 中的 123）。
{p:n}: URL 路径中的第 n 个片段（例如 {p:1} 获取 /foo/bar 中的 foo）。
{t:text}: 直接返回文本（例如 {t:hello}）。
{v:key}: 自定义变量的值（例如 {v:api_key}）。在分组、站点或全局设置中定义。
回退机制: 使用 || 定义回退值（例如 {selected||query||t:default}）。

更新日志

v0.8.x

布局位置归一化: 在侧边栏模式下引入位置归一化逻辑，根据侧边栏所在边（左/右）自动转换 position 配置，确保边缘触条、面板和菜单在不同布局模式下的行为保持一致。
折叠触条行为调整: 不再在侧边栏模式下强制隐藏边缘触条，而是始终尊重 edgeHidden 配置，便于根据个人习惯自由选择是否显示触条。

v0.7.x

选中筛选: 当选中网页文本时，导航面板会自动筛选并仅显示包含 {selected} 变量的导航项，帮助你快速找到相关的操作。
变量增强: 优化了变量更新机制。现在，当页面标题 ({current_title}) 或选中文本 ({selected}) 发生变化时，相关变量会自动更新并触发重渲染。
全局选中状态: 引入了全局选中状态管理。主页面现在可以感知 iframe 内的文本选中变化，确保 {selected} 变量始终反映用户最新的选中内容，无论是在主页面还是 iframe 中。
智能防抖: 为状态更新添加了防抖机制，避免频繁的标题或选中变化导致过度的重渲染。
代码优化: 提取了公共的标题监听逻辑，增强了 SPA（单页应用）标题变更检测的稳定性，并修复了跨域 iframe 通信问题。
Iframe 模式稳定性: 进一步优化父子页面之间的消息通道，实现单例消息监听器并避免重复注册，减少潜在的内存占用与异常事件处理。
Iframe 自愈恢复: 使用 MutationObserver 监控 DOM，当站点脚本删除 iframe 或其容器时自动重新启用 Iframe 模式，避免侧边栏功能被意外挂掉。

v0.6.x

性能优化: 实现图标缓存持久化存储，减少网络请求并加快初始化速度。
稳定性: 为网络请求增加超时处理，支持自动降级至 GM_xmlhttpRequest，防止请求挂起。
自定义变量: 新增对自定义变量的支持。你可以在全局、站点或分组设置中定义变量，并在 URL 中使用它们（例如 {v:api_key}）。
层级解析: 变量解析遵循优先级顺序：分组 > 站点 > 全局。
增强设置: 添加了用于管理自定义变量的新设置界面。

v0.5.x

增强打开方式设置：为链接添加“跟随分组设置”选项，为分组添加“跟随站点设置”选项，支持灵活的继承机制。
智能默认值：当打开方式未明确设置时，自动选中继承选项。
体验优化：添加新分组后自动滚动侧边栏至可见区域。

v0.4.x

拖拽排序优化：增强了组内拖拽排序体验，新增可视化的插入位置指示线。
自适应视觉反馈：根据布局模式（列表/网格/自动）智能切换插入线方向（上下横线或左右竖线）。
URL 处理修复：修复了拖拽添加链接时 URL 被二次编码的问题，确保 {hostname} 等模板变量能被正确识别和保留。
Discourse 集成：支持在 Discourse 论坛（如 Linux.do）的自定义侧边栏中导入/导出链接。
导出过滤：导出时自动过滤掉名称中包含 [隐藏] 的项目。
URL 处理：导入时若 URL 与当前域名相同，自动将其转换为相对路径。
UI 优化：优化了 Discourse 侧边栏中的提示消息（Toast）和按钮布局。
Iframe 模式优化：增强跨域导航处理，确保外部链接在顶层窗口打开；在同步 URL 状态前校验源（Origin），提升安全性与稳定性。

v0.3.x

兼容性优化：Stay 脚本管理器禁止使用 Iframe 模式（因为 Stay 会强制删除新建的 iframe body）。
优化：增加轮询机制作为跨标签页数据同步的兜底方案。
为不支持 addValueChangeListener 的脚本管理器增加监听数据变化的功能，实现跨标签页数据同步。

v0.2.6

优化 Iframe 焦点管理：更新 iframe URL 后自动聚焦 iframe，确保快捷键操作即时生效。

v0.2.5

优化 Iframe 模式下的 SPA 导航：改进了导航逻辑，通过父子窗口间的消息传递来触发导航，确保正确处理 SPA 路由（如 Next.js、Vue Router），避免强制重载。
改进 Iframe 模式下的 SPA 支持：修复了在侧边栏内导航单页应用 (SPA) 时，可能无法正确更新 Iframe 支持状态的问题。
提升稳定性：重构了 Iframe 检测逻辑，更好地处理无限刷新循环，提升整体稳定性。
改进 SPA（单页应用）导航体验：在 Iframe 模式或通过 Next.js 路由导航时，页面顶部会显示加载进度条，并优化了结束时的视觉延迟。
优化图片加载：为所有图标和图片启用懒加载（Lazy Loading），提升页面初始化加载性能。
代码重构：将图片生成逻辑提取为工厂方法，提高代码可维护性。

v0.2.3

改进面板折叠行为：当鼠标离开窗口或悬停在滚动条上时，面板将保持展开状态。

v0.2.2

优化面板渲染逻辑，减少状态更新时的 UI 抖动。
修复面板可能覆盖在蒙层之上的问题。

v0.2.1

新增图片缓存机制，避免重复的网络请求，提升图标渲染性能。

v0.2.0

Iframe 模式: 侧边栏现在默认在隔离的 Iframe 环境中运行，极大提高了跨网站的兼容性和稳定性。
- 自动处理 CSP (内容安全策略) 限制。
- 确保样式和脚本不与宿主页面冲突。
- 支持跨域导航：外部链接在顶层窗口打开，同源链接在 Iframe 内加载。
- 保持 Iframe 与主窗口之间的状态同步（URL、标题、Favicon）。
优化键盘事件处理，提高与其他脚本的兼容性。
改进对 SPA (单页应用) 的支持，新增动态标题监听。

v0.1.22

初始化时自动从远程导入预设数据。

v0.1.21

修复了在具有严格 CSP（内容安全策略）的网站上无法注入样式的问题。

v0.1.20

优化导入数据功能：支持从 URL 和粘贴文本导入

v0.1.16

新增分组显示风格选项：支持“图标+标题”、“仅图标”、“仅标题”三种模式。
新增面板背景色设置，提供多种预设颜色。
优化“每行图标数”设置体验。

v0.1.14

支持将网页中的链接拖拽到分组中。

v0.1.12

支持更多 URL 变量：{q:param}, {p:n}, {t:text}, {te:text}。

v0.1.6

新增侧边栏模式。
新增 JS 脚本执行支持。
改进 UI 和自定义选项。

许可证

MIT License — 详见 LICENSE

ScriptCat

UTags Shortcuts