扩展中如何覆盖Service Worker的fetch请求User Agent？

一直尝试在浏览器扩展中修改Service Worker发起的fetch请求的User Agent，但始终未能成功，也未找到实现此功能的同类扩展。

尝试的解决方案 #

1. Manifest V2下使用chrome.webRequest修改请求头 #

最初通过background.js利用chrome.webRequest拦截并修改请求头：

var OBSHOption = ["requestHeaders", "blocking"];
if (chrome.webRequest.OnBeforeSendHeadersOptions.hasOwnProperty("EXTRA_HEADERS")) OBSHOption.push("extraHeaders");
chrome.webRequest.onBeforeSendHeaders.addListener(function(details)
{
    if (agent == "Default") return;
    details.requestHeaders = details.requestHeaders.filter(function(elem) { return !elem.name.toLowerCase().includes("sec-ch-ua"); });
    details.requestHeaders.find(function(elem) { if (elem.name.toLowerCase() == "user-agent") elem.value = agent; });

    return {requestHeaders:details.requestHeaders};
}, {urls:["<all_urls>"]}, OBSHOption);

测试后发现，Service Worker发起的fetch请求仍携带原始User Agent，通过UA检测工具验证了这一结果。推测谷歌搜索“what is my user agent”的UA显示机制类似，不过其实际请求的是data:image链接。

2. 使用declarativeNetRequest方案 #

之后尝试改用declarativeNetRequest规则修改请求头：

const delrules =
{
    removeRuleIds: [1, 2, 3, 4]
};

chrome.declarativeNetRequest.updateSessionRules(delrules);

if (agent == "Default") return;

if (agent == "Chromify")
    agent = navigator.userAgent.replace(/ opr\/[^\s]+| edg\/[^\s]+| vivaldi\/[^\s]+/ig, "");

var types = ["main_frame","sub_frame","stylesheet","script","image","font","object","xmlhttprequest","ping","csp_report","media","websocket","webtransport","webbundle","other"];

const addrules =
{
    addRules:
    [
        { id:1, priority:1, condition: { resourceTypes:types }, action: { type:"modifyHeaders", requestHeaders: [{ header:"user-agent", operation:"set", value:agent }] } },
        { id:2, priority:2, condition: { resourceTypes:types }, action: { type:"modifyHeaders", requestHeaders: [{ header:"sec-ch-ua", operation:"remove" }] } },
        { id:3, priority:3, condition: { resourceTypes:types }, action: { type:"modifyHeaders", requestHeaders: [{ header:"sec-ch-ua-mobile", operation:"remove" }] } },
        { id:4, priority:4, condition: { resourceTypes:types }, action: { type:"modifyHeaders", requestHeaders: [{ header:"sec-ch-ua-platform", operation:"remove" }] } }
    ]
};

chrome.declarativeNetRequest.updateSessionRules(addrules);

但此方案下，Service Worker的fetch请求User Agent仍未被覆盖。

最终排查结果 #

进一步测试发现，谷歌服务在UA伪造场景下存在异常：搜索“what is my user agent”时，页面响应显示真实UA，查看网络日志发现google.com的请求头未被declarativeNetRequest修改，但其他网站的请求UA已成功修改。

最终确认这是Opera浏览器的长期bug，已提交bug报告，切换到Brave浏览器后该问题解决。

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