如何使用 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*of\s*\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 事件模拟原生交互——这在批量下载场景中极具实用价值。

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