Chrome扩展调用click()方法无法触发页面按钮点击问题求助

问题原因分析 #

你遇到的.click()不生效但样式修改正常的问题，属于前端自动化点击的常见场景，核心原因有以下几类：

• 目标元素绑定的交互事件不是click：很多网站会用mousedown、mouseup、pointerdown、touchstart这类事件实现交互，原生的HTMLElement.click()方法只会触发绑定在click事件上的处理逻辑，对其他类型的事件无效
• 前端框架合成事件拦截：如果目标网站用React、Vue等框架开发，框架会自己实现一套事件合成机制，直接调用元素的click方法不会被框架的事件体系捕获，自然不会触发对应的交互逻辑
• 事件绑定未完成：你注入脚本执行时，元素已经渲染完成（所以可以修改样式），但网站的事件监听逻辑还没执行完成，此时点击不会触发任何响应

修复方案 #

替换你的utilities.js代码为以下版本，会模拟完整的鼠标交互事件流，兼容绝大多数网站的交互逻辑：

function simulateFullMouseInteraction(element) {
    // 模拟鼠标按下
    const mousedownEvent = new MouseEvent('mousedown', {
        bubbles: true,
        cancelable: true,
        view: window
    });
    element.dispatchEvent(mousedownEvent);

    // 模拟鼠标抬起
    const mouseupEvent = new MouseEvent('mouseup', {
        bubbles: true,
        cancelable: true,
        view: window
    });
    element.dispatchEvent(mouseupEvent);

    // 最后触发click事件兜底
    const clickEvent = new MouseEvent('click', {
        bubbles: true,
        cancelable: true,
        view: window
    });
    element.dispatchEvent(clickEvent);
}

function goToActivityTab() {
    // 先做元素存在性校验，避免报错
    const activityTabs = document.getElementsByClassName('ut-tab-bar-item');
    if (activityTabs.length >= 3) {
        const targetTab = activityTabs[2];
        // 如果要验证元素是否正确，可以保留下面这句样式修改的代码调试
        // targetTab.style.background = "#FF00FF";
        simulateFullMouseInteraction(targetTab);
    }
}

// 如果是事件绑定未完成的问题，可以加个短延迟再执行
setTimeout(goToActivityTab, 100);

如果以上代码还是不生效，可以打开目标网站的控制台，用元素选择器选中目标按钮后，在控制台执行getEventListeners($0)，查看该元素绑定的所有事件类型，把对应事件类型加到上面的模拟事件序列中即可。

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