Chrome扩展onCompleted监听器多次触发问题求助

你遇到的重复触发问题，根源在于你在监听器回调里发起的fetch请求，又被同一个webRequest监听器捕获了，形成了无限循环：

1. 目标请求触发onCompleted监听器
2. 监听器里调用fetch请求同一个URL
3. 这个fetch请求符合你设置的URL匹配规则，且包含&userproof，再次触发监听器
4. 重复步骤2-3，导致监听器持续触发

解决方案：标记内部请求并跳过监听 #

给你自己发起的fetch请求添加自定义标记，让监听器识别并跳过这类请求，具体代码修改如下：

function logURL(requestDetails) {
    // 跳过我们自己发起的内部请求
    if (requestDetails.requestHeaders?.some(header => header.name === 'X-Extension-Internal' && header.value === '1')) {
        return true;
    }

    if (requestDetails.url.indexOf("&userproof") > 0) {
        console.log(`Loading URL: ${requestDetails.url}`);

        // 发起请求时添加自定义头标记
        fetch(requestDetails.url, {
            headers: {
                'X-Extension-Internal': '1'
            }
        })
        .then(response => response.json())
        .then(data => console.log("data::", data))
        .catch(err => console.error("Fetch error:", err)); // 捕获请求错误，避免后台异常
    }
    return true;
}

chrome.webRequest.onCompleted.addListener(
    logURL,
    {urls: ["https://website/folder1/folder2/*"]},
    ['responseHeaders', 'requestHeaders'] // 新增requestHeaders权限，才能读取请求头进行判断
);

关键修改说明 #

1. 自定义请求头标记：通过X-Extension-Internal头区分内部请求和外部请求，监听器优先判断并跳过内部请求
2. 权限补充：在监听器的参数中加入requestHeaders，确保能获取到请求头信息进行判断
3. 错误处理：给fetch添加catch，避免后台出现未处理的Promise异常

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