如何在Chrome扩展中匹配含全部关键词的HTML元素并触发click事件

动态多关键词元素定位实现 #

你原有代码中清理空关键词的逻辑存在缺陷：如果空字符串出现在数组中间，pop()只能删除数组末尾元素，无法正确清理全部空值，建议改用filter方法处理。
针对任意数量、自定义顺序的关键词匹配需求，推荐使用更稳定的filter方案，避免直接拼接选择器时特殊字符引发的语法错误：

$(document).ready(function() {
    console.log('ready');
    findItem();
});

function findItem() {
    chrome.storage.local.get("settings", function (data) {
        if (!data.settings?.keyWords) return;

        // 正确清理空关键词
        const pkArr = data.settings.keyWords.split(", ").filter(keyword => keyword.trim() !== '');
        if (!pkArr.length) return;

        // 转义关键词中的正则特殊字符
        const escapedKeys = pkArr.map(keyword => keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
        // 生成按自定义顺序匹配所有关键词的正则
        const orderReg = new RegExp(escapedKeys.join('.*'));

        // 筛选符合条件的div元素
        const targetEls = $('div').filter(function() {
            return orderReg.test($(this).text());
        });
    });
};

.click()方法不生效解决方案 #

remove()能生效但click()失效，是因为remove()是直接操作DOM的原生行为，而click()触发事件受页面事件绑定逻辑限制，优先使用原生事件触发代替jQuery的click()方法即可兼容绝大多数场景：

// 替换上述代码中筛选元素后的逻辑即可
targetEls.each(function() {
    // 原生触发点击事件，兼容页面原生绑定的事件
    this.dispatchEvent(new MouseEvent('click', {
        bubbles: true,
        cancelable: true,
        view: window
    }));
});

如果目标元素是页面动态渲染的，执行代码时元素还未加载，可增加轮询逻辑等待元素出现：

function waitAndClick() {
    const targetEls = $('div').filter(function() {
        return orderReg.test($(this).text());
    });
    if (targetEls.length) {
        targetEls[0].dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));
    } else {
        setTimeout(waitAndClick, 300);
    }
}
waitAndClick();

如果网站有反自动化检测校验事件的isTrusted属性，自用场景下可直接调用元素的onclick()方法（仅适用于事件直接绑定在onclick属性上的场景）。

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