基于Chrome Extension V3重写navigator.userAgent的技术实现咨询

我来帮你搞定这个需求——刚好我之前折腾过类似的场景，踩过V3版本CSP限制的坑，给你捋捋可行的方案：

首先得明确：直接在普通内容脚本里修改navigator.userAgent是没用的。因为V3的内容脚本默认运行在隔离的「ISOLATED」世界，和页面自身的JS环境不共享，你改的只是内容脚本环境里的navigator，页面里的JS读取的还是原始值。而且V3的CSP严格禁止eval这类动态执行脚本的方式，所以得用官方推荐的「世界隔离（World Isolation）」方案来注入脚本到页面的主世界。

具体实现步骤 #

1. 配置manifest.json

你需要在manifest里声明内容脚本时，指定它运行在页面的「MAIN」世界，这样脚本才能进入页面自身的JS环境。示例配置如下：

{
  "manifest_version": 3,
  "name": "UA 追加测试工具",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["<all_urls>"], // 替换成你需要生效的域名，比如"https://example.com/*"
      "js": ["inject-ua.js"],
      "world": "MAIN" // 关键：注入到页面主世界
    }
  ]
}

2. 编写注入脚本 inject-ua.js

因为navigator.userAgent是只读属性，我们需要用Object.defineProperty来重写它的getter，实现末尾追加「Test」的效果：

// 保存原始用户代理字符串
const originalUA = navigator.userAgent;
// 生成修改后的UA
const modifiedUA = originalUA + " Test";

// 重写navigator.userAgent的获取逻辑
Object.defineProperty(navigator, 'userAgent', {
  get: () => modifiedUA,
  configurable: true, // 允许后续重新配置（如果需要的话）
  enumerable: true // 保持可枚举性，和原始属性一致
});

为什么这个方案可行？ #

• 「MAIN」世界的脚本直接运行在页面的JS环境中，修改的就是页面JS能访问到的navigator对象，完全绕过了内容脚本的隔离限制。
• 这个方案符合V3的CSP要求：脚本是扩展打包的本地资源，没有使用eval或远程脚本，不会触发CSP报错。

验证效果 #

安装扩展后，打开任意匹配的页面，在开发者工具的Console里输入navigator.userAgent，就能看到末尾追加了「Test」的字符串——页面里的任何JS代码读取这个值时，都会拿到修改后的结果。

后续处理请求头UA的提示 #

如果你之后需要修改HTTP请求头里的User-Agent，V3里推荐使用chrome.declarativeNetRequest API，而不是旧版的webRequest（后者在V3里有诸多限制）。不过这部分可以等你完成当前核心需求后再研究。

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