本文介绍如何编写 tampermonkey 脚本，在页面中匹配特定 `
在自动化处理通知列表（如下载队列、任务提醒）时，为每项添加可视化的序号能显著提升人工操作效率——尤其当你需要按顺序逐个点击触发动作（例如下载导出文件）。虽然问题中提到了转向 Bookmarklet 方案，但 Tampermonkey 完全可胜任此任务，且更稳定、易维护、支持跨 iframe（需正确配置）。
以下是一个健壮、生产就绪的 Tampermonkey 脚本示例，它：
- 精确定位 data-testid="notifications-list" 的 <ul>；
- 遍历所有子 <li data-testid="notification-container">；
- 方案一（推荐）：在每项标题前插入序号（如 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）触发对应项”，可在序号旁插入 <button> 并绑定 click 事件模拟原生交互——这在批量下载场景中极具实用价值。
该脚本轻量、无外部依赖、开箱即用，是处理通知类列表序号标注的专业级解决方案。
