跳到主要内容

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

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

界面介绍​

主要界面元素​

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

  1. 标签图标 (🏷️)：当您将鼠标悬停在支持的元素（如用户名、帖子、链接等）上时，会出现一个标签图标
  2. 标签输入框：点击标签图标后出现，用于输入和编辑标签
  3. 标签显示：已添加的标签会显示在元素旁边或下方
  4. 扩展图标：浏览器工具栏中的 UTags 图标，点击可访问设置和其他功能

UTags浏览器扩展界面元素截图

设置面板​

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

  1. 通用设置：语言、界面样式等基本设置
  2. 标签设置：标签显示方式、颜色、大小等
  3. 数据同步：同步方式和配置
  4. 特殊标签：特殊标签的行为设置
  5. 快捷键：键盘快捷键设置
  6. 关于：版本信息和帮助链接

添加标签​

为网页元素添加标签​

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

为网页元素添加标签截图

编辑已有标签​

  1. 将鼠标悬停在已有标签上
  2. 点击标签或标签图标
  3. 在弹出的输入框中编辑标签
  4. 按回车键或点击确认按钮保存更改

删除标签​

  1. 将鼠标悬停在已有标签上
  2. 点击标签或标签图标
  3. 在弹出的输入框中删除不需要的标签
  4. 如果要删除所有标签，清空输入框
  5. 按回车键或点击确认按钮保存更改

批量操作​

在某些支持的网站上，UTags 提供批量操作功能：

  1. 在页面上选择多个元素（如多个帖子或链接）
  2. 使用快捷键（默认为 Alt+T）或右键菜单中的"批量添加标签"
  3. 在弹出的对话框中输入要添加的标签
  4. 点击确认按钮应用到所有选中的元素

使用特殊标签​

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

常用特殊标签​

  • block：屏蔽带有此标签的内容，使其不再显示
  • hide：暂时隐藏带有此标签的内容，可以通过设置切换显示
  • favorite 或 ★：将内容标记为收藏，通常会高亮显示
  • read：将内容标记为已读，通常会改变显示样式
  • important：标记重要内容，通常会高亮显示
  • later：标记稍后查看的内容
  • nsfw：标记不适合工作场所查看的内容，默认会模糊处理

特殊标签的使用方法​

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

自定义特殊标签​

您可以在设置中自定义特殊标签的行为：

  1. 打开 UTags 设置
  2. 选择"特殊标签"选项卡
  3. 添加新的特殊标签或修改现有特殊标签的行为
  4. 设置标签的效果（如隐藏、高亮、模糊等）
  5. 保存设置

标签管理​

查看所有标签​

  1. 点击浏览器工具栏中的 UTags 图标
  2. 选择"查看所有标签"
  3. 在弹出的面板中可以看到所有已添加的标签及其使用次数

标签管理面板截图

重命名标签​

  1. 在"查看所有标签"面板中找到要重命名的标签
  2. 点击标签旁边的编辑图标
  3. 输入新的标签名称
  4. 点击确认按钮保存更改

合并标签​

  1. 在"查看所有标签"面板中找到要合并的标签
  2. 点击标签旁边的合并图标
  3. 选择要合并到的目标标签
  4. 点击确认按钮完成合并

删除标签​

  1. 在"查看所有标签"面板中找到要删除的标签
  2. 点击标签旁边的删除图标
  3. 确认删除操作

自定义样式​

标签显示样式​

  1. 打开 UTags 设置
  2. 选择"标签设置"选项卡
  3. 自定义以下选项：
    • 标签位置（元素旁边或下方）
    • 标签大小
    • 标签颜色
    • 标签背景
    • 标签边框
    • 标签圆角
    • 标签间距

使用自定义 CSS​

对于高级用户，UTags 支持使用自定义 CSS 样式：

  1. 打开 UTags 设置
  2. 选择"高级设置"选项卡
  3. 在"自定义 CSS"文本框中输入 CSS 代码
  4. 保存设置

示例自定义 CSS：

/* 自定义标签样式 */
.utags-tag {
  font-family: 'Arial', sans-serif;
  font-size: 12px;
  padding: 2px 6px;
  margin: 0 2px;
  border-radius: 12px;
  background-color: #f0f0f0;
  color: #333;
  border: 1px solid #ccc;
}

/* 自定义特殊标签样式 */
.utags-tag[data-tag='favorite'] {
  background-color: #ffe066;
  color: #333;
  border-color: #ffd700;
}

支持的网站列表​

UTags 目前支持 50 多个网站，包括但不限于：

社交媒体​

  • Twitter/X
  • Reddit
  • Facebook
  • Instagram
  • LinkedIn
  • Mastodon

视频平台​

  • YouTube
  • Bilibili
  • Vimeo
  • TikTok

开发平台​

  • GitHub
  • GitLab
  • Stack Overflow
  • CodePen

论坛和社区​

  • Hacker News
  • Discourse 论坛
  • Discord
  • Telegram Web

新闻和阅读​

  • Medium
  • Substack
  • RSS 阅读器
  • 主流新闻网站

电商平台​

  • Amazon
  • eBay
  • AliExpress

其他​

  • Wikipedia
  • Google 搜索结果
  • Bing 搜索结果

完整的支持网站列表可以在 GitHub 仓库 中查看。

键盘快捷键​

UTags 提供以下默认键盘快捷键：

  • Alt+T：为当前元素添加标签
  • Alt+Shift+T：批量添加标签
  • Alt+B：切换屏蔽标签的显示/隐藏
  • Alt+H：切换隐藏标签的显示/隐藏
  • Alt+F：将当前元素标记为收藏

您可以在设置中自定义这些快捷键。

故障排除​

标签不显示​

如果标签不显示，请尝试以下解决方法：

  1. 确保您访问的网站在支持列表中
  2. 刷新页面
  3. 检查浏览器扩展是否启用
  4. 检查是否有其他扩展与 UTags 冲突
  5. 在设置中检查标签显示选项

同步问题​

如果遇到同步问题，请尝试以下解决方法：

  1. 检查同步设置是否正确
  2. 确保网络连接正常
  3. 对于 GitHub 同步，检查个人访问令牌是否有效
  4. 对于 WebDAV 同步，检查服务器地址、用户名和密码是否正确
  5. 尝试手动触发同步

性能问题​

如果遇到性能问题，请尝试以下解决方法：

  1. 减少使用的标签数量
  2. 在设置中禁用不需要的功能
  3. 清除浏览器缓存
  4. 更新浏览器和 UTags 扩展到最新版本