如何在Chrome扩展中通过JavaScript以编程方式选中UL中的LI元素？

看起来你已经迈出了第一步——成功定位到了目标<ul>元素！接下来要实现选中特定<li>并模拟用户手动选择的效果，需要兼顾UI状态更新和站点的交互逻辑，我给你整理了完整的实现方案：

// 1. 在已找到的ul中定位目标li（这里选data-value="1"的第二个选项）
const targetLi = lst.querySelector('li[data-value="1"]');
if (!targetLi) return; // 防止找不到元素报错

// 2. 移除当前已选中项的selected类，保持UI状态唯一
const currentSelected = lst.querySelector('.selected');
if (currentSelected) {
  currentSelected.classList.remove('selected');
}

// 3. 给目标li添加上选中样式类
targetLi.classList.add('selected');

// 4. 模拟用户点击事件（关键！触发站点的业务逻辑）
targetLi.dispatchEvent(new MouseEvent('click', {
  bubbles: true, // 允许事件冒泡，保证上层监听能捕获到
  cancelable: true,
  view: window
}));

// 可选：如果站点是模拟下拉框逻辑，可能需要额外触发change事件
const changeEvent = new Event('change', { bubbles: true });
lst.dispatchEvent(changeEvent);

关键细节说明： #

• 简洁定位元素：用querySelector在已获取的ul内部查询目标li，比继续使用XPath更直观高效，修改选中项只需要替换data-value的值即可。
• 维护选中状态唯一性：必须先移除原有选中项的selected类，否则页面会出现多个“选中”状态的元素，不符合交互逻辑。
• 模拟真实交互：单纯修改类名只会改变UI，但很多站点的前端逻辑（比如更新表单值、触发接口请求）是监听click或change事件的，所以必须通过dispatchEvent模拟用户的真实操作，确保业务流程正常触发。

如果你需要选中其他选项，比如data-value="5"，只需要把选择器改成li[data-value="5"]就可以了。

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