如何使用 Tampermonkey 为通知列表的每一项自动添加序号

在自动化处理通知列表（如下载队列、任务提醒）时，为每项添加可视化的序号能显著提升人工操作效率——尤其当你需要按顺序逐个点击触发动作（例如下载导出文件）。虽然问题中提到了转向 Bookmarklet 方案，但 Tampermonkey 完全可胜任此任务，且更稳定、易维护、支持跨 iframe（需正确配置）。

以下是一个健壮、生产就绪的 Tampermonkey 脚本示例，它：

• 精确定位 data-testid=”notifications-list” 的
  ；
• 遍历所有子
• ；
• 方案一（推荐）：在每项标题前插入序号（如 1. Widget ready for download）；
• 方案二（备选）：提取并强化 aria-label 中已有的 (n of N) 编号（如将 “Widget ready for download (1 of 22)” 改为 “【1/22】Widget ready for download”）。

✅ 完整脚本如下（已适配你提供的 html 结构与类名）：

// ==UserScript== // @name         Notification List Numbering // @namespace    https://github.com/yourname // @version      1.2 // @description  Add sequential numbers to each notification item (e.g., "1. Widget ready...") // @author       You // @match        *://warnerhotels.eu.qualtrics.com/* // @grant        none // @run-at       document-idle // ==/UserScript==  (function () {     'use strict';      // 等待目标列表加载（防动态渲染）     const waitForList = () => {         const ul = document.querySelector('ul[data-testid="notifications-list"]');         if (ul) {             annotateNotifications(ul);         } else {             setTimeout(waitForList, 300);         }     };      const annotateNotifications = (ul) => {         const items = ul.querySelectorAll('li[data-testid="notification-container"]');          items.forEach((li, index) => {             const num = index + 1;              // ✅ 方案一：在标题前插入序号（最直观、不影响原 aria-label）             const header = li.querySelector('h3.header-text--TaaKMDumePzcO7v');             if (header && !header.hasAttribute('data-numbered')) {                 const originalText = header.textContent.trim();                 header.textContent = `${num}. ${originalText}`;                 header.setAttribute('data-numbered', 'true');             }              // ? 方案二（可选）：增强 aria-label（取消注释启用）             /*             const notificationDiv = li.querySelector('[data-testid="notification"]');             if (notificationDiv && notificationDiv.hasAttribute('aria-label')) {                 const label = notificationDiv.getAttribute('aria-label');                 const enhancedLabel = label.replace(                     /(.+?)s*(d+s*ofs*d+)/i,                     `【${num}】$1`                 );                 notificationDiv.setAttribute('aria-label', enhancedLabel);             }             */         });          console.log(`✅ Annotated ${items.length} notification items.`);     };      // 启动     waitForList(); })();

? 关键说明与注意事项：

• @run-at document-idle 确保脚本在 DOM 就绪但无需等待全部资源加载时执行，兼顾速度与可靠性；
• waitForList() 使用轮询机制应对 SPA 动态渲染（如 react/vue 渲染的通知列表），避免因元素未出现导致失败；
• 防重复标注：通过 data-numbered 属性标记已处理项，避免多次运行脚本造成序号叠加（如 1. 1. Widget…）；
• 不破坏无障碍访问：方案一仅修改视觉文本，保留原始 aria-label；方案二则主动优化语义化标签，更适合屏幕阅读器；
• 类名容错性：脚本使用 querySelector + data-testid（稳定属性）而非依赖易变的 css 类名（如 notification-container–cmGv8ll9qjdnKcX），大幅提升兼容性；
• iframe 场景支持：若通知列表位于 iframe 内，只需将 document 替换为对应 iframe 的 contentDocument（需确保同源），例如：

  const iframe = document.querySelector('iframe[src*="notifications"]'); if (iframe?.contentDocument) {     const ul = iframe.contentDocument.querySelector('ul[data-testid="notifications-list"]');     // ...后续同理 }

? 进阶提示：如需支持“点击序号快速跳转”或“键盘快捷键（如 Ctrl+1～9）触发对应项”，可在序号旁插入 并绑定 click 事件模拟原生交互——这在批量下载场景中极具实用价值。

该脚本轻量、无外部依赖、开箱即用，是处理通知类列表序号标注的专业级解决方案。