Chrome扩展开发：ServiceNow用户预览信息爬取异常排查

问题描述 #

开发的Chrome扩展用于定位ServiceNow工单元素、爬取选中项并复制到剪贴板。当前遇到的问题是：已选用户列表仅显示姓名，点击条目后预览区会展示邮箱，但通过代码遍历点击每个用户时，预览区视觉上切换了，但始终只获取到同一个用户的邮箱。

问题分析 #

你的代码采用同步循环执行，但ServiceNow的预览区域更新是异步操作（依赖前端渲染或AJAX请求）。循环执行速度远快于页面预览内容的更新，导致每次读取siu.innerText时，页面还没完成新用户信息的渲染，所以始终拿到的是某一个用户的缓存值。

另外代码存在几个语法和逻辑问题：

• users2[m].focus; 和 users2[m].click; 是语法错误，需改为focus()和click()方法调用
• 触发多个冗余的change事件，且无等待异步操作完成的机制
• 重复设置selected和ariaSelected状态的操作可能干扰页面正常状态

解决方案 #

改为异步循环，使用async/await配合预览内容更新监听逻辑，确保每次点击后等待页面渲染完成再读取邮箱。

修改后的代码示例 #

var users1 = tr4.querySelector('[class^="slushbucket-top is-prefilled"]');
var users = users1.querySelector("select");
var users2 = users1.querySelectorAll("option");
var seluserlist = [];

// 等待预览区域内容更新的辅助函数
async function waitForPreviewUpdate(prevText, siu) {
    return new Promise(resolve => {
        const interval = setInterval(() => {
            if (siu.innerText !== prevText) {
                clearInterval(interval);
                resolve();
            }
        }, 100);
        // 超时保护，避免无限等待
        setTimeout(() => {
            clearInterval(interval);
            resolve();
        }, 3000);
    });
}

async function fetchUserEmails() {
    const numofselected = users2.length;
    // 先获取初始预览文本作为对比基准
    let siu = tr4.querySelector('[id^="list_of_the_staff_membersrecordpreview"]');
    let prevPreviewText = siu.innerText;

    for (let m = 0; m < numofselected; m++) {
        // 取消上一个用户的选中状态
        if (m > 0) {
            users2[m - 1].selected = false;
        }
        // 选中当前用户并触发点击
        users2[m].selected = true;
        users2[m].ariaSelected = true;
        users2[m].focus();
        users2[m].click();
        
        // 等待预览区域内容更新
        await waitForPreviewUpdate(prevPreviewText, siu);
        prevPreviewText = siu.innerText;
        
        // 保存当前用户邮箱
        seluserlist.push(siu.innerText + ";");
        
        // 取消当前用户选中状态
        users2[m].selected = false;
        users2[m].ariaSelected = false;
    }

    console.log(seluserlist);
    // 后续处理逻辑...
}

// 执行异步爬取
fetchUserEmails();

关键改进点 #

1. 异步等待机制：通过waitForPreviewUpdate函数监听预览区域文本变化，确保内容更新后再读取
2. 修复语法错误：把focus/click改为focus()/click()方法调用
3. 简化状态管理：去掉冗余的change事件触发，只保留必要的选中和点击操作
4. 超时保护：避免因页面异常导致无限等待

额外建议 #

• 可直接通过ServiceNow的DOM结构获取用户唯一标识：已选用户的option元素的value属性通常是用户的Sys ID，用这个ID调用ServiceNow内部API或REST接口获取完整用户信息（需扩展权限支持），无需模拟点击预览
• 调试时可在await前后打印预览文本，确认内容是否正常更新

内容的提问来源于stack exchange，提问作者user2312463