跳到主要内容

浏览器扩展/用户脚本使用指南

本章节将详细介绍 UTags 浏览器扩展和用户脚本的使用方法，帮助您充分利用网页标签功能，提升网页浏览体验。

界面介绍​

主要界面元素​

安装并启用 UTags 浏览器扩展或用户脚本后，您会在网页上看到以下界面元素：

  1. 标签图标 (🏷️)：当您将鼠标悬停在支持的元素（如用户名、帖子、链接等）上时，会出现一个标签图标，用于添加或编辑标签
https://www.reddit.com/

添加标签截图

  1. 标签输入框：点击标签图标后出现，用于输入和编辑标签
https://www.reddit.com/

添加标签截图

  1. 标签显示：已添加的标签会显示在元素旁边或下方
https://www.reddit.com/

添加标签截图

  1. 扩展图标：浏览器工具栏中的 UTags 图标，点击可访问设置和其他功能

    扩展图标截图

信息

浏览器扩展版本暂时不支持 popup 菜单。此功能即将到来。

设置面板​

点击浏览器工具栏中的 UTags 图标，然后选择"设置"，可以访问设置面板。设置面板包含以下主要选项：

  1. 通用设置：语言、界面样式等基本设置
  2. 标签设置：标签显示方式、颜色、大小等
  3. 特殊标签：特殊标签的行为设置
  4. 浏览记录：是否启用浏览记录功能，浏览过的内容的显示方式
  5. 快速星标：是否启用快速添加星标
    https://www.youtube.com/

    设置面板截图

标签操作​

为网页元素添加标签​

  1. 将鼠标悬停在支持的元素上（如用户名、帖子标题、链接等）
  2. 点击出现的标签图标 (🏷️)
  3. 在弹出的输入框中输入标签
    • 多个标签用逗号分隔，如 重要,工作,待读
    • 标签支持空格和特殊字符
    • 可以使用层次结构，如 技术/编程/JavaScript
  4. 按回车键或点击确认按钮保存标签
https://www.reddit.com/

添加标签截图

编辑已有标签​

  1. 将鼠标悬停在已有标签上
  2. 点击标签图标
  3. 点击"复制"按钮，将标签复制到输入框，进行编辑
  4. 按回车键或点击确认按钮保存更改
https://www.tiktok.com/

编辑标签截图1

https://www.tiktok.com/

编辑标签截图2

删除标签​

  1. 将鼠标悬停在已有标签上
  2. 点击标签图标
  3. 在弹出的输入框中删除不需要的标签
  4. 按回车键或点击确认按钮保存更改
https://www.tiktok.com/

删除标签截图

特殊标签功能​

特殊标签是具有特定功能的标签，可以实现内容筛选、高亮和其他效果，提升浏览体验。

信息

目前仅部分网站适配了此功能，其他网站如果需要此功能，请联系开发者。

常用特殊标签​

  • block 或 hide：屏蔽带有此标签的内容，使其不再显示
  • favorite 或 ★：将内容标记为收藏，通常会高亮显示
  • important：标记重要内容，通常会高亮显示
  • read-later：标记稍后查看的内容

特殊标签的使用方法​

  1. 像添加普通标签一样添加特殊标签
  2. 特殊标签会立即生效，改变内容的显示方式
  3. 可以在设置中自定义特殊标签的行为
https://meta.discourse.org/

特殊标签的使用方法

更多特殊标签详见特殊标签使用。

标签管理​

⚠️ 注意：标签管理功能仅在 UTags 网页应用（书签管理器）中提供，浏览器扩展不直接支持这些高级标签管理功能。

要管理您的标签（查看、重命名、合并或删除），请访问 UTags 网页应用：

  1. 打开 UTags 网页应用
  2. 设置同步功能，确保浏览器扩展与网页应用保持同步（默认自动添加，无同步配置时，请参考手动添加配置方法）
  3. 点击左侧边栏中的"标签"选项

在网页应用中，您可以执行以下标签管理操作：

  • 查看所有标签：左侧边栏的"标签"部分显示所有标签及其使用次数
  • 重命名标签：点击标签旁的编辑图标，输入新名称并保存
  • 合并标签：选择要合并的标签，使用合并功能将它们组合
  • 删除标签：点击标签旁的删除图标，确认删除操作

UTags网页应用标签管理界面

💡 提示：使用网页应用进行标签管理可提供更强大的功能和更好的用户体验。您在网页应用中所做的标签更改将通过同步功能自动应用到浏览器扩展。

自定义样式​

使用自定义 CSS​

对于高级用户，UTags 支持使用自定义 CSS 样式来个性化标签显示：

  1. 打开 UTags 设置
  2. 启用全局或当前网站的自定义样式
  3. 在"自定义 CSS"文本框中输入 CSS 代码
  4. 保存设置

示例自定义 CSS：

https://utags.link/
/* 全局标签样式 */
body {
  /* 标签文字颜色 */
  --utags-text-tag-color: white;
  /* 标签边框颜色 */
  --utags-text-tag-border-color: red;
  /* 标签背景颜色 */
  --utags-text-tag-background-color: red;
}

/* 特定标签样式：标签为 'TEST' 的样式 */
[data-utags_tag='TEST'] {
  /* 标签文字颜色 */
  --utags-text-tag-color: white;
  /* 标签边框颜色 */
  --utags-text-tag-border-color: orange;
  /* 标签背景颜色 */
  --utags-text-tag-background-color: orange;
}

/* 列表项样式：含有 'bar' 标签的条目 */
[data-utags_list_node*=',bar,'] {
  /* 列表中含有 'bar' 标签的条目的背景色 */
  background-color: aqua;
}

/* 浏览历史样式 */
body {
  /* 浏览过的帖子的标题颜色 */
  --utags-visited-title-color: red;
}

/* 深色模式下的样式 */
[data-utags_darkmode='1'] body {
  /* 浏览过的帖子的标题颜色 */
  --utags-visited-title-color: yellow;
}

支持的网站列表​

UTags 目前支持 50 多个主流网站，包括但不限于以下类别：

社交媒体​

  • Twitter/X
  • Facebook
  • Instagram
  • Threads

视频平台​

  • YouTube
  • Bilibili
  • TikTok
  • Twitch

开发平台​

  • GitHub

论坛和社区​

  • Reddit
  • Hacker News
  • Discourse 论坛
  • Flickr

新闻和阅读​

  • Inoreader

完整的支持网站列表可以在 GitHub 仓库 中查看。如果您希望 UTags 支持其他网站，欢迎在 GitHub 上提交请求或联系开发者。

故障排除​

标签不显示​

如果标签不显示，请按照以下步骤排查问题：

  1. 确保您访问的网站在支持列表中
  2. 刷新页面（按 F5 或 Ctrl+R）
  3. 检查浏览器扩展或用户脚本是否启用（在浏览器的扩展管理页面或用户脚本管理页面）
  4. 检查是否有其他扩展与 UTags 冲突（尝试暂时禁用其他扩展或用户脚本）
  5. 在 UTags 设置中检查标签显示选项是否正确配置

同步问题​

如果遇到数据同步问题，请按照以下步骤排查：

  1. 检查同步设置是否正确配置
  2. 是否配置浏览器扩展或用户脚本与网页应用之间的同步配置，并启用自动同步功能
  3. 确保网络连接正常且稳定
  4. 对于 GitHub 同步，检查个人访问令牌是否有效且具有正确权限
  5. 对于 WebDAV 同步，检查服务器地址、用户名和密码是否正确
  6. 尝试手动触发同步并查看错误信息

性能问题​

如果遇到性能问题（如页面加载缓慢或响应延迟），请尝试以下解决方法：

  1. 更新浏览器和 UTags 扩展到最新版本
  2. 向开发者反馈问题，并提供详细的问题描述和复现步骤

获取帮助​

如果您在使用 UTags 浏览器扩展或用户脚本时遇到任何问题，或有任何建议和反馈，可以通过以下方式获取帮助：

  1. 查阅常见问题解答（FAQ）
  2. 在 GitHub Issues 提交问题报告
  3. 访问联系页面获取更多支持渠道